176 lines
12 KiB
HTML
176 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Willow Creek Sanctuary - Find Your Best Friend</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Customizing Tailwind configuration for specific aesthetic */
|
|
.font-display {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.font-body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
/* Keyframe for a subtle heart pulse animation */
|
|
@keyframes pulse-heart {
|
|
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); }
|
|
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); }
|
|
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
|
|
}
|
|
.animate-pulse-custom {
|
|
animation: pulse-heart 3s infinite;
|
|
}
|
|
/* Utility for card hover effect */
|
|
.card-hover:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|
|
<!-- Importing Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-50 font-body text-gray-800 antialiased">
|
|
|
|
<!-- Navigation Bar -->
|
|
<header class="sticky top-0 z-50 bg-white shadow-md">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex-shrink-0">
|
|
<h1 class="text-3xl font-display text-indigo-700 tracking-tighter">
|
|
Willow Creek Sanctuary
|
|
</h1>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#adopt" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Adopt</a>
|
|
<a href="#about" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Our Mission</a>
|
|
<a href="#events" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Events</a>
|
|
<a href="#donate" class="text-gray-600 hover:text-indigo-600 transition duration-150 px-3 py-2 border-b-2 border-transparent hover:border-indigo-600 font-medium">Donate</a>
|
|
</nav>
|
|
<div class="md:hidden">
|
|
<!-- Mobile Menu Button (Hidden by default, JS will show it) -->
|
|
<button id="mobile-menu-button" type="button" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2 rounded-md" aria-controls="mobile-menu" aria-expanded="false">
|
|
<svg id="menu-icon-open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
|
|
<svg id="menu-icon-close" class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu -->
|
|
<div class="md:hidden hidden" id="mobile-menu">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<a href="#adopt" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Adopt</a>
|
|
<a href="#about" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Our Mission</a>
|
|
<a href="#events" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Events</a>
|
|
<a href="#donate" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500">Donate</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative bg-cover bg-center h-[60vh] flex items-center justify-center"
|
|
style="background-image: url('https://images.unsplash.com/photo-1542394372-a7c52057f6b1?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
|
|
<!-- Overlay for readability -->
|
|
<div class="absolute inset-0 bg-black/40"></div>
|
|
<div class="relative text-center px-4">
|
|
<h2 class="text-5xl sm:text-6xl lg:text-7xl font-display text-white mb-4 leading-tight drop-shadow-lg">
|
|
Give Them A Second Chance
|
|
</h2>
|
|
<p class="text-xl sm:text-2xl text-white mb-8 font-light tracking-wide drop-shadow-md">
|
|
Willow Creek Sanctuary: Where love finds its home.
|
|
</p>
|
|
<a href="#adopt" class="inline-block bg-orange-500 hover:bg-orange-600 text-white text-xl font-bold py-4 px-10 rounded-full transition duration-300 shadow-xl transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-orange-300 uppercase tracking-wider">
|
|
Meet Our Animals
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Adoption CTA Section -->
|
|
<section id="adopt" class="bg-indigo-50 py-16 sm:py-24">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center max-w-4xl mx-auto">
|
|
<h3 class="text-base font-semibold text-orange-500 tracking-wide uppercase mb-2">Your Companion Awaits</h3>
|
|
<h2 class="text-4xl sm:text-5xl font-display text-indigo-800 mb-6">
|
|
Ready to Open Your Heart?
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mb-10">
|
|
Every wagging tail and gentle purr deserves a safe haven. Explore our residents and start the journey to permanent happiness today.
|
|
</p>
|
|
<a href="#" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white text-xl font-semibold py-4 px-10 rounded-lg transition duration-300 shadow-lg transform hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-300">
|
|
View Available Pets
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pet Showcase Section -->
|
|
<section class="py-20 sm:py-28 bg-white" id="pets">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="text-sm font-semibold text-indigo-600 uppercase tracking-widest mb-2">Featured Companions</h3>
|
|
<h2 class="text-4xl sm:text-5xl font-display text-gray-900">
|
|
Love Stories Start Here
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Pet Grid -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
|
|
<!-- Pet Card 1: Dog -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
|
|
<div class="relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1517410714048-0c08e632692e?w=600&auto=format&fit=crop"
|
|
alt="Barnaby, friendly Labrador mix"
|
|
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
|
|
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<h4 class="text-2xl font-display text-gray-900 mb-1">Barnaby</h4>
|
|
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Labrador Mix</p>
|
|
<p class="text-gray-600 mb-4 text-sm">This gentle soul loves long walks and snuggles on the couch. Perfect for a family who loves adventure and quiet evenings.</p>
|
|
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
|
|
See Barnaby's Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pet Card 2: Cat -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
|
|
<div class="relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1531403086224-be5684b1e099?w=600&auto=format&fit=crop"
|
|
alt="Luna, elegant Siamese cat"
|
|
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
|
|
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">CAT</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<h4 class="text-2xl font-display text-gray-900 mb-1">Luna</h4>
|
|
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Siamese</p>
|
|
<p class="text-gray-600 mb-4 text-sm">Luna seeks a quiet, loving home where she can be the queen of the lap. She is surprisingly playful and very affectionate.</p>
|
|
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
|
|
See Luna's Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pet Card 3: Small Animal/Other -->
|
|
<div class="bg-white rounded-xl overflow-hidden shadow-lg border border-gray-100 card-hover transition duration-300 cursor-pointer">
|
|
<div class="relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1574254630214-8e85d10832d5?w=600&auto=format&fit=crop"
|
|
alt="Pip, small terrier mix"
|
|
class="w-full h-64 object-cover transition duration-500 hover:scale-105">
|
|
<span class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<h4 class="text-2xl font-display text-gray-900 mb-1">Pip</h4>
|
|
<p class="text-indigo-500 text-sm uppercase tracking-wider mb-3">Terrier Mix</p>
|
|
<p class="text-gray-600 mb-4 text-sm">Pip is an energetic little adventurer who needs someone to share their sunny disposition with. Great with active people!</p>
|
|
<button class="w-full bg-orange-400 hover:bg-orange-500 text-white font-semibold py-3 rounded-lg transition duration-150 focus:outline-none focus:ring-4 focus:ring-orange-300">
|
|
See Pip's Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-12">
|
|
<a href="#" class="inline-flex items-center bg-gray-<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.26s</div> |