Hugging Face's logo

Spaces:
Frajosgro
/
homepage-melina
Running

App Files Community
homepage-melina / index.html
Frajosgro's picture
Frajosgro
Add 2 files
c24f269 verified
raw
history blame contribute delete
40.4 kB
 <!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pferdeausbildung - Individuelles Training für Jungpferde & Reiter</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6C63FF',
secondary: '#FF6584',
accent: '#42E2B8',
dark: '#2F2E41',
light: '#F8F9FA'
},
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #6C63FF 0%, #42E2B8 100%);
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.transition-all {
transition: all 0.3s ease;
}
.before-after-container {
position: relative;
height: 400px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.before-after-slider {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.before-image {
width: 50%;
background-image: url('https://images.unsplash.com/photo-1553284965-83fd3e82ab5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');
}
.after-image {
width: 100%;
background-image: url('https://images.unsplash.com/photo-1553284965-5dd8352ff1bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
}
.slider-handle {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background-color: white;
cursor: ew-resize;
transform: translateX(-50%);
}
.slider-handle::before {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #6C63FF 0%, #FF6584 100%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
content: "↔";
font-size: 18px;
}
.gallery-item {
transition: all 0.3s ease;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.gallery-item:hover {
transform: scale(1.05);
z-index: 10;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.service-card {
background: white;
border-radius: 20px;
overflow: hidden;
position: relative;
z-index: 1;
}
.service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, #6C63FF, #FF6584, #42E2B8);
}
.icon-container {
width: 70px;
height: 70px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
background: linear-gradient(135deg, #6C63FF 0%, #42E2B8 100%);
color: white;
box-shadow: 0 10px 15px -3px rgba(108, 99, 255, 0.3);
}
.shape-1 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 30px;
background: rgba(108, 99, 255, 0.1);
transform: rotate(45deg);
z-index: -1;
}
.shape-2 {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(255, 101, 132, 0.1);
z-index: -1;
}
.contact-card {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, #6C63FF, #FF6584, #42E2B8);
}
.footer-wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.footer-wave svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 100px;
}
.footer-wave .shape-fill {
fill: #FFFFFF;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background: linear-gradient(90deg, #6C63FF, #FF6584);
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.btn-primary {
background: linear-gradient(135deg, #6C63FF 0%, #42E2B8 100%);
box-shadow: 0 10px 15px -3px rgba(108, 99, 255, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 20px -5px rgba(108, 99, 255, 0.4);
}
.btn-secondary {
background: white;
color: #6C63FF;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body class="bg-light text-dark">
<!-- Header/Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<div class="icon-container mr-3">
<i class="fas fa-horse-head text-2xl"></i>
</div>
<span class="text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Pferdeausbildung</span>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#services" class="nav-link text-dark font-medium transition-all">Leistungen</a>
<a href="#philosophy" class="nav-link text-dark font-medium transition-all">Philosophie</a>
<a href="#gallery" class="nav-link text-dark font-medium transition-all">Galerie</a>
<a href="#contact" class="nav-link text-dark font-medium transition-all">Kontakt</a>
</nav>
<button class="md:hidden text-primary">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden">
<div class="shape-1 -top-20 -left-20"></div>
<div class="shape-2 -bottom-10 -right-10"></div>
<div class="container mx-auto px-4 text-center relative z-10">
<h1 class="text-5xl md:text-6xl font-bold mb-6">Individuelle Pferdeausbildung</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Systematisch, strukturiert und pferdegerecht – für ein ausbalanciertes Pferd mit Freude an der Arbeit</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#contact" class="btn-primary font-semibold px-8 py-4 rounded-full transition-all">
Jetzt unverbindlich anfragen
</a>
<a href="#services" class="btn-secondary font-semibold px-8 py-4 rounded-full transition-all">
Mehr erfahren
</a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-white relative overflow-hidden">
<div class="shape-1 -top-20 right-0 opacity-30"></div>
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Meine Leistungen</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Individuell abgestimmte Trainingskonzepte für jedes Pferd und jeden Reiter</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service Card 1 -->
<div class="service-card p-8 card-hover transition-all">
<div class="icon-container">
<i class="fas fa-horse text-2xl"></i>
</div>
<h3 class="text-2xl font-semibold text-dark mb-3">Jungpferdeausbildung</h3>
<p class="text-gray-600 mb-4">Systematische und pferdegerechte Grundausbildung für junge Pferde, die eine solide Basis für ihre weitere Entwicklung legt.</p>
<p class="text-gray-600">Strukturiertes Training mit Geduld und klaren Prozessen für ein vertrauensvolles, sicheres Pferd.</p>
</div>
<!-- Service Card 2 -->
<div class="service-card p-8 card-hover transition-all">
<div class="icon-container">
<i class="fas fa-user-tie text-2xl"></i>
</div>
<h3 class="text-2xl font-semibold text-dark mb-3">Beritt & Reitunterricht</h3>
<p class="text-gray-600 mb-4">Individueller Beritt für Ihr Pferd sowie stationärer und mobiler Reitunterricht für eine harmonische Partnerschaft.</p>
<p class="text-gray-600">Anpassung an die Bedürfnisse von Pferd und Reiter für optimale Fortschritte.</p>
</div>
<!-- Service Card 3 -->
<div class="service-card p-8 card-hover transition-all">
<div class="icon-container">
<i class="fas fa-hands-helping text-2xl"></i>
</div>
<h3 class="text-2xl font-semibold text-dark mb-3">Handarbeit & Doppellonge</h3>
<p class="text-gray-600 mb-4">Förderung von Balance und Selbsthaltung durch gezielte Bodenarbeit ohne Reitergewicht.</p>
<p class="text-gray-600">Ideal für Jungpferde und zur Korrektur von älteren Pferden.</p>
</div>
<!-- Service Card 4 -->
<div class="service-card p-8 card-hover transition-all">
<div class="icon-container">
<i class="fas fa-chair text-2xl"></i>
</div>
<h3 class="text-2xl font-semibold text-dark mb-3">Sitzschulung</h3>
<p class="text-gray-600 mb-4">Feine Hilfengebung und korrekte Einwirkung durch optimierten Reitersitz.</p>
<p class="text-gray-600">Individuelle Korrekturen für eine bessere Kommunikation mit dem Pferd.</p>
</div>
<!-- Service Card 5 -->
<div class="service-card p-8 card-hover transition-all">
<div class="icon-container">
<i class="fas fa-tree text-2xl"></i>
</div>
<h3 class="text-2xl font-semibold text-dark mb-3">Geländetraining</h3>
<p class="text-gray-600 mb-4">Steigerung von Trittsicherheit, Mut und Alltagsroutine durch gezieltes Geländetraining.</p>
<p class="text-gray-600">Vorbereitung auf Ausritte und Turniere in natürlicher Umgebung.</p>
</div>
<!-- Service Card 6 -->
<div class="service-card p-8 card-hover transition-all">
<div class="icon-container">
<i class="fas fa-star text-2xl"></i>
</div>
<h3 class="text-2xl font-semibold text-dark mb-3">Individuelle Pakete</h3>
<p class="text-gray-600 mb-4">Kombination verschiedener Leistungen für maßgeschneidertes Training.</p>
<p class="text-gray-600">Gerne erstelle ich ein auf Ihr Pferd abgestimmtes Konzept.</p>
</div>
</div>
</div>
</section>
<!-- Philosophy Section -->
<section id="philosophy" class="py-20 bg-gradient-to-br from-primary/10 to-accent/10 relative overflow-hidden">
<div class="shape-2 top-20 left-0 opacity-20"></div>
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2 relative">
<img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Pferd und Trainer"
class="rounded-3xl shadow-2xl w-full h-auto">
<div class="absolute -bottom-6 -right-6 bg-secondary text-white px-6 py-3 rounded-full shadow-lg">
<i class="fas fa-heart mr-2"></i> Seit 2010 für Pferde im Einsatz
</div>
</div>
<div class="lg:w-1/2">
<h2 class="text-4xl font-bold mb-6 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Meine Philosophie</h2>
<p class="text-lg text-gray-700 mb-6">
Mein ganzheitlicher Trainingsansatz zielt darauf ab, ein tragfähiges, ausbalanciertes Pferd zu entwickeln, das Freude an der Arbeit hat.
</p>
<p class="text-gray-700 mb-8">
Besonders bei Jungpferden lege ich Wert auf feine Kommunikation, klare Strukturen und geduldiges Vorgehen. Jeder Lernschritt wird sorgfältig aufgebaut, um das Pferd nicht zu überfordern und Vertrauen aufzubauen.
</p>
<div class="space-y-4">
<div class="flex items-start bg-white p-4 rounded-xl shadow-sm">
<div class="bg-primary text-white p-2 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-semibold text-lg text-dark mb-1">Individuell</h4>
<p class="text-gray-600">Jedes Pferd erhält ein auf seine Bedürfnisse abgestimmtes Training.</p>
</div>
</div>
<div class="flex items-start bg-white p-4 rounded-xl shadow-sm">
<div class="bg-accent text-white p-2 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-semibold text-lg text-dark mb-1">Pferdegerecht</h4>
<p class="text-gray-600">Respektvolle Ausbildung ohne Druck oder Gewalt.</p>
</div>
</div>
<div class="flex items-start bg-white p-4 rounded-xl shadow-sm">
<div class="bg-secondary text-white p-2 rounded-full mr-4">
<i class="fas fa-check"></i>
</div>
<div>
<h4 class="font-semibold text-lg text-dark mb-1">Nachhaltig</h4>
<p class="text-gray-600">Solide Grundlagen für eine langfristige Entwicklung.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Before/After Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Trainingserfolge</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Sehen Sie selbst den Unterschied vor und nach dem Training</p>
</div>
<div class="before-after-container">
<div class="before-after-slider before-image"></div>
<div class="before-after-slider after-image"></div>
<div class="slider-handle"></div>
</div>
<div class="mt-12 text-center">
<p class="text-xl font-medium text-dark mb-2">"Aus einem unsicheren Jungpferd wird ein selbstbewusster Partner"</p>
<div class="flex justify-center items-center">
<div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center mr-3">
<i class="fas fa-quote-left"></i>
</div>
<p class="text-gray-600 italic">- Zufriedener Kunde</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-20 bg-gradient-to-br from-primary/10 to-accent/10">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Galerie & Impressionen</h2>
<p class="text-lg text-gray-600 max-w-2xl mx-auto">Einblicke in meine Arbeit mit Pferden und Reitern</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1553284965-83fd3e82ab5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
alt="Jungpferd Training"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1553284965-5dd8352ff1bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Beritt"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Handarbeit"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1605559421013-9a5dcde8b6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Doppellonge"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1605559420909-d37c5bb1ee50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Sitzschulung"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1605559421013-9a5dcde8b6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Geländetraining"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1553284966-3e6ae56d0e41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Jungpferd"
class="w-full h-64 object-cover">
</div>
<div class="gallery-item rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1553284966-3e6ae56d0e41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Training"
class="w-full h-64 object-cover">
</div>
</div>
<div class="text-center mt-12">
<button class="btn-primary font-semibold px-8 py-3 rounded-full transition-all">
<i class="fas fa-images mr-2"></i> Alle Bilder ansehen
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-dark text-white relative overflow-hidden">
<div class="shape-1 top-0 left-0 opacity-10"></div>
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Kontakt</h2>
<p class="text-lg text-gray-300 max-w-2xl mx-auto">Vereinbaren Sie noch heute einen Termin für ein unverbindliches Beratungsgespräch</p>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<div class="contact-card text-dark">
<h3 class="text-2xl font-semibold mb-6">Kontaktinformationen</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
<i class="fas fa-map-marker-alt text-xl"></i>
</div>
<div>
<p class="font-medium text-lg">Standort</p>
<p>Musterstraße 123, 12345 Musterstadt</p>
<p class="text-primary mt-1 font-medium">Einzugsgebiet: 50 km Umkreis</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
<i class="fas fa-mobile-alt text-xl"></i>
</div>
<div>
<p class="font-medium text-lg">Telefon</p>
<p>+49 123 456789</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
<i class="fas fa-envelope text-xl"></i>
</div>
<div>
<p class="font-medium text-lg">E-Mail</p>
<p>[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-primary/10 text-primary p-3 rounded-lg mr-4">
<i class="fab fa-whatsapp text-xl"></i>
</div>
<div>
<p class="font-medium text-lg">WhatsApp</p>
<p>+49 123 456789</p>
<a href="https://wa.me/49123456789" class="inline-block mt-3 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-full transition-all">
<i class="fab fa-whatsapp mr-2"></i> Nachricht senden
</a>
</div>
</div>
</div>
<div class="mt-10">
<h3 class="text-2xl font-semibold mb-4">Öffnungszeiten</h3>
<div class="space-y-3">
<div class="flex justify-between border-b border-gray-200 pb-2">
<span>Montag - Freitag</span>
<span class="font-medium">8:00 - 18:00 Uhr</span>
</div>
<div class="flex justify-between border-b border-gray-200 pb-2">
<span>Samstag</span>
<span class="font-medium">9:00 - 14:00 Uhr</span>
</div>
<div class="flex justify-between">
<span>Sonntag</span>
<span class="font-medium">nach Vereinbarung</span>
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="contact-card h-full">
<h3 class="text-2xl font-semibold mb-6">Kontaktformular</h3>
<form class="space-y-5">
<div>
<label for="name" class="block mb-2 font-medium">Name</label>
<input type="text" id="name" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
</div>
<div>
<label for="email" class="block mb-2 font-medium">E-Mail</label>
<input type="email" id="email" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
</div>
<div>
<label for="phone" class="block mb-2 font-medium">Telefon</label>
<input type="tel" id="phone" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
</div>
<div>
<label for="service" class="block mb-2 font-medium">Interesse an</label>
<select id="service" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark">
<option value="">Bitte auswählen</option>
<option value="jungpferde">Jungpferdeausbildung</option>
<option value="beritt">Beritt</option>
<option value="unterricht">Reitunterricht</option>
<option value="handarbeit">Handarbeit & Doppellonge</option>
<option value="sitzschulung">Sitzschulung</option>
<option value="gelände">Geländetraining</option>
<option value="sonstiges">Sonstiges</option>
</select>
</div>
<div>
<label for="message" class="block mb-2 font-medium">Nachricht</label>
<textarea id="message" rows="5" class="w-full px-5 py-3 rounded-lg bg-gray-100 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-dark"></textarea>
</div>
<button type="submit" class="w-full btn-primary font-semibold px-6 py-4 rounded-lg transition-all mt-6">
<i class="fas fa-paper-plane mr-2"></i> Nachricht senden
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="h-96 bg-gray-200 relative">
<div class="absolute inset-0 bg-primary/10 flex items-center justify-center">
<div class="text-center p-8 bg-white rounded-xl shadow-xl max-w-md mx-4">
<h3 class="text-2xl font-bold text-dark mb-3">Besuchen Sie uns</h3>
<p class="text-gray-600 mb-4">Vereinbaren Sie einen Termin für ein persönliches Gespräch und eine Stallbesichtigung.</p>
<a href="#contact" class="btn-primary font-semibold px-6 py-3 rounded-full inline-block transition-all">
Termin vereinbaren
</a>
</div>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2427.123456789012!2d13.123456789012345!3d52.12345678901234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTLCsDA3JzI0LjQiTiAxM8KwMDcnMjQuNCJF!5e0!3m2!1sde!2sde!4v1234567890123!5m2!1sde!2sde"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<!-- Footer -->
<footer class="bg-dark text-white pt-20 relative">
<div class="footer-wave">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<div class="container mx-auto px-4 pb-12">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-8 md:mb-0 text-center md:text-left">
<div class="flex items-center justify-center md:justify-start">
<div class="icon-container mr-3">
<i class="fas fa-horse-head text-2xl"></i>
</div>
<span class="text-2xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Pferdeausbildung</span>
</div>
<p class="mt-4 text-gray-300 max-w-md">Systematisch, strukturiert, pferdegerecht – für ein ausbalanciertes Pferd mit Freude an der Arbeit</p>
</div>
<div class="flex flex-col sm:flex-row gap-8">
<div>
<h4 class="text-lg font-semibold mb-4 text-white">Navigation</h4>
<ul class="space-y-2">
<li><a href="#services" class="text-gray-300 hover:text-primary transition-all">Leistungen</a></li>
<li><a href="#philosophy" class="text-gray-300 hover:text-primary transition-all">Philosophie</a></li>
<li><a href="#gallery" class="text-gray-300 hover:text-primary transition-all">Galerie</a></li>
<li><a href="#contact" class="text-gray-300 hover:text-primary transition-all">Kontakt</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white">Rechtliches</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-300 hover:text-primary transition-all">Impressum</a></li>
<li><a href="#" class="text-gray-300 hover:text-primary transition-all">Datenschutz</a></li>
<li><a href="#" class="text-gray-300 hover:text-primary transition-all">AGB</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white">Social Media</h4>
<div class="flex space-x-4">
<a href="#" class="bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-primary/90 transition-all">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-secondary text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-secondary/90 transition-all">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-accent text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-accent/90 transition-all">
<i class="fab fa-whatsapp"></i>
</a>
</div>
<div class="mt-4">
<a href="#contact" class="inline-flex items-center text-primary font-medium">
<i class="fas fa-envelope mr-2"></i> Newsletter abonnieren
</a>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>&copy; 2023 Pferdeausbildung. Alle Rechte vorbehalten.</p>
<p class="mt-2">Made with <i class="fas fa-heart text-secondary"></i> for horses</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-gradient-to-br from-primary to-secondary text-white w-14 h-14 rounded-full shadow-2xl flex items-center justify-center opacity-0 invisible transition-all hover:shadow-lg hover:scale-105">
<i class="fas fa-arrow-up text-xl"></i>
</button>
<script>
// Back to Top Button
const backToTopButton = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.remove('opacity-100', 'visible');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Before/After Slider
const sliderHandle = document.querySelector('.slider-handle');
const beforeImage = document.querySelector('.before-image');
let isDragging = false;
sliderHandle.addEventListener('mousedown', () => {
isDragging = true;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const container = document.querySelector('.before-after-container');
const containerRect = container.getBoundingClientRect();
let x = e.clientX - containerRect.left;
// Keep within bounds
x = Math.max(0, Math.min(x, containerRect.width));
const percent = (x / containerRect.width) * 100;
beforeImage.style.width = `${percent}%`;
sliderHandle.style.left = `${percent}%`;
});
// Mobile touch support for slider
sliderHandle.addEventListener('touchstart', () => {
isDragging = true;
});
document.addEventListener('touchend', () => {
isDragging = false;
});
document.addEventListener('touchmove', (e) => {
if (!isDragging) return;
const container = document.querySelector('.before-after-container');
const containerRect = container.getBoundingClientRect();
let x = e.touches[0].clientX - containerRect.left;
// Keep within bounds
x = Math.max(0, Math.min(x, containerRect.width));
const percent = (x / containerRect.width) * 100;
beforeImage.style.width = `${percent}%`;
sliderHandle.style.left = `${percent}%`;
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Frajosgro/homepage-melina" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>