ns-website/gallery.html at main · pdilipkumar/ns-website · GitHub

1
2
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0" name="viewport"/><title> Gallery | NG Aluminium Interiors </title><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&amp;display=swap" rel="stylesheet"/><style> body { font-family: 'Manrope', sans-serif; margin: 0; padding: 0; background: #f5f5f5; color: #222; } header { background: #fff; padding: 16px 28px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; } header h1 { margin: 0; font-size: 20px; } .container { max-width: 1100px; margin: auto; padding: 28px; } h2 { text-align: center; margin-bottom: 20px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; } .gallery-grid img { width: 100%; border-radius: 10px; cursor: pointer; transition: transform 0.3s; } .gallery-grid img:hover { transform: scale(1.05); } /* Lightbox */ .lightbox { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; } .lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; } .lightbox:target { display: flex; } .close { position: absolute; top: 20px; right: 30px; font-size: 36px; color: white; text-decoration: none; } img { width: 100%; height: 300px; object-fit: cover; border-radius: 10px;
} </style><link rel="icon" type="image/png" href="assets/favicon.png"><link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="assets/style.css"><link rel="stylesheet" href="assets/glightbox.min.css"><script defer src="assets/glightbox.min.js"></script><meta property="og:url" content="http://yourdomain.com/"><meta property="og:type" content="website"></head><body><header><h1> NG Aluminium Interiors - Gallery </h1></header><div class="container"><h2> Our Work Gallery </h2><div class="gallery-grid"><a href="#wardrobe1.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-white.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-blue-pooja.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-blue.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-brown.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-brown-white.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-wood-open.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-white-gold.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#kitchen-grey-aluminium.jpg"><img alt="Project" src="images/interior.jpg"/></a><a href="#wardrobe-marble-finish.jpg"><img alt="Project" src="images/interior.jpg"/></a></div><div class="lightbox" id="wardrobe1.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-white.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-blue-pooja.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-blue.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-brown.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-brown-white.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-wood-open.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-white-gold.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="kitchen-grey-aluminium.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div><div class="lightbox" id="wardrobe-marble-finish.jpg"><a class="close" href="#"> × </a><img alt="Project" src="images/interior.jpg"/></div></div></body></html>