InsightPro – Responsive Admin Dashboard

📘 Project Overview

InsightPro is a fully responsive admin dashboard interface built entirely with HTML and CSS (no JavaScript).
It was developed as a web engineering assignment to demonstrate advanced CSS techniques, including:

• Responsive grid and flex layouts
• CSS-only sidebar toggle functionality
• Dark/light theme switching using CSS variables
• KPI cards, CSS-only charts, and styled forms
• A print-optimized stylesheet for clean report output

---

⚙️ Key Features

• Toggleable sidebar navigation (using :checked/checkbox hack)
• Light and dark themes switched via CSS variables
• KPI cards showcasing metrics like Sales, Users, Revenue
• Pure-CSS data visualizations (bar charts, progress charts)
• Structured, semantic HTML5 layout with <header>, <nav>, <main>, <aside>, <footer>
• Print-friendly stylesheet (print.css) that reformats the dashboard for printing

---

🧱 Project Structure

/Assignment1_InsightPro/ │── index.html # Main dashboard layout │── css/ │ ├── styles.css # Core styling (themes, layout, components) │ └── print.css # Print optimisation stylesheet │── assets/ # Images, icons, fonts (optional) │── README.md # This documentation

---

🖥️ How to View Locally

1. Clone the repository:

   git clone https://github.com/AzeemHusain123/insightpro-responsive-admin-dashboard.git
   

2. Open index.html in your web browser.

3. Explore the dashboard: toggle the sidebar, switch themes, resize the browser to see responsive behavior, and print the page (Ctrl+P) for print layout.

🧠 Learning Outcomes

• Mastery of CSS Grid and Flexbox for complex responsive layouts
• Use of CSS variables for theming (light/dark)
• Implementation of CSS-only interactivity via pseudo-classes (:checked)
• Creation of pure CSS visualizations (charts/progress bars)
• Understanding of print stylesheets and accessibility through semantic HTML

📄 License

• This project is provided for educational purposes only.