DEV Community

Cover image for Glam Up My Markup - Camp Form for kids

Posted on

Glam Up My Markup - Camp Form for kids

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built And Why

I built the "Glam Up My Markup" Challenge. I decided to format the form a little bit to make it look like a regular form. Additional I added some colors and bigger fonts so that it is easy to understand for kids and parents. I saw this challenge by the Use-Case parents want to fill out this form for the camp and get supported by their child. So it should look a little bit cute or funny and not like a office document.
The button and the header got a small hover effect so it is more enjoyable in user interaction.
The HTML got the language property with the value "en-us" so a web browser plugin can easily translate the website in any language (tested by Firefox' translator in Beta state).


<!DOCTYPE html>

<html lang="en-us">
        <meta charset="UTF-8">
        <title>Camp Activities Inquiry</title>
<!-- CSS Style Sheet -->        
            section {
                margin-left: 10%;
                margin-right: 10%;
            form {
                padding: 1%;
                background-color: #bec4ae;
                font-size: x-large;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                border-radius: 1rem;
                border-width: 5px;
                border-color: black;
                border-style: solid;
            select {
                font-size: x-large;
                margin-bottom: 15px;
            textarea {
                font-size: x-large;
                margin-bottom: 15px;
            button {
                margin: auto;
                font-size: x-large;
                color: white;
                width: 100px;
                background-color: #787f4b;
                border-style: solid;
                border-width: 5px;
                border-radius: 1rem;
                border-color: black;
                transition: all .5s;
            button:hover {
                background-color: #d76e4f;
                cursor: pointer;
                width: 100%;
            body {
                background-color: #cdd3bc;

            h1 {
                color: #313738;
                font-size: xx-large;
                text-align: center;
            h1:hover {
                color: #d76e4f;
<!-- HTML Body -->
        <section id="camp-activities-inquiry">
            <h1>Camp Activities Inquiry</h1>
            <form action="/submit-form" method="POST">
                <label for="activity-select">Which camp activities are you most looking forward to?</label>
                <select id="activity-select" name="activity">
                    <option value="">--Please choose an option--</option>
                    <option value="hiking">Hiking</option>
                    <option value="canoeing">Canoeing</option>
                    <option value="fishing">Fishing</option>
                    <option value="crafts">Crafts</option>
                    <option value="archery">Archery</option>

                <label for="food-allergies">Food Allergies (if any)</label>
                <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea>

                <label for="additional-info">Additional things the counselor should know</label>
                <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea>

                <button type="submit">Submit</button>
Enter fullscreen mode Exit fullscreen mode

Website of the code snippet

Website of the code snippet with hover effect


I made this in an hour of evening coding session. The code is not special but it consider to the use-case I mentioned above.
PS: Hope to get a badge for this :)

Keep coding!

Top comments (0)