The latest articles on DEV Community by Dheeraj Bansal (@dheeraj_bansal). https://dev.to/dheeraj_bansal 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%2F2615475%2F34a4b318-5724-4cf0-b400-73130faa1658.jpg https://dev.to/dheeraj_bansal en Dheeraj Bansal Sun, 29 Dec 2024 09:31:39 +0000 https://dev.to/dheeraj_bansal/celebrating-the-winter-solstice-an-interactive-web-experience-12i7 https://dev.to/dheeraj_bansal/celebrating-the-winter-solstice-an-interactive-web-experience-12i7 <p><em>This is a submission for <a href="https://github.com/Dheraj457/winter_website.git" rel="noopener noreferrer">Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice</a></em></p> <h2> What I Built </h2> <p>I built an interactive landing page celebrating the Winter Solstice, blending festive animations, seasonal traditions, and engaging content. The goal was to create an immersive experience that educates visitors about the solstice while highlighting global celebrations through captivating visuals, snowfall effects, and audio. </p> <h2> Demo </h2> <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%2Fq2w6upwmkso8z8af442n.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%2Fq2w6upwmkso8z8af442n.PNG" alt="A festive winter scene with a snow-covered landscape, decorated trees, and twinkling lights creating a warm and cozy atmosphere for the winter solstice celebration." width="800" height="379"></a><br> <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%2Fyvx30wsbqbnsohsc3oht.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%2Fyvx30wsbqbnsohsc3oht.PNG" alt="A festive image of a holiday table set for a winter solstice celebration, complete with candles, greenery, and warm lighting, creating a cozy atmosphere for the gathering." width="800" height="304"></a></p> <p>Public link for the website - <a href="https://github.com/Dheraj457/winter_website.git" rel="noopener noreferrer">https://github.com/Dheraj457/winter_website.git</a></p> <h2> Journey </h2> <ul> <li><p>Process: Created an interactive Winter Solstice landing page with CSS animations, JavaScript interactivity, and media integration.</p></li> <li><p>Learned: How to add engaging animations, dynamic content, and integrate ambient music and effects.</p></li> <li><p>Proud of: The seamless integration of snowfall effects, ambient music, and interactive features that enhance user experience during the solstice celebration.</p></li> <li><p>Next Steps: Plan to add real-time data, personalized features, and improve accessibility.</p></li> </ul> <h2> License </h2> <p>This project is licensed under the MIT License - see the <a href="//./License.txt">LICENSE</a> file for details.<br> In case the link is not working, here is the image of the License -</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%2Fevs2gtb7yhrj3tkpf5ik.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%2Fevs2gtb7yhrj3tkpf5ik.PNG" alt="LICENSE" width="659" height="312"></a></p> devchallenge frontendchallenge css javascript