From d7724cb7aba14a59d8f0cb3f102d811dba888302 Mon Sep 17 00:00:00 2001
From: Zakir176
Date: Wed, 16 Jul 2025 02:20:03 +0200
Subject: [PATCH 1/2] Photo gallery with JS animations included
---
css/stylesheet.css | 272 ++++++++++++++++++++++++++++++++++++++++++++-
index.html | 271 +++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 539 insertions(+), 4 deletions(-)
diff --git a/css/stylesheet.css b/css/stylesheet.css
index eb31cf8..c0d6c94 100644
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@@ -135,4 +135,274 @@
.photo_gallery:hover {
- } /*
\ No newline at end of file
+ }
+
+ /* Gallery Container - Matches your page's bordered sections */
+ .photo-gallery {
+ max-width: 1200px;
+ margin: 0 auto;
+ background: white;
+ border: 2px solid #333;
+ border-radius: 0;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ }
+
+ .gallery-header {
+ text-align: center;
+ margin-bottom: 30px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #ddd;
+ }
+
+ .gallery-title {
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 10px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ }
+
+ .gallery-subtitle {
+ font-size: 1.1rem;
+ color: #666;
+ font-style: italic;
+ }
+
+ /* Filter Buttons - Clean, academic style */
+ .gallery-filters {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-bottom: 30px;
+ flex-wrap: wrap;
+ }
+
+ .filter-btn {
+ padding: 10px 20px;
+ border: 2px solid #333;
+ background: white;
+ color: #333;
+ cursor: pointer;
+ font-family: 'Times New Roman', serif;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ }
+
+ .filter-btn:hover {
+ background: #333;
+ color: white;
+ }
+
+ .filter-btn.active {
+ background: #333;
+ color: white;
+ }
+
+ /* Gallery Grid */
+ .gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 20px;
+ margin-bottom: 30px;
+ }
+
+ .gallery-item {
+ border: 2px solid #333;
+ background: white;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ }
+
+ .gallery-item:hover {
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+ transform: translateY(-5px);
+ }
+
+ .gallery-item img {
+ width: 100%;
+ height: 200px;
+ object-fit: cover;
+ display: block;
+ transition: transform 0.3s ease;
+ }
+
+ .gallery-item:hover img {
+ transform: scale(1.05);
+ }
+
+ .gallery-item-info {
+ padding: 15px;
+ border-top: 1px solid #ddd;
+ }
+
+ .gallery-item-title {
+ font-size: 1.2rem;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 5px;
+ }
+
+ .gallery-item-description {
+ font-size: 0.95rem;
+ color: #666;
+ line-height: 1.4;
+ }
+
+ .gallery-item-category {
+ display: inline-block;
+ background: #f0f0f0;
+ padding: 3px 8px;
+ font-size: 0.8rem;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-top: 8px;
+ border: 1px solid #ddd;
+ }
+
+ /* Modal - Clean, academic style */
+ .gallery-modal {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ z-index: 1000;
+ }
+
+ .modal-content {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ max-width: 90%;
+ max-height: 90%;
+ background: white;
+ border: 3px solid #333;
+ overflow: hidden;
+ }
+
+ .modal-image {
+ width: 100%;
+ height: auto;
+ max-height: 60vh;
+ object-fit: contain;
+ display: block;
+ }
+
+ .modal-info {
+ padding: 20px;
+ border-top: 2px solid #333;
+ }
+
+ .modal-title {
+ font-size: 1.5rem;
+ font-weight: bold;
+ color: #333;
+ margin-bottom: 10px;
+ }
+
+ .modal-description {
+ font-size: 1rem;
+ color: #666;
+ line-height: 1.6;
+ margin-bottom: 10px;
+ }
+
+ .modal-category {
+ background: #f0f0f0;
+ padding: 5px 10px;
+ display: inline-block;
+ font-size: 0.9rem;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ border: 1px solid #ddd;
+ }
+
+ .close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: white;
+ border: 2px solid #333;
+ width: 35px;
+ height: 35px;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #333;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .close-btn:hover {
+ background: #333;
+ color: white;
+ }
+
+ .nav-btn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background: white;
+ border: 2px solid #333;
+ width: 45px;
+ height: 45px;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: #333;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .nav-btn:hover {
+ background: #333;
+ color: white;
+ }
+
+ .prev-btn {
+ left: 10px;
+ }
+
+ .next-btn {
+ right: 10px;
+ }
+
+ /* Loading state */
+ .loading {
+ text-align: center;
+ padding: 40px;
+ color: #666;
+ font-style: italic;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .gallery-title {
+ font-size: 2rem;
+ }
+
+ .gallery-grid {
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 15px;
+ }
+
+ .gallery-filters {
+ gap: 8px;
+ }
+
+ .filter-btn {
+ padding: 8px 16px;
+ font-size: 0.9rem;
+ }
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index c712170..f6df1d9 100644
--- a/index.html
+++ b/index.html
@@ -59,9 +59,34 @@ What will you learn today?
fade our area.
-
-
PHOTO GALLERY
-
Let’s make a photo gallery that we can scroll through!
+
+
+
+
+
+
+
+
+
![]()
+
+
@@ -80,4 +105,244 @@
PHOTO GALLERY