The latest articles on DEV Community by Ryan B-Shields (@ryanbshields). https://dev.to/ryanbshields https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F732371%2Fc67ccfee-310b-446e-8c61-2f59e736f91b.png https://dev.to/ryanbshields en Ryan B-Shields Fri, 22 Mar 2024 14:43:00 +0000 https://dev.to/ryanbshields/glam-up-my-markup-camp-activities-44ah https://dev.to/ryanbshields/glam-up-my-markup-camp-activities-44ah <p><em>This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities</em></p> <h2> What I Built </h2> <p>I wanted to make the form into something that looked like part of a fun website for a kid's summer camp. </p> <h2> Demo </h2> <p>Here's what I created.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwp8rz7c96s2zwod3j260.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwp8rz7c96s2zwod3j260.png" alt="Image description" width="800" height="367"></a></p> <p>You can view my code on my <a href="https://github.com/RyanB-Shields/Glam-My-Markup-Challenge" rel="noopener noreferrer">Github</a>. </p> <h2> Journey </h2> <p>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.</p> <p>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.</p> <p>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 <a href="https://www.dafont.com/wood2.font" rel="noopener noreferrer">one</a>. 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. </p> <p>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. </p> <p>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. </p> frontendchallenge devchallenge css webdev