footer added
This commit is contained in:
@@ -5,7 +5,7 @@
|
||||
<!-- === Basisbild (Platzhalter oder Hauptmotiv) ===
|
||||
<div class="image-wrapper">
|
||||
<picture>
|
||||
<!-- AVIF
|
||||
<!-- AVIF -->
|
||||
<source
|
||||
type="image/avif"
|
||||
srcset="
|
||||
@@ -19,7 +19,7 @@
|
||||
/2025/assets/images/3840/avif/Basisbild.avif 3840w"
|
||||
sizes="100vw">
|
||||
|
||||
<!-- WebP
|
||||
<!-- WebP -->
|
||||
<source
|
||||
type="image/webp"
|
||||
srcset="
|
||||
@@ -33,7 +33,7 @@
|
||||
/2025/assets/images/3840/webp/Basisbild.webp 3840w"
|
||||
sizes="100vw">
|
||||
|
||||
<!-- JPEG-Fallback
|
||||
<!-- JPEG-Fallback -->
|
||||
<img
|
||||
src="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
|
||||
srcset="
|
||||
@@ -49,47 +49,74 @@
|
||||
alt="Bratonien Adventskalender – Tag 01"
|
||||
decoding="async">
|
||||
</picture>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
-->
|
||||
|
||||
<!-- === Daumenkino-Video === -->
|
||||
<div class="video-wrapper thumbkino">
|
||||
<video
|
||||
class="video thumbkino-video"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="auto"
|
||||
poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg"
|
||||
>
|
||||
<!-- WEBM-Varianten -->
|
||||
<source src="/2025/assets/videos/nHD/webm/01.webm" type="video/webm" media="(max-width: 640px)">
|
||||
<source src="/2025/assets/videos/FWVGA/webm/01.webm" type="video/webm" media="(max-width: 854px)">
|
||||
<source src="/2025/assets/videos/qHD/webm/01.webm" type="video/webm" media="(max-width: 960px)">
|
||||
<source src="/2025/assets/videos/HD/webm/01.webm" type="video/webm" media="(max-width: 1280px)">
|
||||
<source src="/2025/assets/videos/HDplus/webm/01.webm" type="video/webm" media="(max-width: 1600px)">
|
||||
<source src="/2025/assets/videos/FullHD/webm/01.webm" type="video/webm" media="(max-width: 1920px)">
|
||||
<source src="/2025/assets/videos/1440p/webm/01.webm" type="video/webm" media="(max-width: 2560px)">
|
||||
<source src="/2025/assets/videos/4K/webm/01.webm" type="video/webm" media="(min-width: 2561px)">
|
||||
<!-- === Textbereich über Video === -->
|
||||
<div class="text-video-grid">
|
||||
<div class="text-column">
|
||||
<p>Draußen riecht die Luft nach kaltem Holz und ersten Plätzchen.<br>
|
||||
Über den Dächern von Bratonien hängt ein dünner Dunst aus Zucker und Geheimnissen,<br>
|
||||
und im Schloss knistert das Kaminfeuer wie eine Erinnerung daran,<br>
|
||||
dass jeder Anfang ein kleines bisschen Mut braucht.</p>
|
||||
|
||||
<!-- MP4-Fallbacks -->
|
||||
<source src="/2025/assets/videos/nHD/mp4/01.mp4" type="video/mp4" media="(max-width: 640px)">
|
||||
<source src="/2025/assets/videos/FWVGA/mp4/01.mp4" type="video/mp4" media="(max-width: 854px)">
|
||||
<source src="/2025/assets/videos/qHD/mp4/01.mp4" type="video/mp4" media="(max-width: 960px)">
|
||||
<source src="/2025/assets/videos/HD/mp4/01.mp4" type="video/mp4" media="(max-width: 1280px)">
|
||||
<source src="/2025/assets/videos/HDplus/mp4/01.mp4" type="video/mp4" media="(max-width: 1600px)">
|
||||
<source src="/2025/assets/videos/FullHD/mp4/01.mp4" type="video/mp4" media="(max-width: 1920px)">
|
||||
<source src="/2025/assets/videos/1440p/mp4/01.mp4" type="video/mp4" media="(max-width: 2560px)">
|
||||
<source src="/2025/assets/videos/4K/mp4/01.mp4" type="video/mp4" media="(min-width: 2561px)">
|
||||
Dein Browser unterstützt dieses Videoformat nicht.
|
||||
</video>
|
||||
<p>Erna steht am Fenster, eine Tasse Kakao in der Hand,<br>
|
||||
und beobachtet, wie Barney im Hof versucht, die Lichterkette zu entwirren.<br>
|
||||
„Das Jahr geht nie leise zu Ende“, murmelt sie –<br>
|
||||
und er antwortet, ohne aufzusehen: „Dann fangen wir besser laut an.“</p>
|
||||
|
||||
<p>Ein Lächeln huscht über beide Gesichter.<br>
|
||||
Denn irgendwo, zwischen goldenen Schleifen und kalten Fingern,<br>
|
||||
beginnt genau jetzt das, worauf ganz Bratonien gewartet hat:<br>
|
||||
<strong>die Adventszeit.</strong></p>
|
||||
|
||||
<p class="note">
|
||||
Und wer genau hinsieht, entdeckt: das kleine Daumenkino unten im Bild verändert sich.<br>
|
||||
Mit jedem neuen Tag kommt ein Stück Geschichte hinzu – bis am Ende alles zusammenfindet.<br>
|
||||
Also lohnt es sich, wiederzukommen … jeden Tag.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="video-column">
|
||||
<!-- === Daumenkino-Video === -->
|
||||
<div class="video-wrapper thumbkino">
|
||||
<video
|
||||
class="video thumbkino-video"
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="auto"
|
||||
poster="/2025/assets/images/1366/jpeg/Basisbild.jpeg">
|
||||
|
||||
<!-- WEBM-Varianten -->
|
||||
<source src="/2025/assets/videos/nHD/webm/01.webm" type="video/webm" media="(max-width: 640px)">
|
||||
<source src="/2025/assets/videos/FWVGA/webm/01.webm" type="video/webm" media="(max-width: 854px)">
|
||||
<source src="/2025/assets/videos/qHD/webm/01.webm" type="video/webm" media="(max-width: 960px)">
|
||||
<source src="/2025/assets/videos/HD/webm/01.webm" type="video/webm" media="(max-width: 1280px)">
|
||||
<source src="/2025/assets/videos/HDplus/webm/01.webm" type="video/webm" media="(max-width: 1600px)">
|
||||
<source src="/2025/assets/videos/FullHD/webm/01.webm" type="video/webm" media="(max-width: 1920px)">
|
||||
<source src="/2025/assets/videos/1440p/webm/01.webm" type="video/webm" media="(max-width: 2560px)">
|
||||
<source src="/2025/assets/videos/4K/webm/01.webm" type="video/webm" media="(min-width: 2561px)">
|
||||
|
||||
<!-- MP4-Fallbacks -->
|
||||
<source src="/2025/assets/videos/nHD/mp4/01.mp4" type="video/mp4" media="(max-width: 640px)">
|
||||
<source src="/2025/assets/videos/FWVGA/mp4/01.mp4" type="video/mp4" media="(max-width: 854px)">
|
||||
<source src="/2025/assets/videos/qHD/mp4/01.mp4" type="video/mp4" media="(max-width: 960px)">
|
||||
<source src="/2025/assets/videos/HD/mp4/01.mp4" type="video/mp4" media="(max-width: 1280px)">
|
||||
<source src="/2025/assets/videos/HDplus/mp4/01.mp4" type="video/mp4" media="(max-width: 1600px)">
|
||||
<source src="/2025/assets/videos/FullHD/mp4/01.mp4" type="video/mp4" media="(max-width: 1920px)">
|
||||
<source src="/2025/assets/videos/1440p/mp4/01.mp4" type="video/mp4" media="(max-width: 2560px)">
|
||||
<source src="/2025/assets/videos/4K/mp4/01.mp4" type="video/mp4" media="(min-width: 2561px)">
|
||||
Dein Browser unterstützt dieses Videoformat nicht.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- === Hintergrundmusik (optional) === -->
|
||||
<!-- === Hintergrundmusik === -->
|
||||
<audio id="bgmusic" loop preload="auto">
|
||||
<source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
<source src="/2025/assets/sounds/FallingSnow.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
|
||||
</section>
|
||||
16
adventskalender/includes/footer.html
Normal file
16
adventskalender/includes/footer.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<footer class="main-footer">
|
||||
<div class="footer-inner">
|
||||
<p class="footer-brand">© 2025 Bratonien – Alle Rechte vorbehalten</p>
|
||||
<nav class="footer-links">
|
||||
<a href="https://tr.ee/5W4LYvBQeV" target="_blank" rel="noopener noreferrer">Impressum</a>
|
||||
<span class="divider">|</span>
|
||||
<a href="https://tr.ee/6pbp7diUqe" target="_blank" rel="noopener noreferrer">Datenschutzerklärung</a>
|
||||
<span class="divider">|</span>
|
||||
<a href="https://tr.ee/MmcL8Aj5wq" target="_blank" rel="noopener noreferrer">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<p class="legal-note">
|
||||
Externe Links öffnen in einem neuen Fenster. Für deren Inhalte sind die jeweiligen Betreiber verantwortlich.
|
||||
</p>
|
||||
</footer>
|
||||
@@ -66,4 +66,67 @@ main > h1 {
|
||||
width: auto;
|
||||
border: 4px solid var(--ci-gold);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* === FOOTER === */
|
||||
.main-footer {
|
||||
background-color: #104f3a; /* CI-Dunkelgrün */
|
||||
color: #f7f3e8; /* CI-Cremeweiß */
|
||||
text-align: center;
|
||||
padding: 2rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 4rem;
|
||||
border-top: 3px solid #c8aa49; /* Goldene Linie */
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #c8aa49;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #f7f3e8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-links .divider {
|
||||
color: rgba(247, 243, 232, 0.4);
|
||||
}
|
||||
|
||||
.legal-note {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: rgba(247, 243, 232, 0.7);
|
||||
}
|
||||
|
||||
/* === RESPONSIVE === */
|
||||
@media (max-width: 600px) {
|
||||
.footer-links {
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.footer-links .divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user