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).
Demo
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Camp Activities Inquiry</title>
<!-- CSS Style Sheet -->
<style>
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;
}
</style>
</head>
<body>
<!-- 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>
</select>
<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>
</form>
</section>
</body>
</html>
Conclusion
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)