diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..4b5b026 --- /dev/null +++ b/contact.html @@ -0,0 +1,38 @@ + + + + + + Contact Us + + + +
+

Contact Us

+
+ + + + + + + + + + +
+
+ + + + + + + diff --git a/css/contact.css b/css/contact.css new file mode 100644 index 0000000..1278d35 --- /dev/null +++ b/css/contact.css @@ -0,0 +1,36 @@ +body { + font-family: Arial, sans-serif; + background: #f8f9fa; + padding: 20px; +} + +.container { + max-width: 600px; + margin: auto; + background: white; + padding: 30px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} + +input, textarea { + width: 100%; + padding: 12px; + margin: 8px 0 20px; + border: 1px solid #ccc; + border-radius: 4px; + resize: vertical; +} + +button { + background-color: #007BFF; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +} diff --git a/css/stylesheet.css b/css/stylesheet.css index eb31cf8..fe7e998 100644 --- a/css/stylesheet.css +++ b/css/stylesheet.css @@ -125,14 +125,484 @@ vertical-align: middle; } - /*.social_icons { - float: right; - } +/* 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); + } - .photo_gallery { - - } + .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; + } + } + + #footer-placeholder { + margin-top: 3rem; + padding: 1.5rem 2rem; + background-color: #f8f9fa; + border-top: 1px solid #dee2e6; + text-align: center; + color: #6c757d; + font-size: 0.9rem; +} + + /* Page layout matching your theme */ + .page-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + + .info-box { + background: white; + border: 2px solid #333; + padding: 20px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + .info-box h2 { + font-size: 1.5rem; + font-weight: bold; + color: #333; + margin-bottom: 15px; + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; + } + + .info-box p { + font-size: 1rem; + color: #333; + line-height: 1.6; + text-align: justify; + } + + /* 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; + } - .photo_gallery:hover { + .demo-btn:hover { + background: #333; + color: white; + } - } /* \ No newline at end of file + /* 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/footer.html b/footer.html new file mode 100644 index 0000000..fe18f59 --- /dev/null +++ b/footer.html @@ -0,0 +1,37 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index c712170..fc6a792 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,8 @@ -
+
+

HTML and CSS practise for beginners

@@ -46,34 +47,529 @@

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

-
-
-

PHOTO GALLERY

-

Let’s make a photo gallery that we can scroll through!

+
+
+

How to use this page

+

This page is completely open source, and the code and files are available for ALL to download. I, Carlie, created a mini website for anyone to practise on, change, adapt, edit and style in any which way they desire, with the hopes this can be a place for those who are beginning with coding and need a place to practice their skills and learn. This page and its files can be found on GitHub, an AMAZING resource for programmers and coders to come together and collaborate on projects together, receive tips and advice and archive code. If you would like to view the original repository for this page then click.

+
+ +
+

Rules

+

When playing with this code and styling it, try to keep with the current theme, however I do understand that this will change over time. Use fonts that have been used elsewhere on the page and use text spacing colors and themes. When it comes to using HTML elements and tags, use those which are new to you, or you are trying to practice with, and the same goes with CSS. This may seem overly simple and pointless, but to those starting out can be valuable. You can view previous changes and see how people did what they did by viewing older commits. Have fun and be daring 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 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

+
+ + + + + +
+
+
-
- + -
- This footer will always be positioned at the bottom of the page. - + + +
+
+ + + +