🎨 HTML & CSS Projects

A curated collection of web development projects showcasing modern CSS techniques and clean HTML structure

---

📋 Table of Contents

• Projects Overview
• Technologies Used
• Core Concepts
• Getting Started
• Project Structure

---

🚀 Projects Overview

🎂 Birthday Website An interactive birthday celebration website with animated GIF elements and modern styling. 📹 Demo Screen.Recording.2026-02-08.203154.mp4

✨ Key Learning Points • Flexbox Layouts - flex-direction - align-items • Visual Effects - Text shadows - Background gradients - Hover transitions • Accessibility - ARIA roles for images

---

💼 Business Card A professional digital business card with clean layout and polished styling. 📸 Preview

✨ Key Learning Points • Flexbox Mastery - justify-content - align-items centering • Image Optimization - Sizing & borders - Padding & spacing • CSS Fundamentals - Margin/padding shorthand - Utility classes - CSS inheritance - Web-safe fonts

---

🏡 Hometown Homepage A hometown showcase website integrating multiple HTML/CSS techniques. 📸 Preview

✨ Key Learning Points • Comprehensive Integration - Multiple CSS concepts - Page layout & structure • Design Principles - Color schemes - Typography choices - Content organization • Responsive Techniques - Flexible layouts - Mobile-first approach

---

🚀 Space Exploration A space-themed website featuring custom typography and advanced visual effects. 📹 Demo Screen.Recording.2026-02-08.203439.mp4

✨ Key Learning Points • Custom Typography - @font-face - Google Fonts integration • Advanced Styling - Text shadows for readability - Button styling - ID selectors • Page Structure - Semantic HTML - Terms & conditions layout - Element centering

🛠️ Technologies Used

HTML5 Semantic markup

CSS3 Styling & animations

Flexbox Responsive layouts

Google Fonts Custom typography

---

📚 Core Concepts Covered

📐 Layout & Positioning ✅ Flexbox containers ✅ Element centering ✅ Margin & padding ✅ Box model mastery ✅ Responsive design

🎨 Styling & Effects ✅ Text shadows ✅ Background gradients ✅ Hover transitions ✅ Borders & spacing ✅ Color schemes ✅ Custom fonts

⚡ Best Practices ✅ Semantic HTML ✅ ARIA attributes ✅ Accessibility ✅ Clean code ✅ Utility classes ✅ File organization

---

🚀 Getting Started

Prerequisites

# All you need is a modern web browser!
- Chrome (recommended)
- Firefox
- Safari

Installation & Usage

1️⃣ Clone the repository

git clone https://github.com/shekhawatmuskan/HTML-CSS-PROJECTS.git

2️⃣ Navigate to a project

cd HTML-CSS-PROJECTS/Birthday-website

3️⃣ Open in your browser

# Simply open the index.html or project-specific HTML file
# Or use a live server extension in your code editor

Quick Tips 💡

VS Code Users: Install the "Live Server" extension for instant hot-reload!

Learning Path: Start with Business Card → Birthday Website → Hometown Homepage → Space Exploration

---

📂 Project Structure

📦 HTML-CSS-PROJECTS
┃
┣ 📂 Birthday-website
┃ ┣ 📄 birthday-website.html
┃ ┣ 🎨 birthday-website.css
┃ ┗ 📁 images/
┃   ┣ 🎁 gift1.gif
┃   ┣ 🎁 gift2.gif
┃   ┗ 🎁 ...
┃
┣ 📂 Business-card
┃ ┣ 📄 business-card.html
┃ ┣ 🎨 business-card.css
┃ ┗ 📁 images/
┃   ┗ 🖼️ profile.jpg
┃
┣ 📂 Hometown-homepage
┃ ┗ 📁 images/
┃   ┣ 🏙️ city-view.jpg
┃   ┗ 🖼️ ...
┃
┣ 📂 Space-exploration
┃ ┣ 📄 index.html
┃ ┣ 📄 space.html
┃ ┣ 🎨 space.css
┃ ┣ 🎨 styles.css
┃ ┣ ⚙️ index.js
┃ ┗ 📁 images/
┃   ┣ 🚀 galaxy.webp
┃   ┣ 🪐 spacex.png
┃   ┗ 🌌 ...
┃
┗ 📋 README.md

---

⭐ If you found this helpful, please consider giving it a star!

Happy Coding! 💻✨