Added a Responsive Header Component for CodeClip Landing Page

[Mastercoder0406]

🔥 Feature: Responsive Header Component for CodeClip Landing Page
✅ Summary
This pull request adds a fully responsive and accessible header component for the CodeClip landing page. It includes the CodeClip logo, a clean navigation menu, and a mobile hamburger menu for smaller devices.

📦 What's Included
✅ Responsive design using Flexbox for layout

✅ Logo branding styled and placed to the left

✅ Navigation links (Home, Challenges, Editor, Profile) with smooth hover underline animation

✅ Mobile hamburger menu with toggle functionality via JavaScript

✅ Designed to work seamlessly on desktop, tablet, and mobile

🧪 How to Test
Open index.html in a browser.

Resize the window to see the header adapt across screen sizes.

On small screens, the hamburger icon appears. Clicking it toggles the mobile menu.

All navigation links are functional and visually styled.

📁 Files Modified / Added
index.html – Added semantic structure for header and mobile nav

style.css – Added responsive styles using Flexbox and media queries

script.js – JavaScript to handle hamburger menu toggle

🧠 Notes
Followed the project's style guide and used clean, readable HTML/CSS.

Used semantic tags (

, , ) for better accessibility and SEO.

Light, beginner-friendly implementation focused on clarity and maintainability.

Recording.2025-07-22.231023.mp4

[github-actions]

🚀 PR Preview: https://opensource-society.github.io/CodeClip/pr-preview/pr-70/index.html

[Mastercoder0406]

Hi maintainers 👋

This PR includes changes to the static index.html, style.css, and script.js files only — no build or bundler is involved.

The deploy-preview failed because it’s trying to copy from a dist/ folder, which doesn't exist in this PR.

You can still test the changes locally by opening index.html in the browser.

Thanks for reviewing! 🙂