Glam Up My Markup: Camp Activities

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

What I Built

I wanted to make the form into something that looked like part of a fun website for a kid's summer camp.

Demo

Here's what I created.

You can view my code on my Github.

Journey

The idea of the challenge is not to edit the HTML code other than boilerplate code so I just wrapped it in the standard html and body tags as I knew I'd want to add a background image to the whole page. I also added a tile and a link for my stylesheet.

I started by fixing the styling of the form using the margin, display and padding attributes to move each element onto a new line and create space around them. I also moved the form to be centred on the page.

Next, I wanted to make the h1 text stand out more and look like it was carved into wood. I added a dark brown background to the text and made the font colour a light brown. I then looked for a wood effect font on dafont and found this one. I realised that this font wouldn't be available when I uploaded my code so I looked up how to add custom fonts to CSS and found the @font-face selector that allowed me to add my own font-family name and a URL to the font file.

I then decided to use AI to generate an image of a kid's summer camp to use as my background. The brown bar on the title didn't look over the background image so I removed it.

Finally, I wanted to make the form stand out more from the background image so I added a translucent white background to the form. I also rounded the corners to soften the look.