.jpg){kind=link}
.jpg){kind=link}
.jpg){kind=link}
Campus Hub Website
Campus Hub is a modern, responsive, and interactive college website template designed to showcase a campus’s courses, faculty, events, library facilities, campus map, and FAQs. This project is built using HTML, CSS, and JavaScript, focusing on usability, clean design, and responsiveness.
📂 Features
- Responsive Navbar
Sticky header with a logo and navigation links.
Mobile-friendly menu toggle.
Smooth hover and focus effects for accessibility.
- Hero Section
Full-width hero banner with background image and overlay.
Dynamic welcome message with highlighted college name.
- About Section
Information about the college mission, facilities, and culture.
Center-aligned text with emphasis styling.
- Courses Section
Interactive course cards with flip animation.
Each card displays course name and details on click.
- Faculty Section
Display of faculty members with profile images and roles.
Images are local, so no internet connection is required.
- Events Section
Upcoming events displayed in a grid layout.
Search bar to filter events dynamically.
- Library Section
Highlights library facilities including digital resources, reading rooms, and special collections.
Library cards styled consistently with the rest of the website.
- Campus Map
Embedded Google Map showing the campus location.
Map container with description text next to it.
- FAQs Section
Frequently asked questions with toggle functionality.
Clicking on a question reveals the answer.
- Footer
Simple footer with copyright.
⚙️ Technologies Used HTML5 – Semantic and structured markup. CSS3 – Styling, grid layouts, flexbox, animations, and responsive design. JavaScript (Vanilla) – ->Mobile menu toggle ->Course card flip effect ->Event search filter ->FAQ toggle functionality
💻 How to Use
-
Clone the repository
-
Open in Browser
Navigate to the cloned folder and open index.html in your preferred browser.
Customize Faculty Images
Replace the images in the /images folder and update the src attributes in the Faculty section.
Edit Content
You can edit courses, events, library info, FAQs, or any section directly in the HTML.
Test Interactivity
Click course cards to see flip effect.
Toggle FAQ questions to view answers.
Use the event search to filter events dynamically.
Use mobile menu toggle for responsive testing.
📜 License This project is open-source and available under the MIT License.
👤 Author Prachi Joshi – Full-stack developer and UI/UX enthusiast.
GitHub: https://github.com/Prachi0629
AI technology used:-
Some portions of the project, including CSS layout suggestions, JavaScript logic for interactivity (course flips, event search, and FAQ toggle), and README documentation, were drafted with the help of AI tools (ChatGPT by OpenAI). The project’s code and design have been reviewed and modified manually to meet contest requirements.