200 lines
13 KiB
HTML
200 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Zum Herzen des Tierheims | Adoptionsportal</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom configuration for Tailwind */
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'primary-green': '#38A169', /* Emerald Green */
|
|
'secondary-gold': '#D97706', /* Amber */
|
|
'background-light': '#F7FAF9',
|
|
'text-dark': '#1F2937',
|
|
},
|
|
fontFamily: {
|
|
serif: ['Playfair Display', 'serif'],
|
|
sans: ['Inter', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Custom styles for visual impact */
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #f0d9c8 0%, #e0b8a5 100%);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
|
|
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
.pulse-shadow {
|
|
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
|
|
animation: pulse-shadow 3s infinite;
|
|
}
|
|
|
|
@keyframes pulse-shadow {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.4);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 10px rgba(56, 161, 105, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
|
|
}
|
|
}
|
|
|
|
/* Typography refinement */
|
|
.display-heading {
|
|
font-family: 'Playfair Display', serif;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light text-text-dark font-sans antialiased">
|
|
|
|
<!-- Navigation Bar -->
|
|
<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">
|
|
<div class="flex justify-between items-center h-20">
|
|
<!-- Logo/Brand -->
|
|
<div class="flex-shrink-0">
|
|
<h1 class="text-3xl font-extrabold text-primary-green display-heading">
|
|
Tierheim <span class="text-secondary-gold">Herz</span>
|
|
</h1>
|
|
</div>
|
|
<!-- Navigation Links -->
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#adoptions" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
|
|
Adoptions
|
|
</a>
|
|
<a href="#sucht" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
|
|
Suchen & Filter
|
|
</a>
|
|
<a href="#hilfe" class="text-lg font-medium hover:text-primary-green transition duration-150 px-2 py-1 border-b-2 border-transparent hover:border-primary-green">
|
|
Hilfe & Spenden
|
|
</a>
|
|
<a href="#kontakt" class="text-lg font-medium bg-primary-green text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600 transition duration-300 focus:outline-none focus:ring-4 focus:ring-primary-green/50">
|
|
Kontaktieren
|
|
</a>
|
|
</nav>
|
|
<!-- Mobile Menu Button (Hidden on Desktop) -->
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-button" class="text-text-dark focus:outline-none p-2 rounded-md hover:bg-gray-100 transition duration-150">
|
|
<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 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu Dropdown -->
|
|
<div id="mobile-menu" class="md:hidden hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="#adoptions" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Adoptions</a>
|
|
<a href="#sucht" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Suchen & Filter</a>
|
|
<a href="#hilfe" class="block px-3 py-2 rounded-md text-base font-medium text-text-dark hover:bg-primary-green/10">Hilfe & Spenden</a>
|
|
<a href="#kontakt" class="block w-full text-center mt-2 px-3 py-2 rounded-lg text-base font-medium bg-secondary-gold text-white hover:bg-amber-700">Kontaktieren</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero-gradient pt-16 pb-24 text-center shadow-xl">
|
|
<div class="max-w-4xl mx-auto px-4">
|
|
<h2 class="text-5xl sm:text-6xl font-extrabold text-text-dark mb-4 display-heading">
|
|
Ein neues Zuhause wartet auf Sie.
|
|
</h2>
|
|
<p class="text-xl sm:text-2xl mb-10 text-gray-700 font-medium">
|
|
Wir bieten liebevolle, gesunde Tiere, die nur darauf warten, Teil Ihrer Familie zu werden. Finden Sie Ihren perfekten Begleiter.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#sucht" class="bg-secondary-gold text-white font-bold py-4 px-8 text-lg rounded-full shadow-2xl hover:bg-amber-700 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300">
|
|
Tier suchen
|
|
</a>
|
|
<a href="#spenden" class="bg-white border-2 border-text-dark text-text-dark font-bold py-4 px-8 text-lg rounded-full shadow-lg hover:bg-gray-50 transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-text-dark/30">
|
|
Spenden helfen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Featured Animals Section -->
|
|
<section id="sucht" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="text-4xl font-bold text-text-dark mb-3 display-heading">
|
|
Unsere aktuellen Freunde
|
|
</h3>
|
|
<p class="text-xl text-gray-600">
|
|
Entdecken Sie Tiere, die Liebe und ein neues Leben suchen.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Animal Grid -->
|
|
<div id="animal-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
|
|
<!-- Card 1: Hund -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-primary-green cursor-pointer" tabindex="0" role="button">
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
|
<!-- Placeholder Image -->
|
|
<img src="https://images.unsplash.com/photo-1542837046-3e1e19c85c6d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxob3VuZHxlbnwwfHx8fDE1MTc4MzA1NDd8MA&ixlib=rb-4.0.3&q=80&w=400"
|
|
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Hund Bello, Labrador-Mix">
|
|
<span class="absolute top-3 right-3 bg-red-600 text-white text-xs font-bold p-1 rounded-full shadow-md">Adoptionsgebeten</span>
|
|
</div>
|
|
<div class="p-5">
|
|
<h4 class="text-2xl font-serif font-bold mb-1">Bello</h4>
|
|
<p class="text-sm text-gray-500 mb-3">Hund | Labrador-Mix</p>
|
|
<p class="text-gray-600 mb-3 text-sm">Bello ist ein verspielter Freund, der nach einem aktiven Zuhause sucht. Er liebt lange Spaziergänge!</p>
|
|
<button class="w-full bg-primary-green text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-primary-green focus:ring-offset-2">
|
|
Details anzeigen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Katze -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-secondary-gold cursor-pointer" tabindex="0" role="button">
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
|
<!-- Placeholder Image -->
|
|
<img src="https://images.unsplash.com/photo-1543556521-509e5a4d4b82?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxrYXR6ZSUyMG1pZGV8ZW58MHx8fHwxNTE3ODMwNTQ3fDA&ixlib=rb-4.0.3&q=80&w=400"
|
|
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Katze Luna, Maine Coon">
|
|
</div>
|
|
<div class="p-5">
|
|
<h4 class="text-2xl font-serif font-bold mb-1">Luna</h4>
|
|
<p class="text-sm text-gray-500 mb-3">Katze | Maine Coon</p>
|
|
<p class="text-gray-600 mb-3 text-sm">Luna ist eine sanfte und elegante Dame. Sie sucht eine ruhige Umgebung, in der sie sich geborgen fühlen kann.</p>
|
|
<button class="w-full bg-secondary-gold text-white py-3 rounded-lg font-semibold hover:bg-amber-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-secondary-gold focus:ring-offset-2">
|
|
Details anzeigen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Hund -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-primary-green cursor-pointer" tabindex="0" role="button">
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
|
<!-- Placeholder Image -->
|
|
<img src="https://images.unsplash.com/photo-1582738614608-062167d4543e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxob3VuZHxlbnwwfHx8fDE1MTc4MzA1NTZ8MA&ixlib=rb-4.0.3&q=80&w=400"
|
|
class="w-full h-full object-cover object-center transform transition duration-500 hover:scale-110" alt="Hund Max, Mischling">
|
|
</div>
|
|
<div class="p-5">
|
|
<h4 class="text-2xl font-serif font-bold mb-1">Max</h4>
|
|
<p class="text-sm text-gray-500 mb-3">Hund | Mischling</p>
|
|
<p class="text-gray-600 mb-3 text-sm">Max ist ein aufgeregter und geselliger Hund. Er ist perfekt für Familien, die viel draußen aktiv sind.</p>
|
|
<button class="w-full bg-primary-green text-white py-3 rounded-lg font-semibold hover:bg-green-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-primary-green focus:ring-offset-2">
|
|
Details anzeigen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Katze -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition duration-300 card-hover border-t-4 border-secondary-gold cursor-pointer" tabindex="0" role="button">
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center relative overflow-hidden">
|
|
<!-- Placeholder Image -->
|
|
<img src="https://images.unsplash.com/photo-1585623298806-03a929888c0e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTg4MnwwfDF8c2VhcmNofDEyfHxrYXRzJTIwZGV8ZW58MHx8fHwxNTE3OD<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 29.92s</div> |