Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
• View the optimal layout for the content depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: github.com/6hislain/intro-section-with-dropdown-navigation
• Live Site URL: demo on netlify

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid

What I learned

I learnt how to make an overlay menu... I am still learning

<!-- index.html line 93 -->
<div id="myNav" class="overlay">
  <div class="overlay-container">
    <a href="javascript:void(0)" class="menu-button" onclick="closeNav()">
      <img src="./images/icon-close-menu.svg" alt="close menu" />
    </a>
    <div class="overlay-content">
      <ul class="menu">
        <!-- -->
      </ul>
      <ul class="menu left-menu">
        <!-- -->
      </ul>
    </div>
  </div>
</div>

/* css/style.css line 147 */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  right: 0;
  top: 0;
  background: hsl(0, 0%, 8%, 0.8);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 100px;
  width: 100%;
}

Continued development

I am going to try completing more coding challenges on Frontend Mentor

Useful resources

• How TO - Full screen Overlay Navigation - this article guided me on how to make an overlay menu
• W3 School - css media queries - this also helped me on media queries

Author

• Bio Link - bio.link/6hislain
• Frontend Mentor - @6hislain
• Twitter - @6hislain

Acknowledgments

Thanks to correlucas suggestions and feedback, on how to tackle Frontend Mentor challenges