Glam Up My Markup: Winter Solstice

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

I created an interactive and responsive landing page about the Winter Solstice.

Demo

Have a peek at the code

View live

Journey

Step 1: Styling the navbar and footer

I used CSS grid for the overall page and CSS flexbox to lay out the links in the navigation bar. Finally, I used a media query to stack up the navigation links when displayed on smaller screens.

It was interesting learning the importance of this viewport meta tag to make the page responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Step 2: Switching between tabs

This second step involved using JavaScript to toggle the display of each section depending on which navigation link was clicked/active. This gives it the interactivity of navigating between different pages

Step 3: Making it more beautiful

For the last step, I assigned various background images to each section to make it more interesting

Attributes

• Tree Photo by Fabrice Villard on Unsplash
• Snowball Fight Image by freepik
• Winter People Image by freepik
• Virtual Reality Image by freepik
• Woman Eskimo and Dog Image by freepix
• Winter Eskimo Image by freepix

The above is the detailed content of Glam Up My Markup: Winter Solstice. For more information, please follow other related articles on the PHP Chinese website!