Gallery page content

2025-09-11 18:10:39 +03:00
parent 4cf39f48f3
commit 33cd3fd94b
5 changed files with 105 additions and 2 deletions
--- a/images/event-image.jpg
+++ b/images/event-image.jpg
--- a/images/product-image.jpg
+++ b/images/product-image.jpg
--- a/images/team-photo.webp
+++ b/images/team-photo.webp
--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -5,6 +5,63 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Галерея » Веб-програмування ПР№1</title>
    <link rel="stylesheet" href="/style.css">
+
+    <script>
+        const gallery = [
+            {
+                image: "/images/hero-image.png",
+                title: "Всім привіт!"
+            },
+            {
+                image: "/images/website-logo.png",
+                title: "Наш логотип"
+            },
+            {
+                image: "/images/about-image.png",
+                title: "Наш офіс"
+            },
+            {
+                image: "/images/team-photo.webp",
+                title: "Наша команда"
+            },
+            {
+                image: "/images/product-image.jpg",
+                title: "Наш продукт"
+            },
+            {
+                image: "/images/event-image.jpg",
+                title: "Подія компанії"
+            },
+        ];
+
+        function loadGallery() {
+            const gallerySection = document.getElementById("gallery");
+
+            gallery.forEach(el => {
+                const galleryItem = document.createElement("a");
+                galleryItem.href = el.image;
+                galleryItem.target = "_blank";
+                galleryItem.className = "gallery-item";
+
+                const img = document.createElement("img");
+                img.src = el.image;
+                img.alt = el.title;
+
+                const title = document.createElement("span");
+                title.className = "gallery-title";
+                title.textContent = el.title;
+
+                galleryItem.appendChild(img);
+                galleryItem.appendChild(title);
+
+                gallerySection.appendChild(galleryItem);
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            loadGallery();
+        });
+    </script>
 </head>
 <body>
    <!-- Navbar -->
@@ -17,5 +74,13 @@
            <a href="/pages/about.html">Про нас</a>
        </div>
    </nav>
+
+    <!-- Content -->
+    <main>
+        <h1>Галерея</h1>
+        <div id="gallery" class="gallery">
+            <!-- Generated dynamically with JS -->
+        </div>
+    </main>
 </body>
 </html>
--- a/style.css
+++ b/style.css
@@ -136,3 +136,41 @@ button:hover {
 button:active {
    transform: scale(0.98);
 }
+
+/* Gallery */
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin: 1rem auto;
+    max-width: 50rem;
+}
+
+.gallery-item {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    background-color: var(--highlight);
+    border-radius: 0.75rem;
+    overflow: hidden;
+    transition: transform 0.2s;
+}
+
+.gallery-item img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    display: block;
+}
+
+.gallery-item:hover {
+    transform: scale(1.05);
+    text-decoration: none;
+}
+
+.gallery-title {
+    padding: 0.5rem;
+    color: var(--primary);
+    font-weight: 600;
+}