The latest articles on Forem by Lynjai Jimenez (@intermediadesigns). https://forem.com/intermediadesigns 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%2F1337468%2Fe3d2f332-6803-4cc9-9228-ec9d3dee1c4c.png https://forem.com/intermediadesigns en Lynjai Jimenez Sat, 07 Dec 2024 05:41:41 +0000 https://forem.com/intermediadesigns/glam-up-my-markup-winter-solstice-5hgd https://forem.com/intermediadesigns/glam-up-my-markup-winter-solstice-5hgd <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> <p>Submitted by: <a class="mentioned-user" href="https://dev.to/intermediadesigns">@intermediadesigns</a> </p> <h2> What I Built </h2> <p>For this Winter Solstice landing page project, I aimed to create an engaging, educational, and visually appealing experience that combines astronomy, cultural traditions, and interactive elements. Here's an overview of the key features and additions:</p> <p><strong>Visual Design &amp; Atmosphere:</strong></p> <ul> <li>Created a dark celestial theme using deep blues and gold accents to evoke a winter night sky</li> <li>Added falling snowflakes animation using JavaScript for ambiance</li> <li>Implemented glowing text effects on headers to create a magical feel</li> <li>Used subtle gradient backgrounds and frosted glass effects for content sections</li> </ul> <p><strong>Layout &amp; Structure:</strong></p> <ul> <li>Organized content into clear, thematic sections with smooth scroll navigation</li> <li>Created side-by-side layouts for text and images to improve readability</li> <li>Implemented responsive design that adapts gracefully to different screen sizes</li> <li>Added scroll-triggered fade-in animations for section content</li> </ul> <p><strong>Interactive Elements:</strong></p> <ul> <li>Built modal dialogs for celebration articles with expanded information</li> <li>Added hover effects on navigation items and content cards</li> <li>Implemented smooth scrolling navigation</li> <li>Created interactive celebration cards with "Click to learn more" indicators</li> </ul> <p><strong>Content Organization:</strong></p> <ul> <li>Structured the content to flow from general introduction to specific celebrations</li> <li>Integrated images throughout to illustrate concepts and traditions</li> <li>Created distinct visual styles for different types of content (hemispheres vs celebrations)</li> <li>Added a clear navigation system through the header menu</li> </ul> <p><strong>Accessibility &amp; Performance:</strong></p> <ul> <li>Ensured high contrast text for readability</li> <li>Added descriptive alt text for all images</li> <li>Maintained semantic HTML structure</li> <li>Implemented keyboard-friendly navigation</li> <li>Optimized animations for performance</li> </ul> <p><strong>The main goals were to:</strong></p> <ul> <li>Make complex astronomical concepts accessible and engaging</li> <li>Showcase cultural diversity in winter solstice celebrations</li> <li>Create an immersive, seasonal atmosphere</li> <li>Provide an intuitive and enjoyable user experience</li> <li>Balance educational content with visual appeal</li> </ul> <h2> Demo </h2> <p>Deployed Site: <a href="https://glam-up-my-markup-winter-solstice.vercel.app/" rel="noopener noreferrer">Glam Up My Markup: Winter Solstice</a></p> <p>GitHub Repo: <a href="https://github.com/IntermediaDesigns/glam-up-my-markup-winter-solstice" rel="noopener noreferrer">Glam Up My Markup: Winter Solstice Repo</a></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%2Fv78btu1aoqt5dseanlks.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%2Fv78btu1aoqt5dseanlks.png" alt="Winter Solstice" width="800" height="564"></a></p> <h2> Journey </h2> <p>I really enjoy trying out challenges and keeping myself refreshed with the basics in frontend development. Doing these challenges are fun and I encourage others to try out any challenges to help improve your skills. </p> <p>**Notes: Images used are AI generated using GitHub Copilot.</p> devchallenge frontendchallenge css javascript