Commercial Project 1

Commercial Project 1

Commercial Project 2

Commercial Project 2

Residential Project 1

Residential Project 1

Residential Project 2

Residential Project 2

/* Gallery Container */ .gallery-container { text-align: center; padding: 20px; } /* Filter Buttons */ .gallery-filters button { margin: 5px; padding: 10px 20px; background-color: #007BFF; color: white; border: none; cursor: pointer; border-radius: 5px; } .gallery-filters button:hover { background-color: #0056b3; } /* Grid Layout */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .gallery-item { position: relative; overflow: hidden; } .gallery-item img { width: 100%; height: auto; transition: transform 0.3s ease; } .gallery-item img:hover { transform: scale(1.1); } .gallery-item p { margin-top: 8px; font-size: 14px; } /* Lightbox */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1000; justify-content: center; align-items: center; } .lightbox-content { max-width: 80%; max-height: 80%; } .lightbox p { color: white; text-align: center; margin-top: 15px; } .lightbox .close { position: absolute; top: 20px; right: 30px; font-size: 30px; color: white; cursor: pointer; } // Filter Function function filterGallery(category) { const items = document.querySelectorAll('.gallery-item'); items.forEach(item => { if (category === 'all' || item.classList.contains(category)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } // Lightbox Functionality function openLightbox(imgSrc, captionText) { const lightbox = document.getElementById('lightbox'); const lightboxImg = document.getElementById('lightboxImg'); const lightboxCaption = document.getElementById('lightboxCaption'); lightbox.style.display = 'flex'; lightboxImg.src = imgSrc; lightboxCaption.textContent = captionText; } function closeLightbox() { document.getElementById('lightbox').style.display = 'none'; } // Add Click Event to Images document.querySelectorAll('.gallery-item img').forEach(img => { img.addEventListener('click', () => { openLightbox(img.src, img.alt); }); });
top of page
bottom of page