admin/sporthunde_nordeifel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: admin:master
Branches Tags
admin:main admin:master
...
pull from: admin:main
Branches Tags
admin:main admin:master

10 Commits
master ... main

Author SHA1 Message Date
Antigravity
11742c3e95 Fix alignment, restore sticky menu, and fix 3D logo effect 2026-06-09 16:08:02 +00:00
Antigravity
a566965b31 Add top border to sidebar, add border radius to hero image, align hero h1 to sidebar top 2026-06-09 16:05:23 +00:00
Antigravity
447a1aa805 Reduce logo size and remove hero image container box/shadow 2026-06-09 16:03:32 +00:00
Antigravity
df1d9ea452 Increase logo size in sidebar 2026-06-09 16:02:14 +00:00
Antigravity
eee49b922b Fix logo squeeze, add all event info from images to aktuelles.html 2026-06-09 16:00:23 +00:00
Antigravity
27a1c05a5f Fix logo, center layout, fix hero image, remove event images, change email to info@ 2026-06-09 15:57:28 +00:00
Antigravity
bee4e058dc Split into subpages, move menu to sidebar, restrict hero image size 2026-06-09 15:53:46 +00:00
Antigravity
99a999018d Update layout, add hero image, events, and update impressum 2026-06-09 15:50:30 +00:00
Antigravity
44e513c59a Change port to 84 in docker-compose.yml 2026-06-08 11:18:43 +00:00
Antigravity
ec75425764 Remove docx/pdf, add gitignore and docker-compose 2026-06-08 11:07:01 +00:00
16 changed files with 459 additions and 427 deletions
Expand all files Collapse all files

5
.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
*.docx
*.pdf
*.jpg
*.png
impressum.txt

BIN
Einladung Jahreshauptversammlung 06 06 2026.pdf
View File

Binary file not shown.

2
README.md
View File

