The latest articles on DEV Community by Sean Young (@seanyoung247). https://dev.to/seanyoung247 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%2F950734%2F01d3294d-8c0b-46d2-aa84-e532b4769652.png https://dev.to/seanyoung247 en Sean Young Sat, 30 Mar 2024 22:30:29 +0000 https://dev.to/seanyoung247/glam-up-my-markup-challenge-47p1 https://dev.to/seanyoung247/glam-up-my-markup-challenge-47p1 <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 decided I wanted to use some of the new features of CSS and see how much interactive and animated features could be built with just CSS.</p> <p>I've tried to incorporate subtle animations and hints while providing a modern, minimalist, flat interface.</p> <h2> Demo </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcd5c8vdfez446z7029et.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcd5c8vdfez446z7029et.png" alt="Image description" width="800" height="518"></a></p> <p>Hosted on github pages: <a href="https://seanyoung247.github.io/dev-glamup/">https://seanyoung247.github.io/dev-glamup/</a><br> <a href="https://github.com/seanyoung247/dev-glamup">https://github.com/seanyoung247/dev-glamup</a></p> <h2> Journey </h2> <p>I've been away from coding for a little while, so this was a relatively simple project to get back into.</p> <p>I went in with a very nebulous idea of what I wanted to achieve. Initially I wanted a single background image with overlays displayed for the activities. However, working with free stock images getting a result that was aesthetic was taking too long. So I changed it to change the entire background image. Now it's done I would prefer perhaps a single background image with iconic images for the different activities. I would also have liked to incorporate a dark/light theme.</p> <p>It was interesting exploring what can be done in CSS alone without building extra HTML. Also interesting to find the odd little holes that remain in CSS that require patching with JS.</p> <p>MIT License.</p> frontendchallenge devchallenge css javascript