Image Gallery

A responsive and interactive Image Gallery built using HTML, CSS, and JavaScript as part of the CodeAlpha Frontend Development Internship.

Features

• 🖼 Display images in a responsive grid layout
• 🎯 Filter images by category (All, Nature, City, Animals)
• 🔍 Lightbox image preview
• ⬅️ Previous & Next image navigation
• ⌨️ Keyboard support (Arrow Keys & Escape)
• 📱 Fully responsive design
• ✨ Smooth hover effects and animations
• 🎨 Modern and clean user interface

🛠 Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)

📂 Project Structure

CodeAlpha_Image_Gallery
│
├── images
│   ├── nature1.jpg
│   ├── nature2.jpg
│   ├── nature3.jpg
│   ├── city1.jpg
│   ├── city2.jpg
│   ├── city3.jpg
│   ├── animal1.jpg
│   ├── animal2.jpg
│   └── animal3.jpg
│
├── index.html
├── style.css
├── script.js
├── README.md
├── preview.png
└── demo.mp4

---

🚀 How to Run

1. Download or clone this repository.
2. Open the project folder in Visual Studio Code.
3. Install the Live Server extension (if not already installed).
4. Right-click on index.html.
5. Select Open with Live Server.

---

🎥 Demo Video

A short demonstration video of the project is included in this repository.

📚 Learning Outcomes

Through this project, I learned:

• DOM Manipulation
• JavaScript Event Handling
• Image Filtering
• Responsive Web Design
• CSS Grid Layout
• Lightbox Implementation
• Keyboard Events
• Interactive User Interface Design

---

👩‍💻 Developed By

Tooba Gul

BS Computer Science Student

Frontend Developer

🔗 LinkedIn: https://linkedin.com/in/tooba-gul-gd

💻 GitHub: https://github.com/toobagul-01

---

⭐ Acknowledgement

This project was developed as Task 1 for the CodeAlpha Frontend Development Internship.

---

⭐ If you found this project useful, consider giving it a Star on GitHub.