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.

- -
-

What will you learn today?

-

Why don't you try turning this
- text box into a star wars type text
- scroll, where it fades in the
- distance, using purely css? Don't think its possible?
- I have done it before and its easier than you think!
- Obviously if you feel the need to, create more text
- here to elongate the paragraph. This will affect the time
- it takes for the text to travel up the page and into the
- fade our area. -

+
+
+
+ + +
+
+
+

What will you learn today?

+

Why don't you try turning this text box into a star wars type text scroll, where it fades in the distance, using purely CSS? Don't think it's possible? I have done it before and its easier than you think!

+

Obviously if you feel the need to, create more text here to elongate the paragraph. This will affect the time it takes for the text to travel up the page and into the fade out area.

+

The magic happens through CSS transforms and animations. By using perspective and rotateX, we create the illusion of text moving away from us into the distance. The gradient overlay provides the fade effect, making text appear and disappear naturally.

+

This technique combines 3D CSS transforms with keyframe animations to create a cinematic effect that's both engaging and technically impressive. The best part? It's all done with pure CSS - no JavaScript required for the core animation!

+

You can customize the speed, text size, rotation angle, and even add interactive controls. The component is fully reusable and can be integrated into any website while maintaining the existing theme and design language.

+

Try experimenting with different text content, animation speeds, and styling options. The possibilities are endless when you understand the underlying principles of CSS 3D transforms and animations.

+
+
+
+ +
+

Reusable Star Wars Scroll Component

+
+ + + + + +
+
+
+