Benutzer:Nöth: Unterschied zwischen den Versionen

Aus Stadtsprachen
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
{{DISPLAYTITLE:<span id="1" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
{{DISPLAYTITLE:<span id="1" style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}</span>}}
<html>
<html>
  <style>
<style>
     .firstHeading {
     .firstHeading {
      display: none;
        display: none;
     }
     }


     /* Custom CSS to match Tailwind styles */
     /* Custom CSS to match Tailwind styles */
     .mix-blend-multiply {
     .mix-blend-multiply {
      mix-blend-mode: multiply;
        mix-blend-mode: multiply;
        transition: opacity 0.3s ease; /* Add transition for overlay opacity */
     }
     }


     .hero-section {
     .hero-section {
      position: relative;
        position: relative;
      display: flex;
        display: flex;
      align-items: center;
        align-items: center;
      justify-content: center;
        justify-content: center;
      overflow: hidden;
        overflow: hidden;
      border-radius: 0.5rem;
        border-radius: 0.5rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      height: calc(100vh - 100px);
        height: calc(100vh - 100px);
      width: 100%;
        width: 100%;
        transition: transform 0.3s ease; /* Add transition for zoom effect */
     }
     }
  </style>
 
  <body>
    .hero-section:hover img {
        transform: scale(1.05); /* Zoom in on hover */
    }
 
    .hero-section:hover .mix-blend-multiply {
        opacity: 0.8; /* Increase overlay contrast on hover */
    }
 
    .hero-section img {
        transition: transform 0.3s ease; /* Smooth zoom transition */
    }
 
    .caret {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 2rem;
        color: white;
        cursor: pointer;
        animation: bounce 2s infinite;
    }
 
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0) translateX(-50%);
        }
        40% {
            transform: translateY(-10px) translateX(-50%);
        }
        60% {
            transform: translateY(-5px) translateX(-50%);
        }
    }
</style>
<body>
     <div id="hero-container" class="container-fluid container-3xl">
     <div id="hero-container" class="container-fluid container-3xl">
      <section class="hero-section bg-light">
        <section class="hero-section bg-light">
        <!-- image - start -->
            <img src="https://stadtsprachen.kallimachos.de/images/thumb/7/7d/Orte.png/1600px-Orte.png?20210422225226"
        <img src="https://stadtsprachen.kallimachos.de/images/thumb/7/7d/Orte.png/1600px-Orte.png?20210422225226"  
                loading="lazy"
            loading="lazy"  
                alt="Photo by Fakurian Design"
            alt="Photo by Fakurian Design"  
                class="position-absolute h-100 w-100"
            class="position-absolute h-100 w-100"  
                style="object-fit: cover; object-position: center; inset: 0;" />
            style="object-fit: cover; object-position: center; inset: 0;" />
            <div class="position-absolute h-100 w-100 bg-dark mix-blend-multiply" style="inset: 0; opacity: 0.6;"></div>
        <!-- image - end -->
            <div class="position-relative d-flex flex-column align-items-center p-4">
                <p class="text-center text-white font-weight-bold" style="font-size: 4rem;">Historische Stadtsprachen vor Ort</p>
                <p class="text-center text-white" style="font-size: 1.5rem;">Eine stadtsprachgeschichtliche Wissensplattform</p>
            </div>
            <div class="caret" onclick="scrollToAnchor('content-anchor')">&#x2304;</div>
            </section>
    </div>


        <!-- overlay - start -->
    <div id="content-anchor" style="padding-top: 100px;">
        <div class="position-absolute h-100 w-100 bg-dark mix-blend-multiply" style="inset: 0;"></div>
        <!-- overlay - end -->
 
        <!-- text start -->
        <div class="position-relative d-flex flex-column align-items-center p-4">
          <p class="text-center text-white font-weight-bold" style="font-size: 4rem;">Historische Stadtsprachen vor Ort</p>
          <p class="text-center text-white" style="font-size: 1.5rem;">Eine stadtsprachgeschichtliche Wissensplattform</p>
         </div>
         </div>
        <!-- text end -->
   
      </section>
    <script>
     </div>
        function scrollToAnchor(anchorId) {
  </body>
            const element = document.getElementById(anchorId);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
        }
     </script>
</body>
</html>
</html>

Version vom 27. Februar 2025, 10:12 Uhr

Photo by Fakurian Design

Historische Stadtsprachen vor Ort

Eine stadtsprachgeschichtliche Wissensplattform

⌄

Abgerufen von „https://stadtsprachen.kallimachos.de/index.php?title=Benutzer:Nöth&oldid=12721“
Diese Seite wurde zuletzt am 27. Februar 2025 um 10:12 Uhr bearbeitet.
Impressum / Datenschutz