Welcome to the HTML & CSS Mini Projects collection! This repository is a curated gallery of 40+ UI components, interactive layouts, and modern animations. It serves as a visual playground for front-end developers to explore Neumorphism, Glassmorphism, and Responsive Design using pure HTML, CSS, and minimal JavaScript.
This is a byproduct of my #100DaysOfCode journey. Each component is a building block designed to bridge the gap between basic tutorials and real-world UI/UX implementation.
| 🏠 Home Page Interface | 📂 Project Gallery |
|---|---|
 |
 |
The project is live and can be viewed here: HTML & CSS Mini Projects Website
| Technology | Purpose |
|---|---|
| HTML5 | Page structure |
| CSS3 | Styling, layouts & animations |
| JavaScript | Scroll animations and interactions |
| ScrollReveal.js | Scroll-based animations |
| Vercel | Deployment |
| Git & GitHub | Version control |
Each project includes:
📸 Image Preview | 📜 Code Link | 🔗 Live Demo
UI Components
| No. | Project | Description |
|---|---|---|
| 1 | Profile Card | Profile card UI design |
| 2 | Profile Card 2 | Another profile card variation |
| 3 | Credit Card UI Design | Interactive credit card design |
| 4 | Neumorphism Buttons | Soft UI-inspired button design |
| 5 | Neumorphism Effects on Social Media Icons | Neumorphic icons |
| 6 | Neumorphism Keyboard Design | Keyboard using neumorphism |
| 7 | Neumorphism Pagination Design | Pagination with soft UI effects |
| 8 | Popup Modal Box | Simple popup modal design |
| 9 | Search Box | Basic search box UI |
| 10 | Share Button Tooltip | Interactive share button |
Form Designs
| No. | Project | Description |
|---|---|---|
| 11 | Animated Login Form | A login form with animations |
| 12 | Glassmorphism Login Form | Login form using glassmorphism |
| 13 | Neumorphism Login Form | Neumorphic-style login form |
| 14 | Responsive Login Form | A responsive login + sign-in form |
| 15 | Registration Form | Fully functional registration form |
| 16 | Responsive Contact Us Form | Contact form with responsive design |
| 17 | Email Subscription Box | Stylish email subscription box |
| 18 | Awesome Custom Radio Buttons | Custom radio button styles |
| 19 | Custom Radio Buttons | Custom radio button style 2 |
| 20 | Custom Checkbox | ON/OFF switch designs |
Animations & Effects
| No. | Project | Description |
|---|---|---|
| 21 | 3D Flip Card | A 3D card that flips on hover |
| 22 | Gradient Text Effect | Gradient color text animation |
| 23 | Google Loader | Loader animation inspired by Google |
| 24 | Simple Loader | Basic loading animation |
| 25 | Loading Animation | Another creative loading animation |
| 26 | Image Hover Animation | Hover transition using z-index |
| 27 | Neumorphism Loading Spinner | Loading spinner with neumorphic design |
| 28 | Image Slider with Clip Animation | Sliding animation effect |
| 29 | Flipping Card | A card that flips when hovered |
| 30 | Animated Skills Bar | Skill progress bars with animations |
| 31 | Navigation Links Hover Animation | Tooltip effect on hover |
Layouts & Navigation
| No. | Project | Description |
|---|---|---|
| 32 | Animated Navigation Menu Bar | A stylish animated navbar |
| 33 | Navigation Menu Bar Animation | Various hover animations for navigation |
| 34 | Responsive Pricing Table | A well-structured pricing table |
| 35 | Responsive Card Slider | Card slider with smooth transitions |
| 36 | Responsive Full-Screen Search Bar | Full-screen search interface |
| 37 | Glassmorphism Website | Simple homepage using glassmorphism |
| 38 | Simple Website | A clean homepage layout |
| 39 | Sidebar Menu | Interactive sidebar navigation |
| 40 | Vertical Tabs | Vertical tab-based navigation |
Want to add your own mini project? Contributions are welcome!
Please read CONTRIBUTING.md for guidelines on:
- Folder structure
- Code quality
- Image naming
- Adding your project card
To use these projects locally, follow these steps:
1️⃣ Clone this repository
git clone https://github.com/TonyStark-19/HTML-CSS-Projects.git2️⃣ Open a project folder and launch the .html file in your browser.
🚀 No dependencies required! Just HTML & CSS.
Before running the projects, ensure you have the following installed:
- 🖥️ A modern web browser (Chrome, Firefox, Edge, etc.)
- 📝 VS Code (or any code editor)
- 🌐 Git (optional, for cloning the repository)
These are the resources I used to learn and build these projects:
This project is licensed under the MIT License. You are free to use, modify, and share these projects.
Feel free to explore, use, and modify these projects. If you find them helpful, consider giving this repo a ⭐! 😊