A collection of 37+ mini UI projects using only HTML and CSS.
Profile cards, forms, animations, menus, footers, and more!
📄 Description
A curated collection of creative, small-scale UI components built entirely with HTML and CSS. Perfect for learning layouts, animations, responsive design, and modern UI patterns.
🚀 Live Demo
🔗 Project Live Previews (Open in New Tab)
- Project‑01 (Profile Card UI)
- Project‑02 (Flipping Card UI)
- Project‑03 (Credit Card UI)
- Project‑04 (Side Bar Menu)
- Project‑05 (Login Form)
- Project‑06 (Simple Website)
- Project‑07 (Contact Us Form)
- Project‑08 (Search Bar)
- Project‑09 (Login Form 2nd)
- Project‑10 (Vertical Tab)
- Project‑11 (Portfolio)
- Project‑12 (Animated Login Form)
- Project‑13 (Footer Design)
- Project‑14 (Glass Morphism)
- Project‑15 (Animated Sidebar Menu)
- Project‑16 (3D Flip Card)
- Project‑17 (Animated Nav Bar)
- Project‑18 (Login Form 3rd)
- Project‑19 (Loading Animation)
- Project‑20 (Z-Index Transition)
- Project‑21 (Animated Skills Bar)
- Project‑22 (Responsive Contact Us Form)
- Project‑23 (Popup Modal Box)
- Project‑24 (Neumorphism Navigation Bar)
- Project‑25 (Neumorphism Side Bar)
- Project‑26 (Responsive Footer)
- Project‑27 (Flip Card Animation)
- Project‑28 (Button Hover Animation)
- Project‑29 (Text Gradient Effect)
- Project‑30 (Profile Cards Responsive)
- Project‑31 (Four Circle Animation)
- Project‑32 (Profile Card Hover)
- Project‑33 (Custom Radio Buttons)
- Project‑34 (Animated Share Button)
- Project‑35 (Subscribe Button)
- Project‑36 (Product Card with Image)
- Project‑37 (Tooltip Hover Animation)
📚 Table of Contents
✨ Features
- ✅ Clean, semantic HTML & CSS only — no frameworks
- 📱 Responsive layouts (Flexbox, Grid)
- 🧠 Reusable UI components (cards, navbars, forms, etc.)
- 🌀 Smooth hover effects, animations, tooltips
- 🔓 Open-source and beginner-friendly
🛠️ Tech Stack
- HTML5 – Semantically structured elements
- CSS3 – Styling, animations, responsiveness
- Flexbox & CSS Grid – Layout systems
- No JavaScript – Pure HTML & CSS creativity
📦 Usage
To clone and explore the project locally:
```bash
git clone https://github.com/MD-Sabbir-Hossain-Alif/HTML-CSS.git
cd HTML-CSS
Open any project folder and launch the HTML file in a browser