Benutzer:Nöth: Unterschied zwischen den Versionen

Version vom 27. Februar 2025, 10:17 Uhr

Historische Stadtsprachen vor Ort

Eine stadtsprachgeschichtliche Wissensplattform

⌄

@@ Zeile 6: / Zeile 6: @@
      }
-    /* Custom CSS to match Tailwind styles */
      .mix-blend-multiply {
          mix-blend-mode: multiply;
-         transition: opacity 0.3s ease; /* Add transition for overlay opacity */
+         transition: opacity 0.3s ease;
      }
@@ Zeile 22: / Zeile 21: @@
          height: calc(100vh - 100px);
          width: 100%;
-         transition: transform 0.3s ease; /* Add transition for zoom effect */
+         transition: transform 0.3s ease;
      }
      .hero-section:hover img {
-         transform: scale(1.05); /* Zoom in on hover */
+         transform: scale(1.05);
      }
      .hero-section:hover .mix-blend-multiply {
-         opacity: 0.8; /* Increase overlay contrast on hover */
+         opacity: 0.8;
      }
      .hero-section img {
-         transition: transform 0.3s ease; /* Smooth zoom transition */
+         transition: transform 0.3s ease;
+        object-fit: cover;
+        object-position: center;
+        inset: 0;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+    }
+    .hero-overlay {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        inset: 0;
+        background-color: black;
+        opacity: 0.6;
+    }
+    .hero-text-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem;
+    }
+    .hero-title {
+        text-align: center;
+        color: white;
+        font-weight: bold;
+        font-size: 4rem;
+        line-height: 1;
+    }
+    .hero-subtitle {
+        text-align: center;
+        color: white;
+        font-size: 1.5rem;
+        line-height: 1;
      }
@@ Zeile 65: / Zeile 102: @@
              <img src="https://stadtsprachen.kallimachos.de/images/thumb/7/7d/Orte.png/1600px-Orte.png?20210422225226"
                   loading="lazy"
-                  alt="Photo by Fakurian Design"
+                  alt="Photo by Fakurian Design" />
-                 class="position-absolute h-100 w-100"
+             <div class="hero-overlay mix-blend-multiply"></div>
-                 style="object-fit: cover; object-position: center; inset: 0;" />
+             <div class="hero-text-container">
-             <div class="position-absolute h-100 w-100 bg-dark mix-blend-multiply" style="inset: 0; opacity: 0.9;"></div>
+                 <p class="hero-title">Historische Stadtsprachen vor Ort</p>
-             <div class="position-relative d-flex flex-column align-items-center p-4">
+                 <p class="hero-subtitle">Eine stadtsprachgeschichtliche Wissensplattform</p>
-                 <p class="text-center text-white font-weight-bold" style="font-size: 4rem; line-height: 1;">Historische Stadtsprachen vor Ort</p>
-                 <p class="text-center text-white" style="font-size: 1.5rem; line-height: 1;">Eine stadtsprachgeschichtliche Wissensplattform</p>
              </div>
              <div class="caret" onclick="scrollToAnchor('content-anchor')">&#x2304;</div>
-            </section>
+        </section>
      </div>
      <div id="content-anchor" style="padding-top: 100px;">
-        </div>
+    </div>
      <script>
          function scrollToAnchor(anchorId) {