Glassmorphism Sidebar Navigation 🎨

A modern, responsive sidebar menu built using Pure HTML and CSS. This project demonstrates advanced UI/UX styling techniques without the need for JavaScript.

🚀 Live Demo

View the Sidebar in Action

✨ Features

• Glassmorphism UI: High-end frosted glass effect using backdrop-filter and rgba transparency.
• Checkbox Hack: Functional toggle (Open/Close) logic implemented using pure CSS :checked selectors.
• Fully Responsive: Smooth transitions and optimized layout for various screen sizes.
• Interactive Hover Effects: Scalable icons and subtle box-shadow animations.
• FontAwesome Integration: Clean and recognizable iconography.

🛠️ Tech Stack

• HTML5: Semantic structure.
• CSS3: Custom properties, Flexbox, and Transitions.
• Google Fonts: 'Poppins' for a clean, modern look.
• FontAwesome: For vector icons.

📸 Preview

💡 What I Learned

Through this project, I deepened my understanding of:

1. CSS Positioning: Managing fixed and absolute elements for overlays.
2. Pseudo-classes: Using the :checked state to manipulate sibling elements (~ selector).
3. Glassmorphism Design: Balancing transparency, blur, and borders for a modern aesthetic.

🏗️ How to Run

1. Clone the repository:

   git clone https://github.com/techxkirti/Glassmorphism-Sidebar.git

2. Open index.html in your favorite browser.