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.

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

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

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

• Semantic HTML5 markup
• Flexbox
• CSS Grid

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%; }

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

• 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

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

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