@@ -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://<IP-DEINES-SERVERS>:8080` erreichbar.
Die Webseite ist nun unter `http://<IP-DEINES-SERVERS>: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).

BIN
Website.docx
View File

Binary file not shown.

106
aktuelles.html Normal file
View File

@@ -0,0 +1,106 @@
<!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. - Aktuelles">
<title>Aktuelles - 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>
<div class="page-layout">
<nav class="sidebar glass-card fade-in">
<div class="sidebar-logo">
<img src="Logo%20Farbe.png" alt="Logo" class="logo-small">
</div>
<ul class="nav-links">
<li><a href="index.html">Startseite</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="aktuelles.html" class="active">Aktuelles</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<main class="container">
<section class="glass-card info-section fade-in">
<h2>Aktuelles</h2>
<div class="event-card">
<h3>Dog Mud Fun Run</h3>
<p>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. Der Lauf erfordert Geschicklichkeit, Ausdauer und echtes Teamwork zwischen dir und deinem Vierbeiner.</p>
<br>
<h4>Wann & Wo</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 15px;">
<li><strong>Wann:</strong> 30.08.2026; 13:00 Uhr</li>
<li><strong>Wo:</strong> Erftpark Euskirchen</li>
</ul>
<h4>Anmeldung</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 15px;">
<li>ab 09.06.2026, 15:00 Uhr via raceresult</li>
<li>Limitiert auf 100 Teilnehmer</li>
<li>Teilnahme ab 16 Jahre</li>
<li>Startgeld: 22,00 Euro über raceresult</li>
<li>Streckenlänge ca. 2 km mit Hindernissen</li>
</ul>
<h4>Startnummernausgabe</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 15px;">
<li>30.08.2026, 09:00 bis 12:00 Uhr am Pavillon der Sporthunde Nordeifel e.V.</li>
</ul>
<h4>Voraussetzungen</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 15px;">
<li>Der Teilnehmer erklärt, dass er und sein Hund gesund sind und sein Trainingszustand für eine belastende Veranstaltung ausreichend ist.</li>
<li>Gültige Tierhalterhaftpflichtversicherung und Nachweis gültige Tollwutimpfung Hund, sind bei Startnummernausgabe vorzulegen</li>
<li>Mindestalter des Hundes 18 Monate</li>
<li>Die Hunde sollten sozialverträglich sein</li>
<li>Die Hunde sollten ein gutsitzendes Geschirr (Zuggeschirr) tragen</li>
<li>Der Hund wird beim Lauf ausschließlich über das Geschirr mit einer Ruckdämpferleine am Lauf- oder Bauchgurt des Hundeführers befestigt</li>
<li>Maulkörbe, Flexileinen und Halsbänder ohne Zugstopp sind bei der Veranstaltung nicht erlaubt</li>
<li>Generell sind die Hunde am Veranstaltungstag an der Leine zu führen</li>
<li>Alle Hinterlassenschaften der Hunde sind mit zu nehmen und ordnungsgemäß zu entsorgen</li>
<li>Es gilt das aktuelle Tierschutzgesetz. Verstöße führen zum Ausschluss und werden zur Anzeige gebracht</li>
</ul>
<h4>Ablauf</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 15px;">
<li>Um 13:00 Uhr fällt der Startschuss und ihr werden in 2er Teams im Abstand von 30 Sek. auf die Strecke geschickt</li>
<li>Ihr dürft eurem Hund bei den Hindernissen Hilfestellung geben; der Hund darf auch getragen werden</li>
<li>Sollte der Hund das Hindernis verweigern, darf das Hindernis umlaufen werden</li>
<li>Da es sich um einen Fun-Run handelt und der Spaß an vorderster Stelle steht, wird es keine Zeitnahme geben. Ihr lauft in eurem bzw. in dem Tempo eures Hundes</li>
<li>Sportliche Fairness, Höflichkeit und Einhaltung der Regeln während der Veranstaltung sind eine Selbstverständlichkeit und werden von allen Teilnehmern erwartet</li>
</ul>
<h4>Fotos & Parken</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 15px;">
<li>Während der Veranstaltung werden Fotos/Videos gemacht, die danach veröffentlicht werden können (Social Media, TV, Print). Mit der Anmeldung wird diesem zugestimmt.</li>
<li>Anreise und Parkmöglichkeiten: <a href="https://www.maxbuddels-funlauf.de/der-lauftag.html" target="_blank" style="color: var(--accent-green);">Hier klicken</a></li>
</ul>
<h4>Sonstiges</h4>
<ul style="list-style-type: disc; margin-left: 20px; margin-bottom: 25px;">
<li>Es erfolgt keine Kostenerstattung bei Stornierung des Startplatzes</li>
<li>Den Anweisungen des Veranstalters und seiner Helfer ist Folge zu leisten.</li>
<li>Der Teilnehmer haftet für sich und seinen Hund. Weder der Veranstalter, seine Helfer, die Stadt Euskirchen noch betroffene Grundeigentümer können belangt werden</li>
<li>Mit der Anmeldung wird die Datenschutzerklärung und der Haftungsausschluss der Sporthunde Nordeifel e.V. anerkannt</li>
</ul>
<p style="font-weight: bold; margin-bottom: 20px;">Wir freuen uns auf einen tollen, sportlichen Nachmittag mit euch und euren Hunden, <br>eure Sporthunde Nordeifel e.V. (Sponsored by LIMNEA BestCare)</p>
<a href="https://my.raceresult.com/402229/registration" target="_blank" class="cyber-button event-button">
<span class="icon">🏃</span> Jetzt zum Dog Mud Fun anmelden!
</a>
</div>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>

56
backup_dark_neon/index.html
View File

@@ -1,56 +0,0 @@
<!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>

37
backup_dark_neon/script.js
View File

@@ -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)`;
});
}
});

281
backup_dark_neon/styles.css
View File

@@ -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);
}

2
docker-compose.yml
View File

