feat: initialer commit der meisterhaften brabetz homepage
This commit is contained in:
Felix
+314
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gebrüder Brabetz - Meisterhafter Garten- & Landschaftsbau</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
.font-serif { font-family: 'Merriweather', serif; }
|
||||
.font-sans { font-family: 'DM Sans', sans-serif; }
|
||||
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
|
||||
.faq-active .faq-answer { max-height: 200px; }
|
||||
.faq-active .faq-icon { transform: rotate(180deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-stone-50 text-stone-900 font-sans antialiased selection:bg-emerald-100 selection:text-emerald-900">
|
||||
|
||||
<nav class="fixed w-full bg-stone-50/95 backdrop-blur-sm z-50 shadow-sm border-b border-stone-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<a href="#" class="flex items-center gap-3 group">
|
||||
<i class="fa-solid fa-seedling text-emerald-700 text-3xl group-hover:scale-110 transition-transform"></i>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-2xl font-serif font-bold text-emerald-900 tracking-tight">Gebrüder Brabetz</span>
|
||||
<span class="text-xs font-medium text-stone-600 uppercase tracking-widest -mt-1">Garten- & Landschaftsbau</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium text-stone-700">
|
||||
<a href="#services" class="hover:text-emerald-700 transition">Leistungen</a>
|
||||
<a href="#gallery" class="hover:text-emerald-700 transition">Referenzen</a>
|
||||
<a href="#about" class="hover:text-emerald-700 transition">Über uns</a>
|
||||
<a href="#faq" class="hover:text-emerald-700 transition">FAQ</a>
|
||||
<a href="#contact" class="bg-emerald-700 hover:bg-emerald-600 text-white px-5 py-2.5 rounded-full transition shadow-md shadow-emerald-700/10">Angebot einholen</a>
|
||||
</div>
|
||||
|
||||
<button id="menu-btn" class="md:hidden text-stone-700 focus:outline-none text-2xl">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-stone-50 border-b border-stone-200 px-4 pt-2 pb-6 space-y-3 shadow-lg">
|
||||
<a href="#services" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Leistungen</a>
|
||||
<a href="#gallery" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Referenzen</a>
|
||||
<a href="#about" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Über uns</a>
|
||||
<a href="#faq" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">FAQ</a>
|
||||
<a href="#contact" class="block text-center bg-emerald-700 text-white px-4 py-2.5 rounded-xl font-medium">Angebot einholen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="relative min-h-[95vh] flex items-center justify-center pt-20 overflow-hidden bg-emerald-950">
|
||||
<img src="https://images.unsplash.com/photo-1558904541-efa8c3a30fc9?auto=format&fit=crop&w=1920&q=80" alt="Moderner Garten" class="absolute inset-0 w-full h-full object-cover opacity-55">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-emerald-950/20 via-emerald-950/50 to-stone-50"></div>
|
||||
|
||||
<div class="relative max-w-5xl mx-auto px-6 text-center z-10">
|
||||
<span class="text-sm font-bold tracking-widest text-emerald-300 uppercase bg-emerald-900/40 px-4 py-1.5 rounded-full border border-emerald-800/50 backdrop-blur-sm">Natur & Handwerk im Rheingau-Taunus</span>
|
||||
<h1 class="mt-8 text-5xl sm:text-7xl font-serif font-bold tracking-tight text-white leading-tight">
|
||||
Wir erwecken Ihren<br>
|
||||
<span class="text-emerald-400">Traumgarten</span> zum Leben.
|
||||
</h1>
|
||||
<p class="mt-8 text-xl text-stone-200 max-w-2xl mx-auto leading-relaxed">
|
||||
Meisterhafter Gartenbau kombiniert mit innovativer 3D-Planung. Wir gestalten Wohlfühloasen, die Generationen überdauern.
|
||||
</p>
|
||||
<div class="mt-12 flex flex-wrap justify-center gap-5">
|
||||
<a href="#contact" class="px-8 py-4 bg-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-xl shadow-lg shadow-emerald-600/20 transition-all transform hover:-translate-y-0.5 text-lg">Kostenloses Erstgespräch</a>
|
||||
<a href="#services" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-medium rounded-xl border border-white/20 transition-all backdrop-blur-sm">Unsere Leistungen</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="relative z-10 -mt-16 max-w-6xl mx-auto px-4">
|
||||
<div class="bg-white rounded-3xl shadow-xl border border-stone-100 p-8 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">25+</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Jahre Erfahrung</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">400+</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Projekte vollendet</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">3 Brüder</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Ein Wort & Versprechen</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">100%</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Smarte Datensouveränität</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="py-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 class="text-sm font-bold tracking-widest text-amber-600 uppercase">Unser Handwerk</h2>
|
||||
<p class="mt-4 text-4xl font-serif font-bold text-emerald-900 sm:text-5xl tracking-tight">Vom Entwurf bis zur Vollendung</p>
|
||||
<div class="mt-6 w-20 h-1 bg-amber-600 mx-auto"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
|
||||
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
|
||||
<i class="fa-solid fa-compass-drafting"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Planung & Design</h3>
|
||||
<p class="text-stone-600 text-base leading-relaxed">Individuelle 3D-Gartenarchitektur, die Ihre Wünsche exakt visualisiert, Höhenunterschiede ausgleicht und Schattenverläufe simuliert.</p>
|
||||
</div>
|
||||
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
|
||||
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
|
||||
<i class="fa-solid fa-mountain-sun"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Hardscape & Bau</h3>
|
||||
<p class="text-stone-600 text-base leading-relaxed">Terrassenbau, langlebige Natursteinmauern, Pflasterarbeiten, Zaunbau und meisterhafte Steinkunst präzise ausgeführt.</p>
|
||||
</div>
|
||||
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
|
||||
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
|
||||
<i class="fa-solid fa-faucet-drip"></i>
|
||||
</div>
|
||||
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Smart Garden (IoT)</h3>
|
||||
<p class="text-stone-600 text-base leading-relaxed">Automatisierte Bewässerungsanlagen, integrierte Bodenfeuchtesensoren und atmosphärische Lichtsteuerung – gehostet auf dem GreenStack.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="py-28 bg-stone-950 text-stone-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-20">
|
||||
<h2 class="text-sm font-bold tracking-widest text-emerald-400 uppercase">Referenzen</h2>
|
||||
<p class="mt-4 text-4xl font-serif font-bold text-white sm:text-5xl tracking-tight">Meisterwerke aus unserer Hand</p>
|
||||
<div class="mt-6 w-20 h-1 bg-amber-500 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
|
||||
<img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80" alt="Gartenplanung" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">Designphase</p>
|
||||
<p class="text-xs text-stone-400">Präzise 3D-Visualisierung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
|
||||
<img src="https://images.unsplash.com/photo-1592417817098-8f3d6eb19675?auto=format&fit=crop&w=600&q=80" alt="Steinarbeiten" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">Umsetzung</p>
|
||||
<p class="text-xs text-stone-400">Natursteinpflasterung</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
|
||||
<img src="https://images.unsplash.com/photo-1560568082-c15188aa6510?auto=format&fit=crop&w=600&q=80" alt="Moderner Garten" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">Vollendung</p>
|
||||
<p class="text-xs text-stone-400">Wellness-Oase im Grünen</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-lg">
|
||||
<img src="https://images.unsplash.com/photo-1558904541-efa8c3a30fc9?auto=format&fit=crop&w=600&q=80" alt="Smart Garden" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">GreenStack IoT</p>
|
||||
<p class="text-xs text-stone-400">Smarte Bewässerungssteuerung</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="py-28 max-w-4xl mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-sm font-bold tracking-widest text-amber-600 uppercase">Häufige Fragen</h2>
|
||||
<p class="mt-4 text-4xl font-serif font-bold text-emerald-900 tracking-tight">Klarheit von Anfang an</p>
|
||||
<div class="mt-4 w-16 h-1 bg-amber-600 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
|
||||
<div class="flex justify-between items-center select-none">
|
||||
<h3 class="font-semibold text-lg text-emerald-950">Wie läuft ein Projekt bei den Gebrüdern Brabetz ab?</h3>
|
||||
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
|
||||
</div>
|
||||
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
|
||||
Alles beginnt mit einem kostenlosen Erstgespräch bei Ihnen vor Ort im Rheingau-Taunus-Kreis. Danach erstellen wir eine präzise 3D-Planung. Erst wenn Sie zu 100 % zufrieden sind, rücken wir mit unserem Maschinenpark zur meisterhaften Umsetzung an.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
|
||||
<div class="flex justify-between items-center select-none">
|
||||
<h3 class="font-semibold text-lg text-emerald-950">Was verbirgt sich hinter dem "GreenStack IoT"?</h3>
|
||||
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
|
||||
</div>
|
||||
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
|
||||
Wir überlassen Ihre Gartendaten nicht fremden US-Cloud-Konzernen. Die digitale Steuerung Ihrer Bewässerung und Beleuchtung läuft über einen gesicherten, selbstgehosteten Docker-Stack direkt auf unserer eigenen Server-Infrastruktur. Das bedeutet absolute Datensouveränität und Ausfallsicherheit für Sie.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
|
||||
<div class="flex justify-between items-center select-none">
|
||||
<h3 class="font-semibold text-lg text-emerald-950">Übernehmen Sie auch kleinere Pflaster- oder Pflegearbeiten?</h3>
|
||||
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
|
||||
</div>
|
||||
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
|
||||
Ja, absolut! Wir realisieren exklusive Großprojekte ebenso leidenschaftlich wie kleinere Anpassungen, Zaunbau, Terrassenerweiterungen oder den fachgerechten Baumschnitt bei Ihnen im Garten.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="py-24 bg-stone-100 border-t border-stone-200">
|
||||
<div class="max-w-5xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 class="text-4xl font-serif font-bold text-emerald-900 leading-tight">Lass uns gemeinsam Großes erschaffen.</h2>
|
||||
<p class="mt-4 text-stone-600 text-lg">Sende uns eine unverbindliche Anfrage. Wir melden uns innerhalb von 24 Stunden bei dir, um einen gemeinsamen Vor-Ort-Termin zu vereinbaren.</p>
|
||||
|
||||
<div class="mt-8 space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-white rounded-xl shadow flex items-center justify-center text-emerald-700"><i class="fa-solid fa-phone"></i></div>
|
||||
<a href="tel:061244654" class="font-bold text-lg text-emerald-950 hover:text-emerald-700 transition">06124 / 4654</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-white rounded-xl shadow flex items-center justify-center text-emerald-700"><i class="fa-solid fa-envelope"></i></div>
|
||||
<a href="mailto:info@gebrueder-brabetz.de" class="font-medium text-stone-700 hover:text-emerald-700 transition">info@gebrueder-brabetz.de</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-8 rounded-3xl shadow-xl border border-stone-200/60">
|
||||
<form onsubmit="handleFormSubmit(event)" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Name *</label>
|
||||
<input type="text" required class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">E-Mail Adresse *</label>
|
||||
<input type="email" required class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Projektart</label>
|
||||
<select class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm">
|
||||
<option>Komplette Neugestaltung</option>
|
||||
<option>Terrassen- & Steinarbeiten</option>
|
||||
<option>Smart Garden & Bewässerung</option>
|
||||
<option>Gartenpflege & Holzarbeiten</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Deine Nachricht</label>
|
||||
<textarea rows="3" placeholder="Beschreibe kurz dein Vorhaben..." class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-600 transition text-sm"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full py-4 bg-emerald-700 hover:bg-emerald-600 text-white font-semibold rounded-xl transition shadow-lg shadow-emerald-700/10 text-sm tracking-wide uppercase">Anfrage absenden</button>
|
||||
</form>
|
||||
<div id="form-success" class="hidden mt-4 p-4 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-800 text-sm text-center font-medium">
|
||||
🎉 Danke! Deine Anfrage ist sicher auf unserem Server gelandet. Wir melden uns!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-stone-900 py-16 text-stone-400 border-t border-stone-950">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12 text-sm">
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4 text-base">Kontakt</h4>
|
||||
<p class="font-medium text-stone-200 text-base mb-1">Gebrüder Brabetz GmbH</p>
|
||||
<p>Rheingau-Taunus-Kreis</p>
|
||||
<p class="mt-3"><i class="fa-solid fa-phone text-emerald-400 mr-2"></i> 06124 / 4654</p>
|
||||
<p><i class="fa-solid fa-envelope text-emerald-400 mr-2"></i> info@gebrueder-brabetz.de</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4 text-base">Impressum</h4>
|
||||
<p><strong>Vertreten durch die Gebrüder:</strong> Caspar Brabetz, Jakob Brabetz, Felix Brabetz</p>
|
||||
<p><strong>Sitz der Gesellschaft:</strong> Rheingau-Taunus-Kreis</p>
|
||||
<p><strong>Registereintrag:</strong> Amtsgericht Bad Schwalbach (i. Gr.)</p>
|
||||
<p class="mt-3 text-xs text-stone-500 leading-relaxed">Verantwortlich für den Inhalt nach § 5 TMG: Caspar Brabetz, Jakob Brabetz, Felix Brabetz.</p>
|
||||
</div>
|
||||
<div class="text-right flex flex-col items-end justify-between">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<i class="fa-solid fa-seedling text-emerald-400 text-xl"></i>
|
||||
<span class="text-lg font-serif font-bold text-white tracking-tight">Gebrüder Brabetz</span>
|
||||
</div>
|
||||
<div class="text-xs text-stone-500">
|
||||
<p>© 2026. Alle Rechte vorbehalten.</p>
|
||||
<p class="mt-1">Hosted safely on our own Docker Stack (brabetz-node)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Mobile Menu Toggle
|
||||
const menuBtn = document.getElementById('menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
menuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Schließen des mobilen Menüs bei Klick auf Link
|
||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
|
||||
});
|
||||
|
||||
// FAQ Akkordeon Toggle
|
||||
function toggleFaq(element) {
|
||||
element.classList.toggle('faq-active');
|
||||
}
|
||||
|
||||
// Formular Absendungs-Simulation
|
||||
function handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
const successDiv = document.getElementById('form-success');
|
||||
successDiv.classList.remove('hidden');
|
||||
event.target.reset();
|
||||
setTimeout(() => {
|
||||
successDiv.classList.add('hidden');
|
||||
}, 6000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user