diff --git a/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/README.md b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/README.md new file mode 100644 index 00000000..629b5e7e --- /dev/null +++ b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/README.md @@ -0,0 +1,36 @@ +# 📸 Photo Gallery with Filters + +**Contributor:** [Tanmay-Kad](https://github.com/Tanmay-Kad) + +--- + +## 🧾 Description +A **modern and responsive Filterable Photo Gallery web app** built with **HTML**, **CSS (Tailwind)**, and **JavaScript**. +This app allows users to easily filter photos by categories such as **Nature**, **City**, **Animals**, and **Architecture**, all while enjoying a clean and smooth UI experience. + +--- + +## 🚀 Features +- 🖼️ **Filterable Gallery** – View photos by specific categories or all at once. +- ⚡ **Smooth Transitions** – Animations for seamless filtering experience. +- 💻 **Responsive Design** – Works perfectly on desktops, tablets, and mobiles. +- 🌈 **Modern UI** – Styled using Tailwind CSS for a fresh, minimal look. +- 🧠 **JavaScript Logic** – Dynamic filtering without reloading the page. +- 🧱 **Image Fallback** – Automatically replaces broken image links. + +--- + +## 💡 Bonus Features +- ✨ Hover effects on gallery items. +- 🎨 Active button highlighting to indicate the selected category. +- ⚙️ Smooth fade and scale transitions for images. +- 📱 Fully mobile-friendly grid layout. + +--- + +## 🧩 Tech Stack +- **HTML5** – Structure and layout +- **Tailwind CSS** – Styling and responsive design +- **JavaScript (Vanilla)** – Filtering logic and interactivity + +--- diff --git a/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/index.html b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/index.html new file mode 100644 index 00000000..cf69b8c3 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/index.html @@ -0,0 +1,241 @@ + + + + + + Filterable Photo Gallery + + + + + + + + + + + + +
+ +

+ Photo Gallery +

+ + +
+ + + + + +
+ + + +
+ + + + + diff --git a/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/script.js b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/script.js new file mode 100644 index 00000000..9b312af2 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/script.js @@ -0,0 +1,27 @@ +// Wait until DOM is fully loaded +document.addEventListener('DOMContentLoaded', () => { + const filterButtons = document.querySelectorAll('#filter-buttons .filter-btn'); + const galleryItems = document.querySelectorAll('#gallery-grid .gallery-item'); + + filterButtons.forEach(button => { + button.addEventListener('click', () => { + const filter = button.getAttribute('data-filter'); + + // Update Active Button + filterButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + + // Filter Gallery Items + galleryItems.forEach(item => { + const category = item.getAttribute('data-category'); + if (filter === 'all' || category === filter) { + item.classList.remove('hidden'); + item.classList.add('block'); + } else { + item.classList.add('hidden'); + item.classList.remove('block'); + } + }); + }); + }); +}); diff --git a/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/style.css b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/style.css new file mode 100644 index 00000000..b73c92b4 --- /dev/null +++ b/Domains/Frontend/MiniProjects/PhotoGalaryWithFilters/style.css @@ -0,0 +1,60 @@ +/* General Filter Button Style */ +.filter-btn { + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-size: 1rem; + font-weight: 500; + color: #374151; /* gray-700 */ + background-color: #ffffff; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + cursor: pointer; +} + +/* Hover Effect */ +.filter-btn:hover { + background-color: #f9fafb; /* gray-50 */ +} + +/* Active Button */ +.filter-btn.active { + background-color: #2563eb; /* blue-600 */ + color: white; + font-weight: 600; +} + +/* Gallery Item Container */ +.gallery-item { + position: relative; + overflow: hidden; + border-radius: 0.5rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, opacity 0.3s ease; +} + +/* Image Styling */ +.gallery-item img { + width: 100%; + height: 18rem; /* around h-72 */ + object-fit: cover; + transition: transform 0.3s ease; +} + +/* Zoom on Hover */ +.gallery-item:hover img { + transform: scale(1.1); +} + +/* Caption Section */ +.caption { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 0.75rem; + background-color: rgba(0, 0, 0, 0.6); + color: white; + font-size: 1.125rem; + font-weight: 600; + text-transform: capitalize; +}