This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities
What I Built
I built a simple camp activities page based on the template form. I wanted to make sure that the form had some style, was mobile responsive, consistent, and creative.
Demo
I hosted the demo for my project on my website, here:
https://the-best-codes.github.io/devto/contest/camp/
Check out how it looks below (the main link will look better):
Journey
When I first saw the template form, I decided that I wanted to make sure it was centered both horizontally and vertically on the page. So I used the CSS flex display and its options to achieve my goal there.
Next, I wanted the form to have some kind of background image. I thought it would have a better camp vibe if I could find a camp related image. So I found a nice campfire image and set to work with my layout.
A few minutes later, I had something like this:
Of course, the form didn't look too awesome without some padding and border-radius effects. So I rounded the corners and increased the padding. Still, The plain white form on the background image didn't quite suit my taste.
So, I decided to make the form slightly transparent and see how that looked. It looked a lot better than before!
I felt that I could improve on this, though. I experimented with some different CSS filters and found one that I liked: backdrop-filter. With it, I could blur the background, apply grayscale effects, and more! I decided on a ten pixel blur. I chose a combination of backdrop filters to accentuate the flame behind the form.
Next, I used Tom Select to modernize the select element a bit — browsers don't let you customize it much otherwise. I also whipped up (more of GPT whipped up) some JS code to make sure the form submission was handled correctly (instead of giving a 405 error).
Now, I made a few minor adjustments (to the fonts, minor style changes, etc.) and here we have our final result:
Well, I know I've seen some pretty good submissions — some people are crazy good at CSS! I don't really expect to win, but it sure was fun!
License
This project uses Tom Select, which is licensed under the Apache License, Version 2.0.
Tom Select on GitHub
Apache License 2.0
Background Image sourced from the public domain. Photo taken by Bobby Mikul.
See image page
Font: Varela Round by Joe Prince (licensed under SIL OFL).
Google fonts
Some scripts in the project are AI generated using GPT-4 through the Codeium AI GitHub extension interface.
All CSS code was written by BestCodes.
Article written by BestCodes with no AI assistance. Happy coding!