@@ -2,7 +2,7 @@ services:
web:
image: nginx:alpine
ports:
- "8080:80"
- "84:80"
volumes:
- .:/usr/share/nginx/html:ro
restart: always

BIN
hero_image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

74
impressum.html Normal file
View File

@@ -0,0 +1,74 @@
<!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. - Impressum">
<title>Impressum - 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>
<div class="page-layout">
<nav class="sidebar glass-card fade-in">
<div class="sidebar-logo">
<img src="Logo%20Farbe.png" alt="Logo" class="logo-small">
</div>
<ul class="nav-links">
<li><a href="index.html">Startseite</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html" class="active">Impressum</a></li>
</ul>
</nav>
<main class="container">
<section class="glass-card footer fade-in text-left">
<h2>Impressum</h2>
<div class="impressum-text">
<h3>Angaben gemäß § 5 DDG</h3>
<p><strong>Sporthunde Nordeifel e. V.</strong><br>
Geschäftsstelle<br>
Auf dem Stucks 43<br>
53947 Nettersheim</p>
<br>
<p><strong>Vertreten durch:</strong><br>
Christoph Jockenhövel<br>
Heinz Leo Schröder<br>
Julia Reis</p>
<br>
<p><strong>Kontakt:</strong><br>
E-Mail: geschäftsstelle@sporthunde-nordeifel.de</p>
<br>
<p><strong>Registereintrag:</strong><br>
Eintragung im Vereinsregister.<br>
Registergericht: Amtsgericht Bonn<br>
Registernummer: VR 12053</p>
<br>
<h3>Verbraucherstreitbeilegung / Universalschlichtungsstelle</h3>
<p>Wir nehmen nicht an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teil und sind dazu auch nicht verpflichtet.</p>
<br>
<h3>Haftungsausschluss:</h3>
<p><strong>Haftung für Inhalte</strong><br>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
<br>
<p><strong>Haftung für Links</strong><br>
Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
<br>
<p><strong>Urheberrecht</strong><br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
<br>
<p><small>Erstellt mit dem Impressum-Generator von WebsiteWissen.com, dem Ratgeber für Website-Erstellung, Homepage-Baukästen und Shopsysteme. Rechtstext von der Kanzlei Hasselbach.</small></p>
</div>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>

63
index.html
View File

@@ -3,8 +3,8 @@
<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>
<meta name="description" content="Sporthunde Nordeifel e.V. - Startseite">
<title>Startseite - Sporthunde Nordeifel e.V.</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
@@ -13,42 +13,33 @@
<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 class="page-layout">
<nav class="sidebar glass-card fade-in">
<div class="sidebar-logo">
<img src="Logo%20Farbe.png" alt="Logo" class="logo-small">
</div>
<h1>Sporthunde Nordeifel <span class="ev">e.V.</span></h1>
<p class="subtitle">Wir bewegen die Nordeifel</p>
</header>
<ul class="nav-links">
<li><a href="index.html" class="active">Startseite</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<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>
<main class="container">
<header class="glass-card hero fade-in">
<h1>Sporthunde Nordeifel <span class="ev">e.V.</span></h1>
<p class="subtitle">Wir bewegen die Nordeifel</p>
<div class="hero-image-container">
<img src="hero_image.png" alt="Zughundesport in Aktion" class="hero-image">
</div>
<br>
<p>Willkommen bei den Sporthunden Nordeifel e.V. – deiner starken Gemeinschaft für den Zughundesport! Ob Anfänger oder erfahrener Athlet, wir bieten das passende Training für dich und deinen Hund.</p>
</header>
</main>
</div>
<script src="script.js"></script>
</body>

46
kontakt.html Normal file
View File

