Initial commit of website project
This commit is contained in:
Antigravity
56
backup_dark_neon/index.html
Normal file
56
backup_dark_neon/index.html
Normal file
@@ -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>
|
||||
37
backup_dark_neon/script.js
Normal file
37
backup_dark_neon/script.js
Normal file
@@ -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)`;
|
||||
});
|
||||
}
|
||||
});
|
||||
281
backup_dark_neon/styles.css
Normal file
281
backup_dark_neon/styles.css
Normal file
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user