* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #2e8b57 0%, #20b2aa 100%);
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 50px;
color: #ffffff;
}
header h1 {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
header p {
font-size: 1.1rem;
opacity: 0.9;
}
.filter-bar {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.filter-btn {
padding: 12px 28px;
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.filter-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.filter-btn.active {
background: #ffffff;
color: #2e8b57;
border-color: #ffffff;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.gallery-item {
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
cursor: pointer;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gallery-item:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.gallery-item.hidden {
display: none;
}
.image-wrapper {
position: relative;
padding-top: 75%;
overflow: hidden;
background: linear-gradient(135deg, #3cb371 0%, #2e8b57 100%);
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-item:hover .image-wrapper img {
transform: scale(1.1);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(46, 139, 87, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .overlay {
opacity: 1;
}
.overlay ion-icon {
font-size: 3rem;
color: #ffffff;
}
.item-info {
padding: 20px;
}
.item-info h3 {
font-size: 1.1rem;
font-weight: 500;
color: #2e8b57;
margin-bottom: 8px;
}
.item-info p {
font-size: 0.9rem;
color: #666;
margin-bottom: 12px;
}
.item-category {
display: inline-block;
padding: 5px 15px;
background: linear-gradient(135deg, #2e8b57 0%, #20b2aa 100%);
color: #ffffff;
border-radius: 15px;
font-size: 0.85rem;
font-weight: 500;
}
/* Lightbox Modal */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
max-width: 90%;
max-height: 90%;
position: relative;
animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.lightbox-content img {
max-width: 100%;
max-height: 85vh;
border-radius: 8px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
.lightbox-info {
background: rgba(46, 139, 87, 0.95);
color: #ffffff;
padding: 20px;
border-radius: 0 0 8px 8px;
text-align: center;
}
.lightbox-info h3 {
font-size: 1.3rem;
margin-bottom: 8px;
}
.close-btn {
position: absolute;
top: -50px;
right: 0;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border: none;
width: 45px;
height: 45px;
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.nav-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.prev-btn {
left: -70px;
}
.next-btn {
right: -70px;
}
@media (max-width: 768px) {
header h1 {
font-size: 1.8rem;
}
.gallery {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.filter-bar {
gap: 10px;
}
.filter-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.prev-btn {
left: 10px;
}
.next-btn {
right: 10px;
}
.close-btn {
top: 10px;
right: 10px;
}
}
const photos = [
{ id: 1, title: "Mountain Landscape", description: "Beautiful mountain peaks at sunset", category: "nature", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop" },
{ id: 2, title: "Modern Architecture", description: "Contemporary building design", category: "architecture", image: "https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=800&h=600&fit=crop" },
{ id: 3, title: "Forest Path", description: "Serene woodland trail", category: "nature", image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=600&fit=crop" },
{ id: 4, title: "City Skyline", description: "Urban architecture at night", category: "architecture", image: "https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=600&fit=crop" },
{ id: 5, title: "Portrait Photography", description: "Creative portrait shot", category: "people", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop" },
{ id: 6, title: "Ocean Waves", description: "Coastal seascape view", category: "nature", image: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=800&h=600&fit=crop" },
{ id: 7, title: "Tech Workspace", description: "Modern technology setup", category: "technology", image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&h=600&fit=crop" },
{ id: 8, title: "Bridge Structure", description: "Engineering marvel", category: "architecture", image: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=800&h=600&fit=crop" },
{ id: 9, title: "Team Meeting", description: "Collaborative workspace", category: "people", image: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop" },
{ id: 10, title: "Waterfall", description: "Cascading natural beauty", category: "nature", image: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=800&h=600&fit=crop" },
{ id: 11, title: "Laptop & Coffee", description: "Digital workspace essentials", category: "technology", image: "https://images.unsplash.com/photo-1484788984921-03950022c9ef?w=800&h=600&fit=crop" },
{ id: 12, title: "Street Photography", description: "Urban life moments", category: "people", image: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=800&h=600&fit=crop" }
];
let currentImageIndex = 0;
let filteredPhotos = [...photos];
function renderGallery(filter = 'all') {
const gallery = document.getElementById('gallery');
filteredPhotos = filter === 'all' ? [...photos] : photos.filter(photo => photo.category === filter);
gallery.innerHTML = filteredPhotos.map((photo, index) => `
<div class="gallery-item" data-category="${photo.category}" onclick="openLightbox(${index})">
<div class="image-wrapper">
<img src="${photo.image}" alt="${photo.title}">
<div class="overlay">
<ion-icon name="expand-outline"></ion-icon>
</div>
</div>
<div class="item-info">
<h3>${photo.title}</h3>
<p>${photo.description}</p>
<span class="item-category">${photo.category}</span>
</div>
</div>
`).join('');
}
function filterGallery(category) {
const filterBtns = document.querySelectorAll('.filter-btn');
filterBtns.forEach(btn => btn.classList.remove('active'));
event.target.classList.add('active');
renderGallery(category);
}
function openLightbox(index) {
currentImageIndex = index;
const photo = filteredPhotos[index];
document.getElementById('lightbox-img').src = photo.image;
document.getElementById('lightbox-title').textContent = photo.title;
document.getElementById('lightbox-description').textContent = photo.description;
document.getElementById('lightbox').classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
document.getElementById('lightbox').classList.remove('active');
document.body.style.overflow = 'auto';
}
function navigateImage(direction) {
currentImageIndex += direction;
if (currentImageIndex < 0) currentImageIndex = filteredPhotos.length - 1;
if (currentImageIndex >= filteredPhotos.length) currentImageIndex = 0;
const photo = filteredPhotos[currentImageIndex];
document.getElementById('lightbox-img').src = photo.image;
document.getElementById('lightbox-title').textContent = photo.title;
document.getElementById('lightbox-description').textContent = photo.description;
}
// Event Listeners
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => filterGallery(btn.dataset.filter));
});
document.getElementById('lightbox').addEventListener('click', (e) => {
if (e.target.id === 'lightbox') closeLightbox();
});
document.addEventListener('keydown', (e) => {
if (!document.getElementById('lightbox').classList.contains('active')) return;
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowLeft') navigateImage(-1);
if (e.key === 'ArrowRight') navigateImage(1);
});
// Initialize gallery
renderGallery();
No comments yet. Be the first!