|
|
| (57 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| 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>}}
| |
| <html>
| |
| <style>
| |
| .firstHeading {
| |
| display: none;
| |
| }
| |
|
| |
|
| .mix-blend-multiply {
| |
| mix-blend-mode: multiply;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
|
| |
| .hero-section {
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| overflow: hidden;
| |
| border-radius: 0.5rem;
| |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
| |
| height: calc(100vh - 100px);
| |
| width: 100%;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .hero-section:hover img {
| |
| transform: scale(1.05);
| |
| }
| |
|
| |
| .hero-section:hover .mix-blend-multiply {
| |
| opacity: 0.8;
| |
| }
| |
|
| |
| .hero-section img {
| |
| 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: 3rem;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .hero-subtitle {
| |
| text-align: center;
| |
| color: white;
| |
| font-size: 1.3rem;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .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%);
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 375px) { /* Adjust for very small screens */
| |
| .hero-title {
| |
| font-size: 2.5rem;
| |
| }
| |
|
| |
| .hero-subtitle {
| |
| font-size: 1.1rem;
| |
| }
| |
| }
| |
|
| |
| @media (min-width: 768px) {
| |
| .hero-title {
| |
| font-size: 4rem;
| |
| }
| |
|
| |
| .hero-subtitle {
| |
| font-size: 1.5rem;
| |
| }
| |
| }
| |
| </style>
| |
| <body>
| |
| <div id="hero-container" class="container-fluid container-3xl">
| |
| <section class="hero-section bg-light">
| |
| <img src="https://stadtsprachen.kallimachos.de/images/thumb/7/7d/Orte.png/1600px-Orte.png?20210422225226"
| |
| loading="lazy"
| |
| alt="Photo by Fakurian Design" />
| |
| <div class="hero-overlay mix-blend-multiply"></div>
| |
| <div class="hero-text-container">
| |
| <p class="hero-title">Historische Stadtsprachen vor Ort</p>
| |
| <p class="hero-subtitle">Eine stadtsprachgeschichtliche Wissensplattform</p>
| |
| </div>
| |
| <div class="caret" onclick="scrollToAnchor('content-anchor')">⌄</div>
| |
| </section>
| |
| </div>
| |
|
| |
| <div id="content-anchor" style="padding-top: 100px;">
| |
| </div>
| |
|
| |
| <script>
| |
| function scrollToAnchor(anchorId) {
| |
| const element = document.getElementById(anchorId);
| |
| if (element) {
| |
| element.scrollIntoView({ behavior: 'smooth' });
| |
| }
| |
| }
| |
| </script>
| |
| </body>
| |
| </html>
| |