@@ -0,0 +1,46 @@
<!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. - Kontakt">
<title>Kontakt - 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>
<div class="page-layout">
<nav class="sidebar glass-card fade-in">
<div class="sidebar-logo">
<img src="Logo%20Farbe.png" alt="Logo" class="logo-small">
</div>
<ul class="nav-links">
<li><a href="index.html">Startseite</a></li>
<li><a href="ueber-uns.html">Über uns</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="kontakt.html" class="active">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<main class="container">
<section class="glass-card contact-section fade-in">
<h2>Kontakt</h2>
<p>Du hast Fragen zu unseren Sparten, möchtest mehr über die richtige Ausrüstung erfahren oder hast Interesse an einem Probetraining? Wir freuen uns darauf, dich und deinen Hund kennenzulernen!</p>
<br>
<div class="contact-grid">
<a href="mailto:info@sporthunde-nordeifel.de" class="cyber-button">
<span class="icon">✉</span> Schreib uns eine E-Mail
</a>
</div>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>

18
script.js
View File

@@ -11,17 +11,15 @@ document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
// Logo 3D effect on mousemove
const logo = document.querySelector('.logo');
const hero = document.querySelector('.hero');
const logo = document.querySelector('.logo-small');
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;
if(logo && window.matchMedia("(pointer: fine)").matches) {
document.addEventListener('mousemove', (e) => {
const x = e.clientX;
const y = e.clientY;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
// Calculate rotation (inverted for natural feel)
const rotateX = ((y - centerY) / centerY) * -15;
@@ -30,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
logo.style.transform = `scale(1.08) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
hero.addEventListener('mouseleave', () => {
document.addEventListener('mouseleave', () => {
logo.style.transform = `scale(1) rotateX(0deg) rotateY(0deg)`;
});
}

149
styles.css
View File

@@ -73,10 +73,27 @@ body {
}
/* Layout */
.container {
max-width: 900px;
.page-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 2rem;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 4rem 1.5rem;
}
@media(min-width: 900px) {
.page-layout {
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
}
.container {
flex: 1;
max-width: 900px;
display: flex;
flex-direction: column;
gap: 2.5rem;
@@ -104,8 +121,6 @@ body {
.hero {
text-align: center;
position: relative;
overflow: hidden;
padding-top: 4rem;
padding-bottom: 4rem;
}
@@ -272,3 +287,127 @@ p {
opacity: 1;
transform: translateY(0);
}
/* Neue CSS-Klassen für Sidebar, Hero-Image, Events, Impressum */
.sidebar {
position: sticky;
top: 2rem;
height: fit-content;
width: 100%;
z-index: 100;
border-radius: 24px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.sidebar::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;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
@media(min-width: 900px) {
.sidebar {
width: 300px;
}
}
.sidebar-logo {
text-align: center;
margin-bottom: 1.5rem;
}
.logo-small {
width: 100%;
max-width: 180px;
height: auto;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
display: block;
margin: 0 auto;
}
.nav-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.nav-links a {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
font-size: 1.2rem;
transition: color 0.3s ease;
display: block;
padding: 0.5rem 1rem;
border-radius: 12px;
}
.nav-links a:hover, .nav-links a.active {
color: var(--accent-green);
background: rgba(255,255,255,0.3);
}
.hero-image-container {
margin-top: 2rem;
display: flex;
justify-content: center;
}
.hero-image {
width: 100%;
max-width: 600px;
height: auto;
display: block;
object-fit: contain;
border-radius: 16px;
}
.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;
}

47
ueber-uns.html Normal file
View File

@@ -0,0 +1,47 @@
<!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. - Über uns">
<title>Über uns - 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>
<div class="page-layout">
<nav class="sidebar glass-card fade-in">
<div class="sidebar-logo">
<img src="Logo%20Farbe.png" alt="Logo" class="logo-small">
</div>
<ul class="nav-links">
<li><a href="index.html">Startseite</a></li>
<li><a href="ueber-uns.html" class="active">Über uns</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<main class="container">
<section class="glass-card info-section fade-in">
<h2>Über uns</h2>
<h3>Wer wir sind</h3>
<p>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.</p>
<br>
<h3>Was wir machen</h3>
<p>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.</p>
<br>
<h3>Unsere Philosophie: Qualität durch Ausbildung</h3>
<p>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.</p>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>