Intro Section DropDown

A Modern introduction web page with top navigation dropdown options

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.

Screenshot

Links

• Solution URL: https://github.com/LiyanNguyen/intro-section-dropdown
• Live Site URL: https://liyannguyen.github.io/intro-section-dropdown

My Process

• Design the Desktop Viewport first, then the Mobile viewport
• Design the flex/grid system, making sure to have both Desktop and Mobile Viewport layout correct
• Add in all the other HTML content
• Create the dropdown options using absolute positioning
• Add in hover effects to rotate the arrow and show the dropdown options
• Add in the JS script to open and close sidebar on mobile viewport, as well as the dropdown options

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid
• Desktop-first workflow

What I Learned

• More Flexbox
• More Background Images
• More Animations
• Use %widht, %height and vh,vw on big components and use rem units on smaller components
• Trick with hover state - incease the height of element so it stays hovered over (see CSS file)

Author

• Website - Liyan Anajao
• Frontend Mentor - @LiyanNguyen
• Twitter - @LiyanAnajao

Acknowledgments