My solution to the Glam My Markup challenge

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

What I Built

I styled the markup provide and tried to make it a functional form. I used Google's material design principles and the material theme builder to generate a color scheme out of this image of a camp in a forest. As mentioned in the challenge, I didn't edit the HTML directly but added some boiler plate code such as wrapping it in a body and html, and adding a favicon. The webpage is responsive and has light and dark themes which automatically adapt to the system. At this moment, I didn't add the option to manually change the theme, but I might add it later.

Demo

Click here to go directly to the live demo.

Journey

• I copied the markup into a proper html file.
• Gathered fonts, colors and got down a general idea of the project.
• Used CSS with variables to make the project responsive.
• Used JS to provide minimal interaction. Submitting the form shows an alert.