DEV Community

Cover image for Glam Up My Markup: Winter Solstice
Lade Oshodi
Lade Oshodi

Posted on

2 1 1 1 1

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

Winter Solstice

Have a peek at the code: Celebrating Winter Solstice

Live site: Celebrating Winter Solstice

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" />
Enter fullscreen mode Exit fullscreen mode

Responsive landing page 1

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

Responsive landing page 2

Step 3: Making it more beautiful

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

Responsive landing page 3

Attributes

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up