174 lines
12 KiB
HTML
174 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hundehaus Herzensfreude | Adoptionszentrum</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom Configuration for Tailwind */
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'primary-gold': '#D4AF37',
|
|
'secondary-sage': '#8FBC8F',
|
|
'deep-moss': '#385A38',
|
|
'cream-bg': '#FAF9F6',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Custom Styles for visual flair */
|
|
.hero-bg {
|
|
background-image: url('https://images.unsplash.com/photo-1583025817778-5e420783b68e?fit=crop&w=1600&q=80'); /* Placeholder for a warm, happy dog image */
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-blend-mode: multiply;
|
|
background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
/* Subtle animation for content fade-in */
|
|
.animate-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeInMove 1s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInMove {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans bg-cream-bg text-gray-800">
|
|
|
|
<!-- Header & Navigation -->
|
|
<header class="bg-white shadow-lg sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-20">
|
|
<div class="text-3xl font-extrabold text-deep-moss tracking-wider cursor-pointer">
|
|
Hundhaus<span class="text-primary-gold"> Herzensfreude</span>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8 font-medium">
|
|
<a href="#adoptieren" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Adoption</a>
|
|
<a href="#tierliste" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Tierliste</a>
|
|
<a href="#ueber" class="text-gray-600 hover:text-primary-gold transition duration-150 focus:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-1">Über Uns</a>
|
|
<a href="#kontakt" class="bg-primary-gold text-white px-4 py-2 rounded-lg shadow-md hover:bg-yellow-600 transition duration-150 focus:ring-4 ring-primary-gold focus:ring-opacity-50">Kontakt</a>
|
|
</nav>
|
|
<div class="md:hidden">
|
|
<!-- Mobile Menu Button (Placeholder for functionality) -->
|
|
<button id="mobile-menu-button" class="text-gray-800 hover:text-primary-gold focus:outline-none focus:ring-2 ring-primary-gold p-2">
|
|
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu Dropdown (Hidden by default) -->
|
|
<div id="mobile-menu" class="hidden md:hidden border-t bg-white">
|
|
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
|
<a href="#adoptieren" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Adoption</a>
|
|
<a href="#tierliste" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Tierliste</a>
|
|
<a href="#ueber" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-cream-bg focus:bg-cream-bg focus:outline-none">Über Uns</a>
|
|
<a href="#kontakt" class="block w-full text-center mt-2 bg-primary-gold text-white px-3 py-2 rounded-md hover:bg-yellow-600 focus:ring-2 ring-primary-gold">Kontakt</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero-bg h-[60vh] flex items-center justify-center text-center relative">
|
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
|
|
<div class="relative z-10 p-4 max-w-4xl animate-in" style="animation-delay: 0.1s;">
|
|
<h1 class="text-6xl sm:text-7xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg">
|
|
Finde Dein Bester Freund
|
|
</h1>
|
|
<p class="text-xl sm:text-2xl text-white mb-8 font-light shadow-text">
|
|
Ein Zuhause, das Liebe schenkt. Wir verbinden Tiere mit Herzen, die sie lieben.
|
|
</p>
|
|
<a href="#adoptieren" class="inline-block bg-primary-gold text-white text-lg font-semibold px-10 py-4 rounded-full shadow-2xl transform hover:scale-105 transition duration-300 focus:outline-none focus:ring-4 ring-primary-gold ring-offset-4">
|
|
Jetzt Adoptionsprozess starten
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mission Statement Section -->
|
|
<section id="ueber" class="py-16 md:py-24 bg-white">
|
|
<div class="max-w-6xl mx-auto px-6 lg:px-8">
|
|
<div class="text-center mb-12 animate-in" style="animation-delay: 0.3s;">
|
|
<h2 class="text-5xl font-bold text-deep-moss mb-3">Unsere Mission</h2>
|
|
<p class="text-xl text-gray-600">Jedes Tier verdient eine zweite Chance.</p>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
<!-- Feature 1 -->
|
|
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.5s;">
|
|
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10l8 4 8-4V7M4 7v10l8 4 8-4V7"></path></svg>
|
|
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Fürsorge & Pflege</h3>
|
|
<p class="text-gray-600 leading-relaxed">Wir stellen sicher, dass jedes Tier in unserer Obhut liebevoll versorgt wird und die notwendige medizinische Betreuung erhält.</p>
|
|
</div>
|
|
<!-- Feature 2 -->
|
|
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.6s;">
|
|
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Matchmaking</h3>
|
|
<p class="text-gray-600 leading-relaxed">Wir finden das perfekte Match zwischen Tier und Familie. Sorgfältige Vermittlung ist unser Spezialgebiet.</p>
|
|
</div>
|
|
<!-- Feature 3 -->
|
|
<div class="text-center p-6 bg-cream-bg rounded-xl shadow-lg border-t-4 border-secondary-sage transform transition duration-300 hover:shadow-xl hover:border-primary-gold animate-in" style="animation-delay: 0.7s;">
|
|
<svg class="w-16 h-16 mx-auto text-primary-gold mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5-6H8a3 3 0 00-5 6v2m14 0h-5m-5 0h-5m5 0h5m0 0h-5"></path></svg>
|
|
<h3 class="text-2xl font-bold mb-3 text-deep-moss">Zweite Chance</h3>
|
|
<p class="text-gray-600 leading-relaxed">Wir geben Tieren, die sie verdienen, ein warmes, liebevolles Zuhause, fernab des Leidens.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Adoption Listing Section -->
|
|
<section id="tierliste" class="py-16 md:py-24 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
|
<div class="text-center mb-12 animate-in" style="animation-delay: 0.1s;">
|
|
<h2 class="text-5xl font-bold text-deep-moss mb-3">Die Suche beginnt hier</h2>
|
|
<p class="text-xl text-gray-600">Entdecke unsere wunderbaren Bewohner.</p>
|
|
</div>
|
|
|
|
<!-- Filter/Search Bar -->
|
|
<div class="mb-10 flex flex-col sm:flex-row gap-4 justify-center animate-in" style="animation-delay: 0.3s;">
|
|
<select class="p-3 border-2 border-primary-gold rounded-lg shadow-md focus:ring-2 focus:ring-primary-gold focus:border-primary-gold w-full sm:w-auto transition duration-150">
|
|
<option>Alle Tierarten</option>
|
|
<option>Hunde</option>
|
|
<option>Katzen</option>
|
|
</select>
|
|
<input type="text" placeholder="Suche nach Name oder Rasse..." class="p-3 border-2 border-gray-300 rounded-lg shadow-md focus:ring-2 focus:ring-secondary-sage focus:border-secondary-sage w-full sm:w-full transition duration-150">
|
|
<button class="bg-secondary-sage text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:bg-green-700 transition duration-150 focus:outline-none focus:ring-4 ring-secondary-sage">
|
|
Suche starten
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Animal Grid -->
|
|
<div id="animal-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
|
|
<!-- Animal Card 1: Bella (Dog) -->
|
|
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer animate-in" style="animation-delay: 0.5s;">
|
|
<img src="https://images.unsplash.com/photo-1574537185970-b89e4b6284e1?fit=crop&w=500&q=80" alt="Bella, Labrador-Mischling" class="w-full h-64 object-cover transition duration-500">
|
|
<div class="p-5">
|
|
<h4 class="text-3xl font-extrabold text-deep-moss mb-1">Bella</h4>
|
|
<p class="text-lg text-gray-500 mb-3">Labrador-Mischling</p>
|
|
<p class="text-sm text-gray-700 mb-3 border-l-4 border-primary-gold pl-3">Freundlich, verspielt und liebt lange Spaziergänge.</p>
|
|
<div class="flex justify-between items-center pt-2">
|
|
<span class="text-primary-gold text-xl font-bold">3 Jahre</span>
|
|
<button class="bg-primary-gold text-white px-6 py-2 rounded-full font-semibold shadow-md hover:bg-yellow-600 transition duration-150 focus:outline-none focus:ring-4 ring-primary-gold">
|
|
Mehr erfahren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animal Card 2: Felix (Cat) -->
|
|
<div class="card-hover bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer animate-in" style="animation-delay: 0.6s;">
|
|
<img src="https://images.unsplash.com/photo-1<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 30.75s</div> |