From 54721afebb47036e1a3fd0e18e9ed2aee07d9e60 Mon Sep 17 00:00:00 2001 From: Zakir176 Date: Wed, 16 Jul 2025 02:37:14 +0200 Subject: [PATCH 1/2] Add responsive contact form page --- contact.html | 26 ++++++++++++++++++++++++++ css/contact.css | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 contact.html create mode 100644 css/contact.css diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..a2533a6 --- /dev/null +++ b/contact.html @@ -0,0 +1,26 @@ + + + + + + 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; +} From 8086f41bee3375ffa2b87422119f577d98631dfe Mon Sep 17 00:00:00 2001 From: Zakir176 Date: Wed, 16 Jul 2025 02:57:26 +0200 Subject: [PATCH 2/2] photo gallery --- contact.html | 12 + css/stylesheet.css | 486 +++++++++++++++++++++++++++++++++++++++- footer.html | 37 +++ index.html | 548 ++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 1049 insertions(+), 34 deletions(-) create mode 100644 footer.html diff --git a/contact.html b/contact.html index a2533a6..4b5b026 100644 --- a/contact.html +++ b/contact.html @@ -22,5 +22,17 @@

Contact Us

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

-
-