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> |