Glam Up My Markup: Camp bunny hop 🐰

#frontendchallenge #devchallenge #css #javascript

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

What I Built

I created a colorful form for the camp activities, which should remind you of a wooden bulletin board, which you can also find in summer camps. And since Easter is just around the corner and cute bunnies make everything better, I used bunnies to visualize the selected activity

Demo

Journey

When looking at the HTML code, I noticed that there were no image tags, which is why I worked exclusively with background images to achieve my goal.

Depending on the selected activity, a suitable image is displayed in the h1. To recognize the image and the text in the h1 I use a combination of padding and flexbox to place the text at the bottom center of the image but not too far down.

I added the required attribute to the selection via JavaScript and set the first option to disabled and selected so that it only behaves like a placeholder for the selection.

I then adjusted the colors of the remaining elements such as the textarea or the button to match the images.
And when submitting the form, you receive feedback via an alert that the information has been successfully submitted.

All images were generated with AI. And unfortunately the end product is a bit too high in my opinion, which could be adjusted with better fitting images or adjustments to the HTML itself, for example.