diff --git a/.gitignore b/.gitignore index 1d9b9ad..2240cdf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ *.docx *.pdf +*.jpg +*.png +impressum.txt diff --git a/README.md b/README.md index 98f881c..9cb6062 100644 --- a/README.md +++ b/README.md @@ -28,5 +28,5 @@ Um die Seite auf einem Produktivserver zu hosten, benötigst du Docker und ideal docker compose up -d ``` -Die Webseite ist nun unter `http://:8080` erreichbar. +Die Webseite ist nun unter `http://:84` erreichbar. (Du kannst den Port in der `docker-compose.yml` entsprechend auf 80 oder hinter einen Reverse-Proxy wie Traefik / Nginx Proxy Manager anpassen). diff --git a/backup_dark_neon/index.html b/backup_dark_neon/index.html deleted file mode 100644 index adbfb63..0000000 --- a/backup_dark_neon/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - Sporthunde Nordeifel e.V. - - - - -
-
-
-
- -
-
-
- -
-

Sporthunde Nordeifel e.V.

-

Adrenalin. Präzision. Teamwork.

-
- -
-

Über uns

-

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.

-
- -
-

Kontakt

-
- - ✉ info@sporthunde-nordeifel.de - - - ☏ +49 123 456 789 - -
-
- -
-

Impressum

-

Sporthunde Nordeifel e.V.
- Musterstraße 1
- 12345 Musterstadt

-
-

Vertreten durch den Vorstand: Max Mustermann

-

Vereinsregister: VR 12345 (Amtsgericht Musterstadt)

-
-
- - - - diff --git a/backup_dark_neon/script.js b/backup_dark_neon/script.js deleted file mode 100644 index cc70d31..0000000 --- a/backup_dark_neon/script.js +++ /dev/null @@ -1,37 +0,0 @@ -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)`; - }); - } -}); diff --git a/backup_dark_neon/styles.css b/backup_dark_neon/styles.css deleted file mode 100644 index 7c44d7f..0000000 --- a/backup_dark_neon/styles.css +++ /dev/null @@ -1,281 +0,0 @@ -: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); -} diff --git a/hero_image.png b/hero_image.png new file mode 100644 index 0000000..07245e6 Binary files /dev/null and b/hero_image.png differ diff --git a/index.html b/index.html index 1079605..1e14e3f 100644 --- a/index.html +++ b/index.html @@ -13,40 +13,104 @@
+ +
-
+

Sporthunde Nordeifel e.V.

Wir bewegen die Nordeifel

+ +
+ Zughundesport in Aktion +
-
+

Über uns

-

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!

+

Wer wir sind

+

Der Verein wurde im September 2023 gegründet und ist gemeinnützig tätig. Wir sind ein junger und dynamischer Verein aus begeisterten Hundesportlern, die gemeinsam trainieren und den Austausch unter Gleichgesinnten schätzen.

+
+

Was wir machen

+

Unser Herz schlägt für den Zughundesport. Ein starkes Team funktioniert nur, wenn beide Seiten körperlich und technisch gut vorbereitet sind. Deshalb trainieren wir nicht nur die Hunde, sondern legen auch großen Wert auf die sportliche Ausbildung des Menschen. Ob ein gesunder Laufstil im Canicross oder die souveräne Beherrschung von Bike und Scooter – wir bereiten euch so vor, dass ihr diesen faszinierenden Sport lange und gesund ausüben könnt. Ob Anfänger oder ambitionierter Sportler – bei uns ist jedes Team willkommen.

+
+

Unsere Philosophie: Qualität durch Ausbildung

+

Zughundesport ist ein Teamsport. Damit ihr diesen Sport viele Jahre lang gemeinsam betreiben könnt, legen wir Wert auf fundierte Trainerausbildung, Fitness & Technik für den Menschen und artgerechte Hundeausbildung.

-
-

Kontakt

-
- - ✉ info@sporthunde-nordeifel.de - - - ☏ +49 123 456 789 +
+

Aktuelles

+
+

Dog Mud Fun Run

+

Wir richten den „Dog Mud Fun Run“ im Rahmen des bekannten Max Buddels Fun-Lauf aus. Hier geht es ab durch den Matsch und über Hindernisse – ein echtes Teamerlebnis für Hund und Halter.

+
+ Dog Mud Fun Event 1 + Dog Mud Fun Event 2 +
+ + 🏃 Jetzt zum Dog Mud Fun anmelden!
-
diff --git a/styles.css b/styles.css index 1a5aeb2..692fb47 100644 --- a/styles.css +++ b/styles.css @@ -272,3 +272,90 @@ p { opacity: 1; transform: translateY(0); } + +/* Neue CSS-Klassen für Navbar, Hero-Image, Events, Impressum */ +.navbar { + position: sticky; + top: 20px; + z-index: 100; + margin: 0 auto; + max-width: 900px; + padding: 1rem; + border-radius: 50px; +} + +.nav-links { + list-style: none; + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; +} + +.nav-links a { + text-decoration: none; + color: var(--text-primary); + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--accent-green); +} + +.hero-image-container { + margin-top: 2rem; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} + +.hero-image { + width: 100%; + height: auto; + display: block; + object-fit: cover; +} + +.event-card { + background: rgba(255,255,255,0.4); + border-radius: 16px; + padding: 2rem; + margin-top: 1rem; +} + +.event-images { + display: flex; + gap: 1rem; + margin: 1.5rem 0; + flex-wrap: wrap; +} + +.event-img { + flex: 1; + min-width: 250px; + border-radius: 12px; + max-width: 100%; + height: auto; + object-fit: cover; + box-shadow: 0 5px 15px rgba(0,0,0,0.1); +} + +.event-button { + margin-top: 1rem; +} + +.text-left { + text-align: left; +} + +.impressum-text h3 { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + font-size: 1.2rem; + color: var(--text-primary); +} + +.impressum-text p { + font-size: 0.95rem; +}