Initial commit of website project

2026-06-08 11:01:08 +00:00
commit 7efa005892
11 changed files with 784 additions and 0 deletions
--- a/2026.pdf
+++ b/2026.pdf
--- a/FredokaOne-Regular.woff2
+++ b/FredokaOne-Regular.woff2
--- a/Farbe.png
+++ b/Farbe.png
--- a/README.md
+++ b/README.md
@@ -0,0 +1,44 @@
+# Sporthunde Nordeifel e.V. - Visitenkarte
+
+Dies ist die statische Web-Visitenkarte für den Sporthunde Nordeifel e.V.
+
+## Inhalt
+- `index.html`: Hauptseite (Struktur)
+- `styles.css`: Stylesheet (Design)
+- `script.js`: JavaScript (Interaktivität)
+- Assets wie Bilder, Dokumente und Schriften.
+
+## Changelog
+- **2026-06-08**: Initiales Einchecken ins Git-Repository (ohne Gitea Build-Pipeline).
+
+## Deployment (Produktivserver mit Docker)
+
+Um die Seite auf einem Produktivserver zu hosten, benötigst du Docker und idealerweise Docker Compose. Du kannst einen einfachen Nginx-Container verwenden, um die statischen Dateien auszuliefern.
+
+1. **Repository klonen:**
+   ```bash
+   git clone https://git.klenzel.net/admin/sporthunde_nordeifel.git
+   cd sporthunde_nordeifel
+   ```
+
+2. **docker-compose.yml anlegen (falls nicht vorhanden):**
+   Erstelle eine Datei `docker-compose.yml` im Projektverzeichnis mit folgendem Inhalt:
+   ```yaml
+   services:
+     web:
+       image: nginx:alpine
+       ports:
+         - "8080:80"
+       volumes:
+         - .:/usr/share/nginx/html:ro
+       restart: always
+   ```
+
+3. **Container starten:**
+   Führe den folgenden Befehl im Projektverzeichnis aus:
+   ```bash
+   docker compose up -d
+   ```
+
+Die Webseite ist nun unter `http://<IP-DEINES-SERVERS>:8080` erreichbar.
+(Du kannst den Port in der `docker-compose.yml` entsprechend auf 80 oder hinter einen Reverse-Proxy wie Traefik / Nginx Proxy Manager anpassen).
--- a/Website.docx
+++ b/Website.docx
--- a/backup_dark_neon/index.html
+++ b/backup_dark_neon/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Sporthunde Nordeifel e.V. - Die Elite der Sporthunde in der Nordeifel.">
+    <title>Sporthunde Nordeifel e.V.</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="background-effects">
+        <div class="blob green"></div>
+        <div class="blob blue"></div>
+    </div>
+    
+    <main class="container">
+        <header class="glass-card hero fade-in">
+            <div class="logo-container">
+                <img src="Logo%20Farbe.png" alt="Sporthunde Nordeifel e.V. Logo" class="logo">
+            </div>
+            <h1>Sporthunde Nordeifel <span class="ev">e.V.</span></h1>
+            <p class="subtitle">Adrenalin. Präzision. Teamwork.</p>
+        </header>
+
+        <section class="glass-card info-section fade-in">
+            <h2>Über uns</h2>
+            <p>Wir sind mehr als nur ein Verein. Wir sind die Elite der Sporthunde in der Nordeifel. Trainiere mit den Besten, pushe deine Grenzen und erreiche gemeinsam mit deinem Hund das Unmögliche.</p>
+        </section>
+
+        <section class="glass-card contact-section fade-in">
+            <h2>Kontakt</h2>
+            <div class="contact-grid">
+                <a href="mailto:info@sporthunde-nordeifel.de" class="cyber-button">
+                    <span class="icon">✉</span> info@sporthunde-nordeifel.de
+                </a>
+                <a href="tel:+49123456789" class="cyber-button">
+                    <span class="icon">☏</span> +49 123 456 789
+                </a>
+            </div>
+        </section>
+
+        <footer class="glass-card footer fade-in">
+            <h2>Impressum</h2>
+            <p><strong>Sporthunde Nordeifel e.V.</strong><br>
+            Musterstraße 1<br>
+            12345 Musterstadt</p>
+            <br>
+            <p>Vertreten durch den Vorstand: Max Mustermann</p>
+            <p>Vereinsregister: VR 12345 (Amtsgericht Musterstadt)</p>
+        </footer>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/backup_dark_neon/script.js
+++ b/backup_dark_neon/script.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Intersection Observer for fade-in animations
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, { threshold: 0.15 });
+
+    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+
+    // Logo 3D effect on mousemove
+    const logo = document.querySelector('.logo');
+    const hero = document.querySelector('.hero');
+
+    if(window.matchMedia("(pointer: fine)").matches) {
+        hero.addEventListener('mousemove', (e) => {
+            const rect = hero.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            
+            // Calculate rotation (inverted for natural feel)
+            const rotateX = ((y - centerY) / centerY) * -15;
+            const rotateY = ((x - centerX) / centerX) * 15;
+            
+            logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+
+        hero.addEventListener('mouseleave', () => {
+            logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
+        });
+    }
+});
--- a/backup_dark_neon/styles.css
+++ b/backup_dark_neon/styles.css
@@ -0,0 +1,281 @@
+:root {
+    --bg-color: #050505;
+    --card-bg: rgba(20, 20, 20, 0.4);
+    --text-primary: #ffffff;
+    --text-secondary: #a0a0a0;
+    --accent-green: #5eb344;
+    --neon-green: #39ff14;
+    --accent-blue: #90cff3;
+    --neon-blue: #00f3ff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Outfit', sans-serif;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+    line-height: 1.6;
+}
+
+/* Background Effects */
+.background-effects {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.blob {
+    position: absolute;
+    filter: blur(120px);
+    border-radius: 50%;
+    animation: float 25s infinite alternate cubic-bezier(0.5, 0, 0.5, 1);
+    opacity: 0.3;
+}
+
+.blob.green {
+    width: 50vw;
+    height: 50vw;
+    background: var(--accent-green);
+    top: -20%;
+    left: -20%;
+}
+
+.blob.blue {
+    width: 60vw;
+    height: 60vw;
+    background: var(--accent-blue);
+    bottom: -30%;
+    right: -20%;
+    animation-delay: -12s;
+}
+
+@keyframes float {
+    0% { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(15vw, 15vh) scale(1.3); }
+}
+
+/* Layout */
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 4rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+}
+
+/* Glassmorphism */
+.glass-card {
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 24px;
+    padding: 3rem;
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
+    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.4s ease, box-shadow 0.4s ease;
+}
+
+.glass-card:hover {
+    transform: translateY(-8px);
+    border-color: rgba(94, 179, 68, 0.4);
+    box-shadow: 0 20px 40px rgba(94, 179, 68, 0.15);
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, transparent, var(--neon-green), var(--neon-blue), transparent);
+    z-index: 1;
+}
+
+.logo-container {
+    perspective: 1000px;
+    margin-bottom: 2.5rem;
+}
+
+.logo {
+    width: 220px;
+    filter: drop-shadow(0 0 25px rgba(94, 179, 68, 0.5));
+    animation: pulseLogo 4s infinite ease-in-out;
+    transform-style: preserve-3d;
+    transition: transform 0.2s ease-out;
+}
+
+@keyframes pulseLogo {
+    0%, 100% { filter: drop-shadow(0 0 20px rgba(94, 179, 68, 0.5)); }
+    50% { filter: drop-shadow(0 0 40px rgba(0, 243, 255, 0.7)); }
+}
+
+h1 {
+    font-size: clamp(2rem, 5vw, 4rem);
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: -1px;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(to right, #fff, #ddd);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+h1 .ev {
+    font-size: clamp(1rem, 2.5vw, 2rem);
+    color: var(--accent-green);
+    -webkit-text-fill-color: var(--neon-green);
+    vertical-align: super;
+    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
+}
+
+.subtitle {
+    font-size: clamp(1rem, 2vw, 1.4rem);
+    color: var(--accent-blue);
+    font-weight: 300;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    text-shadow: 0 0 8px rgba(144, 207, 243, 0.4);
+}
+
+/* Typography & Content */
+h2 {
+    font-size: 1.8rem;
+    color: #fff;
+    margin-bottom: 1.5rem;
+    display: inline-block;
+    position: relative;
+    font-weight: 500;
+}
+
+h2::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    width: 30%;
+    height: 3px;
+    background: var(--neon-green);
+    border-radius: 2px;
+    box-shadow: 0 0 12px var(--neon-green);
+    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.glass-card:hover h2::after {
+    width: 100%;
+}
+
+p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    font-weight: 300;
+}
+
+/* Buttons */
+.contact-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+@media(min-width: 600px) {
+    .contact-grid {
+        flex-direction: row;
+    }
+}
+
+.cyber-button {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1.2rem 2rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    color: #fff;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1.2rem;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.cyber-button::before {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%;
+    width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+    transition: left 0.6s ease;
+}
+
+.cyber-button:hover {
+    background: rgba(94, 179, 68, 0.1);
+    border-color: var(--neon-green);
+    box-shadow: 0 0 25px rgba(94, 179, 68, 0.3), inset 0 0 15px rgba(94, 179, 68, 0.1);
+    transform: translateY(-4px);
+}
+
+.cyber-button:hover::before {
+    left: 100%;
+}
+
+.icon {
+    font-size: 1.8rem;
+    color: var(--neon-blue);
+    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 2rem;
+}
+
+.footer p {
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+}
+
+.footer h2::after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.footer:hover h2::after {
+    width: 50%; 
+}
+
+/* Animations */
+.fade-in {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Sporthunde Nordeifel e.V. - Die Elite der Sporthunde in der Nordeifel.">
+    <title>Sporthunde Nordeifel e.V.</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="background-effects">
+        <div class="blob green"></div>
+        <div class="blob blue"></div>
+    </div>
+    
+    <main class="container">
+        <header class="glass-card hero fade-in">
+            <div class="logo-container">
+                <img src="Logo%20Farbe.png" alt="Sporthunde Nordeifel e.V. Logo" class="logo">
+            </div>
+            <h1>Sporthunde Nordeifel <span class="ev">e.V.</span></h1>
+            <p class="subtitle">Wir bewegen die Nordeifel</p>
+        </header>
+
+        <section class="glass-card info-section fade-in">
+            <h2>Über uns</h2>
+            <p>Wir sind ein junger und dynamischer Verein aus begeisterten Hundesportlern, die gemeinsam trainieren und den Austausch unter Gleichgesinnten schätzen. Unser Herz schlägt für den Zughundesport!</p>
+        </section>
+
+        <section class="glass-card contact-section fade-in">
+            <h2>Kontakt</h2>
+            <div class="contact-grid">
+                <a href="mailto:info@sporthunde-nordeifel.de" class="cyber-button">
+                    <span class="icon">✉</span> info@sporthunde-nordeifel.de
+                </a>
+                <a href="tel:+49123456789" class="cyber-button">
+                    <span class="icon">☏</span> +49 123 456 789
+                </a>
+            </div>
+        </section>
+
+        <footer class="glass-card footer fade-in">
+            <h2>Impressum</h2>
+            <p><strong>Sporthunde Nordeifel e.V.</strong><br>
+            Auf dem Stucks 43<br>
+            53947 Nettersheim</p>
+            <br>
+            <p>Vertreten durch den 1. Vorsitzenden: Christoph Jockenhövel</p>
+            <p>Vereinsregister: Amtsgericht Bonn</p>
+        </footer>
+    </main>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,37 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Intersection Observer for fade-in animations
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('visible');
+            }
+        });
+    }, { threshold: 0.15 });
+
+    document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
+
+    // Logo 3D effect on mousemove
+    const logo = document.querySelector('.logo');
+    const hero = document.querySelector('.hero');
+
+    if(window.matchMedia("(pointer: fine)").matches) {
+        hero.addEventListener('mousemove', (e) => {
+            const rect = hero.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            
+            // Calculate rotation (inverted for natural feel)
+            const rotateX = ((y - centerY) / centerY) * -15;
+            const rotateY = ((x - centerX) / centerX) * 15;
+            
+            logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+        });
+
+        hero.addEventListener('mouseleave', () => {
+            logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
+        });
+    }
+});
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,274 @@
+@font-face {
+    font-family: 'Fredoka One';
+    src: url('FredokaOne-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+:root {
+    --bg-color: #f4f7f6;
+    --card-bg: rgba(255, 255, 255, 0.7);
+    --text-primary: #2d3748;
+    --text-secondary: #4a5568;
+    --accent-green: #5eb344;
+    --accent-blue: #90cff3;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Fredoka One', sans-serif;
+}
+
+body {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    min-height: 100vh;
+    overflow-x: hidden;
+    position: relative;
+    line-height: 1.6;
+}
+
+/* Background Effects */
+.background-effects {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.blob {
+    position: absolute;
+    filter: blur(100px);
+    border-radius: 50%;
+    animation: float 25s infinite alternate cubic-bezier(0.5, 0, 0.5, 1);
+    opacity: 0.4;
+}
+
+.blob.green {
+    width: 50vw;
+    height: 50vw;
+    background: var(--accent-green);
+    top: -20%;
+    left: -20%;
+}
+
+.blob.blue {
+    width: 60vw;
+    height: 60vw;
+    background: var(--accent-blue);
+    bottom: -30%;
+    right: -20%;
+    animation-delay: -12s;
+}
+
+@keyframes float {
+    0% { transform: translate(0, 0) scale(1); }
+    100% { transform: translate(10vw, 10vh) scale(1.1); }
+}
+
+/* Layout */
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 4rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+}
+
+/* Glassmorphism */
+.glass-card {
+    background: var(--card-bg);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 24px;
+    padding: 3rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
+}
+
+.glass-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(94, 179, 68, 0.3);
+    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
+}
+
+/* Hero Section */
+.hero {
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, transparent, var(--accent-green), var(--accent-blue), transparent);
+    z-index: 1;
+}
+
+.logo-container {
+    perspective: 1000px;
+    margin-bottom: 2.5rem;
+}
+
+.logo {
+    width: 220px;
+    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
+    transform-style: preserve-3d;
+    transition: transform 0.2s ease-out;
+}
+
+h1 {
+    font-size: clamp(1.2rem, 4vw, 3rem);
+    font-weight: normal;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+    white-space: nowrap;
+}
+
+h1 .ev {
+    font-size: clamp(1rem, 2.5vw, 2rem);
+    color: var(--accent-green);
+}
+
+.subtitle {
+    font-size: clamp(1rem, 2vw, 1.4rem);
+    color: var(--accent-blue);
+    font-weight: 500;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+
+/* Typography & Content */
+h2 {
+    font-size: 1.8rem;
+    color: var(--text-primary);
+    margin-bottom: 1.5rem;
+    display: inline-block;
+    position: relative;
+    font-weight: 600;
+}
+
+h2::after {
+    content: '';
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    width: 30%;
+    height: 3px;
+    background: var(--accent-green);
+    border-radius: 2px;
+    transition: width 0.4s ease;
+}
+
+.glass-card:hover h2::after {
+    width: 100%;
+}
+
+p {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+    font-weight: 400;
+}
+
+/* Buttons */
+.contact-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+@media(min-width: 600px) {
+    .contact-grid {
+        flex-direction: row;
+    }
+}
+
+.cyber-button {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1.2rem 2rem;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    border-radius: 16px;
+    color: var(--text-primary);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1.2rem;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s ease;
+}
+
+.cyber-button::before {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%;
+    width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
+    transition: left 0.6s ease;
+}
+
+.cyber-button:hover {
+    background: rgba(255, 255, 255, 0.95);
+    border-color: var(--accent-green);
+    box-shadow: 0 4px 15px rgba(94, 179, 68, 0.15);
+    transform: translateY(-2px);
+}
+
+.cyber-button:hover::before {
+    left: 100%;
+}
+
+.icon {
+    font-size: 1.8rem;
+    color: var(--accent-green);
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 2rem;
+}
+
+.footer p {
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+}
+
+.footer h2::after {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.footer:hover h2::after {
+    width: 50%; 
+}
+
+/* Animations */
+.fade-in {
+    opacity: 0;
+    transform: translateY(20px);
+    transition: opacity 0.8s ease, transform 0.8s ease;
+}
+
+.fade-in.visible {
+    opacity: 1;
+    transform: translateY(0);
+}