diff --git a/css/stylesheet.css b/css/stylesheet.css index eb31cf8..6c53744 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -135,4 +135,612 @@ .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; + } + } + + /* Star Wars Text Scroll Component */ + .starwars-scroll { + background: white; + border: 2px solid #333; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + position: relative; + overflow: hidden; + height: 400px; + background: linear-gradient(to top, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 10%, rgba(245, 245, 245, 0) 30%, rgba(245, 245, 245, 0) 70%, rgba(245, 245, 245, 0.8) 90%, rgba(245, 245, 245, 1) 100%); + } + + .starwars-scroll::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 30%; + background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 50%, rgba(245, 245, 245, 0) 100%); + z-index: 2; + pointer-events: none; + } + + .starwars-scroll::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 30%; + background: linear-gradient(to top, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 50%, rgba(245, 245, 245, 0) 100%); + z-index: 2; + pointer-events: none; + } + + .scroll-content { + position: absolute; + width: 100%; + animation: scroll-up var(--scroll-duration, 20s) linear infinite; + transform-origin: 50% 100%; + perspective: 300px; + } + + .scroll-text { + padding: 20px; + font-family: 'Times New Roman', serif; + font-size: var(--text-size, 1rem); + color: #333; + line-height: 1.6; + text-align: center; + transform: rotateX(var(--rotation, 25deg)); + transform-style: preserve-3d; + } + + .scroll-text h3 { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 2px; + } + + .scroll-text p { + margin-bottom: 15px; + text-align: justify; + text-indent: 2em; + } + + @keyframes scroll-up { + 0% { + transform: translateY(100%) scale(1); + } + 100% { + transform: translateY(-100%) scale(0.3); + } + } + + /* Control buttons */ + .scroll-controls { + position: absolute; + top: 10px; + right: 10px; + z-index: 3; + display: flex; + gap: 5px; + } + + .control-btn { + background: white; + border: 2px solid #333; + width: 30px; + height: 30px; + cursor: pointer; + font-size: 14px; + color: #333; + display: flex; + align-items: center; + justify-content: center; + } + + .control-btn:hover { + background: #333; + color: white; + } + + .scroll-content.paused { + animation-play-state: paused; + } + + /* Demo section */ + .demo-section { + grid-column: 1 / -1; + background: white; + border: 2px solid #333; + padding: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-top: 20px; + } + + .demo-section h2 { + font-size: 1.5rem; + font-weight: bold; + color: #333; + margin-bottom: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; + } + + .demo-controls { + display: flex; + gap: 10px; + margin-bottom: 20px; + flex-wrap: wrap; + justify-content: center; + } + + .demo-btn { + padding: 8px 16px; + border: 2px solid #333; + background: white; + color: #333; + cursor: pointer; + font-family: 'Times New Roman', serif; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; + } + + .demo-btn:hover { + background: #333; + color: white; + } + + /* Responsive Design */ + @media (max-width: 768px) { + .page-container { + grid-template-columns: 1fr; + } + + .starwars-scroll { + height: 300px; + } + + .scroll-text { + font-size: 0.9rem; + } + } + + /* Star Wars Text Scroll Component */ + .starwars-scroll { + background: white; + border: 2px solid #333; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + position: relative; + overflow: hidden; + height: 400px; + background: linear-gradient(to top, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 10%, rgba(245, 245, 245, 0) 30%, rgba(245, 245, 245, 0) 70%, rgba(245, 245, 245, 0.8) 90%, rgba(245, 245, 245, 1) 100%); + } + + .starwars-scroll::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 30%; + background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 50%, rgba(245, 245, 245, 0) 100%); + z-index: 2; + pointer-events: none; + } + + .starwars-scroll::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 30%; + background: linear-gradient(to top, rgba(245, 245, 245, 1) 0%, rgba(245, 245, 245, 0.8) 50%, rgba(245, 245, 245, 0) 100%); + z-index: 2; + pointer-events: none; + } + + .scroll-content { + position: absolute; + width: 100%; + animation: scroll-up var(--scroll-duration, 20s) linear infinite; + transform-origin: 50% 100%; + perspective: 300px; + } + + .scroll-text { + padding: 20px; + font-family: 'Times New Roman', serif; + font-size: var(--text-size, 1rem); + color: #333; + line-height: 1.6; + text-align: center; + transform: rotateX(var(--rotation, 25deg)); + transform-style: preserve-3d; + } + + .scroll-text h3 { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 20px; + text-transform: uppercase; + letter-spacing: 2px; + } + + .scroll-text p { + margin-bottom: 15px; + text-align: justify; + text-indent: 2em; + } + + @keyframes scroll-up { + 0% { + transform: translateY(100%) scale(1); + } + 100% { + transform: translateY(-100%) scale(0.3); + } + } + + /* Control buttons */ + .scroll-controls { + position: absolute; + top: 10px; + right: 10px; + z-index: 3; + display: flex; + gap: 5px; + } + + .control-btn { + background: white; + border: 2px solid #333; + width: 30px; + height: 30px; + cursor: pointer; + font-size: 14px; + color: #333; + display: flex; + align-items: center; + justify-content: center; + } + + .control-btn:hover { + background: #333; + color: white; + } + + .scroll-content.paused { + animation-play-state: paused; + } + + /* Demo section */ + .demo-section { + grid-column: 1 / -1; + background: white; + border: 2px solid #333; + padding: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-top: 20px; + } + + .demo-section h2 { + font-size: 1.5rem; + font-weight: bold; + color: #333; + margin-bottom: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; + } + + .demo-controls { + display: flex; + gap: 10px; + margin-bottom: 20px; + flex-wrap: wrap; + justify-content: center; + } + + .demo-btn { + padding: 8px 16px; + border: 2px solid #333; + background: white; + color: #333; + cursor: pointer; + font-family: 'Times New Roman', serif; + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 1px; + } + + .demo-btn:hover { + background: #333; + color: white; + } + + /* Responsive Design */ + @media (max-width: 768px) { + .page-container { + grid-template-columns: 1fr; + } + + .starwars-scroll { + height: 300px; + } + + .scroll-text { + font-size: 0.9rem; + } + } \ No newline at end of file diff --git a/index.html b/index.html index c712170..4a873ae 100644 --- a/index.html +++ b/index.html @@ -46,22 +46,66 @@

Rules

with your code! Learn something new every day!

-
-

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

+
+ + + + + +
+
+
+ + -