EasyCourse: E1
Flexbox Transparent Navigation Bar (4/5)

👤 Client Story:

Our design studio needs an updated website. The previous navigation bar was cluttered and not fully responsive, so we would like a redesign from the ground up. Please be sure the final design is fully mobile responsive, and that our "Contact" button is the primary focus. We're in the process of updating the logo too, so feel free to use a substitute of your choice. Include a fancy semi-transparent background effect.

Can you build a robust navigation bar with transparency?

🚀 Summary

This project will help you practice CSS flexbox principles and requires an understanding of the box-model for padding and margin. Additionally, this easy level project includes mobile-responsive challenges and a CTA (Call to Action) with transparency effects.

📗 Recommended Pre-study

Visual Hierachy
https://www.canva.com/learn/visual-hierarchy

Javascript Class Toggle
https://www.w3schools.com/howto/howto_js_toggle_class.asp

CSS Box-model
https://css-tricks.com/the-css-box-model

CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox

📋 Project Requirements:

Goal: Build a fully functional mobile-responsive navigation bar for a minimalist website with a transparency effect.

1. HTML/CSS:

   • Maintain space between the outer edges and the internal elements.
   • Split the links with Flexbox.
     (Hint: Try justify-content:space-between; )
   • Center all items in the Y-direction (vertical axis).
   • Maintain even spacing between the links.
   • Emphasize the "Contact" link.
   • Add hamburger menu icon for mobile screens.
     (Hint: Try a media query with display:none; when necessary)
   • Hide the desktop links on mobile screens.
   • Create a mobile menu (full-screen column of links) for mobile screens.
   • Add a close ("x") icon inside the mobile menu to close it.
   • Add a partial transparency and blur effect to the background.

2. Javascript:

   • Open the mobile menu when clicking on the hamburger button.
   • Close the mobile menu when clicking on the close button.
     (Hint: Toggle a class with display:none; on the menu.)

⚠️ Challenge

Animate an opacity transition so it becomes partially transparent only after the user scrolls down. Try this with vanilla JS and/or GSAP.