nazar/colweb-lw1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gallery page content

Browse Source
This commit is contained in:
Nazar
2025-09-11 18:10:39 +03:00
parent 4cf39f48f3
commit 33cd3fd94b
5 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/event-image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
images/product-image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
images/team-photo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

65
pages/gallery.html
View File

@@ -5,6 +5,63 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея » Веб-програмування ПР№1</title> <title>Галерея » Веб-програмування ПР№1</title>
<link rel="stylesheet" href="/style.css"> <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> </head>
<body> <body>
<!-- Navbar --> <!-- Navbar -->
@@ -17,5 +74,13 @@
<a href="/pages/about.html">Про нас</a> <a href="/pages/about.html">Про нас</a>
</div> </div>
</nav> </nav>
<!-- Content -->
<main>
<h1>Галерея</h1>
<div id="gallery" class="gallery">
<!-- Generated dynamically with JS -->
</div>
</main>
</body> </body>
</html> </html>

42
style.css
View File

@@ -14,7 +14,7 @@ body {
background-color: var(--background); background-color: var(--background);
color: var(--primary); color: var(--primary);
margin: 0; margin: 0;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
} }
/* Common */ /* Common */
@@ -26,7 +26,7 @@ a {
} }
a:hover { a:hover {
text-decoration:underline; text-decoration: underline;
} }
/* Navbar */ /* Navbar */
@@ -136,3 +136,41 @@ button:hover {
button:active { button:active {
transform: scale(0.98); 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;
}