The latest articles on DEV Community by Danish (@danish0111). https://dev.to/danish0111 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%2F2602141%2F47b9890d-b28e-4460-a609-d374a92dcb1d.jpeg https://dev.to/danish0111 en Danish Mon, 30 Dec 2024 08:04:33 +0000 https://dev.to/danish0111/css-art-december-151l https://dev.to/danish0111/css-art-december-151l <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-12-04">Frontend Challenge - December Edition, CSS Art: December</a>.</em></p> <h2> Inspiration </h2> <p>For this challenge, I was inspired by the winter season, particularly the image of a snowman surrounded by gently falling snowflakes. December evokes the spirit of the holidays and cozy winter vibes. I wanted to create an interactive snowman with a playful touch—snowflakes floating in the background to add to the ambiance.</p> <h2> Demo </h2> <p>demo:<br> <a href="https://css-art-git-main-danish0111s-projects.vercel.app/" rel="noopener noreferrer">https://css-art-git-main-danish0111s-projects.vercel.app/</a><br> Code:<br> <a href="https://github.com/Danish0111/CSS-Art" rel="noopener noreferrer">https://github.com/Danish0111/CSS-Art</a></p> <h2> Journey </h2> <p>This project was a fun way to capture the essence of winter with a snowman and animated rocks. I created the snowman using CSS and added hover effects to make the rocks move around when the user interacts with it. I used basic CSS properties like position, transform, and transition to bring the elements to life. The biggest challenge was getting the hover effects to work smoothly, but once I figured out the timing, it became a rewarding experience. I’m proud of how the snowman and rocks come together to create a playful, interactive scene.</p> frontendchallenge devchallenge css Danish Sun, 29 Dec 2024 16:58:46 +0000 https://dev.to/danish0111/frontend-challenge-winter-solstice-23ck https://dev.to/danish0111/frontend-challenge-winter-solstice-23ck <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-12-04">Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice</a></em></p> <h2> What I Built </h2> <p>I made this website using HTML, CSS and JavaScript.<br> I made this website in dark night theme with a snowfall effect in the main header.<br> I also added glow effects in the text and a animated border color effect to the introduction.<br> Also the website is responsive.</p> <h2> Demo </h2> <p>live demo of website:<br> <a href="https://winter-solstice-idw3295pb-danish0111s-projects.vercel.app/" rel="noopener noreferrer">https://winter-solstice-idw3295pb-danish0111s-projects.vercel.app/</a><br> GitHub Repository of the website:<br> <a href="https://github.com/Danish0111/Winter-Solstice" rel="noopener noreferrer">https://github.com/Danish0111/Winter-Solstice</a></p> <h2> Journey </h2> <p>Creating this website has been an incredible journey of learning and creativity. From designing responsive layouts to adding interactive elements like snowflakes and moving clouds, every step brought its own challenges and rewards. Each problem I encountered pushed me to grow as a developer and explore new solutions. Seeing the final result come to life has been a truly satisfying experience.</p> devchallenge frontendchallenge css javascript