157 lines
11 KiB
HTML
157 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PawPrints Sanctuary - Find Your Furry Friend</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom font styling for a warm, inviting feel */
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Nunito:wght@400;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background-color: #fdf7f2; /* Very light cream/off-white background */
|
|
color: #333;
|
|
}
|
|
.header-font {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.hero-gradient {
|
|
background: linear-gradient(135deg, #ff9977 0%, #ffc371 100%);
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.card-shadow:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
|
}
|
|
/* Subtle hover effect for buttons */
|
|
.btn-primary {
|
|
transition: background-color 0.3s, transform 0.2s;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #e76f51; /* Darker orange/coral on hover */
|
|
transform: scale(1.02);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<header class="bg-white shadow-lg sticky top-0 z-10">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-20">
|
|
<div class="text-3xl header-font text-orange-600 tracking-wider">
|
|
PawPrints <span class="text-red-500">Sanctuary</span>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8 font-medium">
|
|
<a href="#adopt" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Adopt</a>
|
|
<a href="#browse" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Browse Animals</a>
|
|
<a href="#about" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Our Mission</a>
|
|
<a href="#contact" class="text-gray-600 hover:text-orange-500 transition duration-150 p-2 border-b-2 border-transparent hover:border-orange-500">Donate</a>
|
|
</nav>
|
|
<div class="md:hidden">
|
|
<!-- Mobile Menu Button (Hamburger) -->
|
|
<button id="menu-button" class="text-gray-600 hover:text-orange-500 p-2 focus:outline-none focus:ring-2 focus:ring-orange-500 rounded">
|
|
<svg class="w-6 h-6" 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 bg-white shadow-md">
|
|
<div class="px-4 pt-2 pb-3 space-y-1">
|
|
<a href="#adopt" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600 border-b">Adopt</a>
|
|
<a href="#browse" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600 border-b">Browse Animals</a>
|
|
<a href="#about" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600 border-b">Our Mission</a>
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-700 hover:bg-orange-50 hover:text-orange-600">Donate</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero-gradient py-24 sm:py-32 text-white shadow-xl">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1 class="text-5xl sm:text-7xl font-extrabold mb-4 leading-tight header-font drop-shadow-lg">
|
|
Open Your Heart. Share Your Home.
|
|
</h1>
|
|
<p class="text-xl sm:text-2xl mb-10 max-w-3xl mx-auto opacity-90">
|
|
Every wagging tail and gentle purr deserves a loving forever family. Meet our adoptable companions today.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#browse" class="btn-primary bg-white text-orange-600 font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-white/50">
|
|
Find Your Pet
|
|
</a>
|
|
<a href="#donate" class="bg-transparent border-2 border-white text-white font-semibold py-4 px-8 rounded-full text-lg hover:bg-white/20 focus:outline-none focus:ring-4 focus:ring-white/50">
|
|
Support Us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Animal Browsing / Showcase Section -->
|
|
<section id="browse" class="py-20 sm:py-28 bg-fdf7f2">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 class="text-4xl sm:text-5xl text-center mb-4 header-font text-gray-800">
|
|
Meet Our Residents
|
|
</h2>
|
|
<p class="text-center text-xl mb-12 text-gray-500 max-w-3xl mx-auto">
|
|
Explore profiles of dogs, cats, and small animals waiting for their second chance at happiness.
|
|
</p>
|
|
|
|
<!-- Animal Grid -->
|
|
<div id="animal-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Animal Card 1: Dog -->
|
|
<div class="card-shadow bg-white rounded-xl overflow-hidden border border-gray-100 group" data-type="dog">
|
|
<div class="relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1543455323-a6759d5e974b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8ZGFnJTIwZGVzJTIwZGVzZXJ8ZW58MHx8MHx8fDA%3D"
|
|
alt="Barnaby, a friendly Golden Retriever mix"
|
|
class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
|
|
<div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">DOG</div>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-3xl header-font text-gray-900 mb-1">Barnaby</h3>
|
|
<p class="text-gray-600 text-sm mb-3">Golden Retriever Mix</p>
|
|
<p class="text-gray-700 mb-4 text-sm">Barnaby loves long walks and sunny spots. He is patient and eager to please. Perfect for a family home.</p>
|
|
<div class="flex justify-center space-x-3">
|
|
<span class="text-sm text-green-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.045 1.115l-.428.039a.75.75 0 0 0-.994 1.455l.039.428a.75.75 0 0 0 1.455.994l.428-.039a.75.75 0 0 0-.994-1.455L9.045 1.115z"></path></svg> Great Snuggler</span>
|
|
<span class="text-sm text-blue-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"></path><path d="M17 7h-4v4h-2V7h-4V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2z"></path></svg> House Trained</span>
|
|
</div>
|
|
<button class="btn-primary mt-5 w-full bg-orange-500 text-white py-3 rounded-lg font-semibold shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300">
|
|
View Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animal Card 2: Cat -->
|
|
<div class="card-shadow bg-white rounded-xl overflow-hidden border border-gray-100 group" data-type="cat">
|
|
<div class="relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1561879191-04738011c10a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Y2F0fGVufDB8fDB8fHww"
|
|
alt="Luna, a beautiful Ragdoll cat"
|
|
class="w-full h-64 object-cover transition duration-500 group-hover:scale-105">
|
|
<div class="absolute top-3 right-3 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md">CAT</div>
|
|
</div>
|
|
<div class="p-6 text-center">
|
|
<h3 class="text-3xl header-font text-gray-900 mb-1">Luna</h3>
|
|
<p class="text-gray-600 text-sm mb-3">Ragdoll</p>
|
|
<p class="text-gray-700 mb-4 text-sm">Luna is a gentle, affectionate companion who loves cuddles and quiet evenings. She thrives with a calm household.</p>
|
|
<div class="flex justify-center space-x-3">
|
|
<span class="text-sm text-green-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.045 1.115l-.428.039a.75.75 0 0 0-.994 1.455l.039.428a.75.75 0 0 0 1.455.994l.428-.039a.75.75 0 0 0-.994-1.455L9.045 1.115z"></path></svg> Cuddle Expert</span>
|
|
<span class="text-sm text-blue-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"></path><path d="M17 7h-4v4h-2V7h-4V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2z"></path></svg> Indoor Friendly</span>
|
|
</div>
|
|
<button class="btn-primary mt-5 w-full bg-orange-500 text-white py-3 rounded-lg font-semibold shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300">
|
|
View Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Animal Card 3: Puppy/Small Dog -->
|
|
<div class="card-shadow bg-white rounded-xl overflow-hidden border border-gray-100 group" data-type="dog">
|
|
<div class="relative overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1583645801388-f7f4533e3878?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHVwcHJ5JTIwZGVzJTIwZGVzZXJ8ZW58MHx8MHx8fDA%3D"
|
|
alt="Max, a playful puppy"
|
|
class="w-full h-6<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.23s</div> |