Welcome to the HTML & CSS Mini Projects Website! 🎨✨
This website showcases various mini projects I created to enhance my front-end development skills. Each project is displayed with an image preview, source code link, and live deployment link for easy access.
This is part of my continuous journey to master HTML, CSS, and UI/UX design. 🚀
This website is designed to:
✅ Showcase each project with a preview image
✅ Provide live deployment links for direct interaction
✅ Offer source code access for easy learning
✅ Feature JS animations with ScrollReveal for smooth effects
✅ Ensure full responsiveness for all projects
✅ Include a Back-to-Top button for seamless navigation
✅ Have a footer with useful resources
Built to help beginners explore and learn front-end development in an interactive way! 🌱
The project is live and can be viewed here: HTML & CSS Mini Projects Website
- 🌍 HTML5 – Structuring web pages
- 🎨 CSS3 – Styling, animations, and layouts
- ⚡ JavaScript – Scroll animations and interactions
- 📜 ScrollReveal.js – Smooth animation effects
- 🖊️ VS Code – Primary code editor
- 🐙 Git & GitHub – Version control and hosting
Each project includes:
📸 Image Preview | 📜 Code Link | 🔗 Live Demo
UI Components
- Profile Card – Profile card UI design.
- Profile Card 2 – Another profile card variation.
- Credit Card UI Design – Interactive credit card design.
- Neumorphism Buttons – Soft UI-inspired button design.
- Neumorphism Effects on Social Media Icons – Neumorphic icons.
- Neumorphism Keyboard Design – Keyboard using neumorphism.
- Neumorphism Pagination Design – Pagination with soft UI effects.
- Popup Modal Box – Simple popup modal design.
- Search Box – Basic search box UI.
- Share Button Tooltip – Interactive share button.
Form Designs
- Animated Login Form – A login form with animations.
- Glassmorphism Login Form – Login form using glassmorphism.
- Neumorphism Login Form – Neumorphic-style login form.
- Responsive Login Form – A responsive login + sign-in form.
- Registration Form – Fully functional registration form.
- Responsive Contact Us Form – Contact form with responsive design.
- Email Subscription Box – Stylish email subscription box.
- Awesome Custom Radio Buttons – Custom radio button styles.
- Custom Radio Buttons – Custom radio button style 2.
- Custom Checkbox – ON/OFF switch designs.
Animations & Effects
- 3D Flip Card – A 3D card that flips on hover.
- Gradient Text Effect – Gradient color text animation.
- Google Loader – Loader animation inspired by Google.
- Simple Loader – Basic loading animation.
- Loading Animation – Another creative loading animation.
- Image Hover Animation – Hover transition using z-index.
- Neumorphism Loading Spinner – Loading spinner with neumorphic design.
- Image Slider with Clip Animation – Sliding animation effect.
- Flipping Card – A card that flips when hovered.
- Animated Skills Bar – Skill progress bars with animations.
- Navigation Links Hover Animation – Tooltip effect on hover.
Layouts & Navigation
- Animated Navigation Menu Bar – A stylish animated navbar.
- Navigation Menu Bar Animation – Various hover animations for navigation.
- Responsive Pricing Table – A well-structured pricing table.
- Responsive Card Slider – Card slider with smooth transitions.
- Responsive Full-Screen Search Bar – Full-screen search interface.
- Glassmorphism Website – Simple homepage using glassmorphism.
- Simple Website – A clean homepage layout.
- Sidebar Menu – Interactive sidebar navigation.
- Vertical Tabs – Vertical tab-based navigation.
This repository was created as part of my #100DaysOfCode challenge to improve my front-end skills. Each project reflects the skills I’m building along the way.
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:
To use these projects locally, follow these steps:
1️⃣ Clone this repository
git clone https://github.com/your-username/html-css-mini-projects.git2️⃣ Open a project folder and launch the .html file in your browser.
🚀 No dependencies required! Just HTML & CSS.
Feel free to explore, use, and modify these projects. If you find them helpful, consider giving this repo a ⭐! 😊