WEBSOLUTIONHUB

A responsive and interactive navigation menu for the Web Solutions Hub website that changes color on scroll and hover. Built using HTML, CSS, and JavaScript to enhance user experience with smooth transitions and dynamic effects.

Project Overview

The Web Solutions Hub project demonstrates a responsive and interactive navigation menu that changes color when the user scrolls or hovers over menu items. The menu remains fixed at the top of the page, ensuring constant visibility, and provides smooth transitions to enhance the user experience.

Features

• Fixed Navigation Bar: Stays visible at the top of the screen while scrolling.
• Responsive Design: Adjusts seamlessly across different screen sizes and devices.
• Scroll-Based Interaction: Changes background color as the user scrolls down the page.
• Hover Effects: Changes the font color of the menu items when hovered over.
• Smooth Transitions: Ensures a sleek and modern feel with color transitions.

Technologies Used

• HTML5: For the structural layout of the webpage and navigation menu.
• CSS3: For styling, including responsive design, hover effects, and background colors.
• JavaScript: For adding interactivity, including changing the background color on scroll and hover effects.

Folder Structure

WEBSOLUTIONHUB/

│

├── index.html

├── css/

│ └── styles.css

├── js/

│ └── script.js

├── images/

│ └── svg/

│ ├── facebook.svg

│ ├── twitter.svg

│ ├── linkedin.svg

│ └── instagram.svg

└── README.md

Installation & Usage

1. Clone the repository: git clone https://github.com/mudassir-725/WEBSOLUTIONHUB.git
2. Navigate to the project directory: cd WEBSOLUTIONHUB
3. Open the index.html file in your preferred web browser.

Live Demo

You can view a live demo of the project here. [https://mudassir-725.github.io/WEBSOLUTIONHUB]

License

This project is licensed under the MIT License.