86 lines
2.6 KiB
HTML
86 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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 -->
|
|
<nav>
|
|
<div class="nav-links">
|
|
<a href="../index.html" class="nav-logo"><img src="../images/website-logo.png" alt="Логотип компанії"></a>
|
|
<a href="./gallery.html"><u>Галерея</u></a>
|
|
<a href="./articles.html">Статті</a>
|
|
<a href="./contacts.html">Контакти</a>
|
|
<a href="./about.html">Про нас</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Content -->
|
|
<main>
|
|
<h1>Галерея</h1>
|
|
<div id="gallery" class="gallery">
|
|
<!-- Generated dynamically with JS -->
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html> |