From b6664cb8d12f2d7fafaf6dddb596e142ddd2a0d6 Mon Sep 17 00:00:00 2001
From: codewithdhruba01 <patidhrubaraj@gmail.com>
Date: Mon, 14 Apr 2025 11:38:35 +0530
Subject: [PATCH] Add README.md with full project overview and instructions

---
 expanding-cards/README.md | 62 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 expanding-cards/README.md

diff --git a/expanding-cards/README.md b/expanding-cards/README.md
new file mode 100644
index 0000000..c3ba157
--- /dev/null
+++ b/expanding-cards/README.md
@@ -0,0 +1,62 @@
+## Expanding Cards Project
+
+**Description:**
+
+The **Expanding Cards** project is a smooth, interactive UI feature built using **HTML**, **CSS**, and **JavaScript**. It displays a horizontal row of image panels that expand when clicked, giving a dynamic, engaging experience perfect for portfolios, landing pages, or travel websites.
+
+[🔗**Live Demo**](https://50projects50days.com/projects/expanding-cards/)
+
+---
+
+**Tech Stack:**
+
+- **HTML5** – Semantic structure of the page  
+- **CSS3** – Flexbox layout, transitions, responsive design  
+- **JavaScript** – DOM manipulation and event handling
+
+---
+
+**Features:**
+
+- Beautiful, high-quality background images
+- Smooth expand/collapse animation with CSS transitions
+- Simple and clean JavaScript logic
+- Responsive layout for mobile devices
+- Hover-free interactivity – just click to expand!
+
+---
+
+**How It Works:**
+
+1. Initially, the first card is marked as active.
+2. Each panel listens for a click event.
+3. When clicked:
+   - JavaScript removes the `active` class from all panels.
+   - Then it adds the `active` class to the clicked one.
+4. CSS handles the animation using Flexbox (`flex: 5` for active, `flex: 0.5` for inactive), with a fade-in effect on the text (`h3`).
+
+---
+
+**Responsive Design:**
+
+- On screens smaller than 480px, the layout adapts for better usability by hiding the last two panels.
+- Fluid width and height make it adaptable to various screen sizes.
+
+---
+
+**📂 File Structure:**
+
+```
+expanding-cards/
+├── index.html
+├── style.css
+└── script.js
+```
+
+**Use Cases:**
+- Landing pages  
+- Image galleries  
+- Product showcases  
+- Personal portfolios
+---
+  > 📌 Feel free to idea customize and contribute!
\ No newline at end of file