This project contains the header section of a responsive educational website named EduLearn. It is designed to support multi-language interfaces, user authentication buttons, navigation, and user tools like cart and wishlist.
👉 Click here to view the live demo
✅ Responsive layout using HTML & CSS
✅ Mobile-first design with toggled menu
✅ Dropdown navigation for Courses and Categories
✅ Language selector supporting English, Arabic, French, and Spanish
✅ Search functionality (UI only)
✅ Cart and Wishlist icons with item counters
✅ User authentication buttons: Log In and Register
| File Name | Description |
|---|---|
index.html |
Main HTML file with header and demo content |
styles.css |
Linked external CSS for layout and styling |
script.js |
Placeholder for mobile menu toggle functionality |
| Fonts & Icons | Google Fonts (Poppins), Font Awesome CDN |
- Font Family: Poppins from Google Fonts
- Icons: Font Awesome 6
- Primary Colors:
- Main Color:
#3E64FF - Text Color:
#2D2F31
- Main Color:
- Layout Tools: Flexbox for responsiveness
- Mobile Menu: Collapsible with dropdown functionality
The header is fully responsive and optimized for small screen sizes with:
- Hamburger menu for toggling navigation
- Condensed search bar
- Auth & tool icons adapted for mobile view