205 lines
13 KiB
HTML
205 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Compassionate Paw - Adopt Today</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Customizing Tailwind Configuration for unique typography and color palette */
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'primary-maroon': '#8B0000',
|
|
'secondary-cream': '#FAF0E6',
|
|
'terracotta-orange': '#E97451',
|
|
'deep-charcoal': '#36454F',
|
|
},
|
|
fontFamily: {
|
|
heading: ['"Playfair Display", serif'],
|
|
body: ['"Inter", sans-serif'],
|
|
},
|
|
animation: {
|
|
'float': 'float 4s ease-in-out infinite',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Custom Styles for visual flair */
|
|
.hero-bg {
|
|
background-image: url('https://images.unsplash.com/photo-1583838491795-51e0e8c22f3d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-height: 60vh;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 15px 30px rgba(139, 0, 0, 0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cta-button {
|
|
transition: background-color 0.3s, transform 0.3s;
|
|
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
|
|
}
|
|
|
|
.cta-button:hover {
|
|
background-color: #A52A2A; /* Darker red on hover */
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.floating-pet {
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% { transform: translateY(0px); }
|
|
50% { transform: translateY(-15px); }
|
|
100% { transform: translateY(0px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body bg-secondary-cream text-deep-charcoal antialiased">
|
|
|
|
<!-- Header and Navigation -->
|
|
<header class="bg-white shadow-lg sticky top-0 z-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
<h1 class="text-4xl font-heading text-primary-maroon tracking-widest">
|
|
Compassionate Paw
|
|
</h1>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#adopt" class="text-lg hover:text-terracotta-orange transition duration-200 focus:outline-none focus:ring-2 focus:ring-terracotta-orange p-1">Adopt Me</a>
|
|
<a href="#our-story" class="text-lg hover:text-terracotta-orange transition duration-200 focus:outline-none focus:ring-2 focus:ring-terracotta-orange p-1">Our Mission</a>
|
|
<a href="#donate" class="text-lg hover:text-terracotta-orange transition duration-200 focus:outline-none focus:ring-2 focus:ring-terracotta-orange p-1">Donate</a>
|
|
<a href="#contact" class="text-lg text-white bg-primary-maroon px-4 py-2 rounded-full hover:bg-deep-charcoal transition duration-200 focus:outline-none focus:ring-2 focus:ring-white">Get Involved</a>
|
|
</nav>
|
|
<button class="md:hidden text-deep-charcoal p-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-terracotta-orange" onclick="toggleMenu()">
|
|
<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>
|
|
<!-- Mobile Menu Dropdown -->
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
|
|
<div class="px-4 pt-2 pb-3 space-y-1 sm:px-6">
|
|
<a href="#adopt" class="block text-lg px-3 py-2 rounded-md text-deep-charcoal hover:bg-terracotta-orange/20 focus:outline-none focus:ring-2 focus:ring-terracotta-orange">Adopt Me</a>
|
|
<a href="#our-story" class="block text-lg px-3 py-2 rounded-md text-deep-charcoal hover:bg-terracotta-orange/20 focus:outline-none focus:ring-2 focus:ring-terracotta-orange">Our Mission</a>
|
|
<a href="#donate" class="block text-lg px-3 py-2 rounded-md text-deep-charcoal hover:bg-terracotta-orange/20 focus:outline-none focus:ring-2 focus:ring-terracotta-orange">Donate</a>
|
|
<a href="#contact" class="block text-lg px-3 py-2 rounded-md text-white bg-primary-maroon hover:bg-deep-charcoal focus:outline-none focus:ring-2 focus:ring-white text-center">Get Involved</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero-bg relative flex items-center justify-center text-center text-white pt-16 pb-20 shadow-inner">
|
|
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
|
|
<div class="relative z-10 max-w-4xl px-4">
|
|
<h2 class="text-6xl md:text-7xl font-heading mb-4 leading-tight drop-shadow-lg">
|
|
Find Your Furry Soulmate
|
|
</h2>
|
|
<p class="text-xl md:text-2xl mb-8 font-light drop-shadow-md">
|
|
Every wagging tail, every gentle purr, deserves a loving home. Open your heart and welcome a companion.
|
|
</p>
|
|
<a href="#adopt" class="cta-button inline-block bg-terracotta-orange text-white text-xl px-10 py-4 rounded-full shadow-xl uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-terracotta-orange/50">
|
|
Meet Adoptable Pets
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Adoption Showcase Section -->
|
|
<section id="adopt" class="py-20 bg-secondary-cream border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12">
|
|
<h3 class="text-5xl font-heading text-primary-maroon mb-3">
|
|
Wonderful Companions Waiting
|
|
</h3>
|
|
<p class="text-xl text-deep-charcoal font-light">
|
|
Browse profiles and start the journey to forever home.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Pet Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
<!-- Pet Card 1 -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover cursor-pointer border-t-8 border-terracotta-orange">
|
|
<div class="aspect-w-4 aspect-h-3 overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1593645510748-c6782a946d36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80"
|
|
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Dog+Profile';"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
|
</div>
|
|
<div class="p-6">
|
|
<h4 class="text-3xl font-heading text-primary-maroon mb-2">Barnaby</h4>
|
|
<p class="text-lg text-deep-charcoal mb-3">Golden Retriever Mix</p>
|
|
<p class="text-deep-charcoal mb-4 text-sm">Loves long walks, cuddles, and sunny naps. A loyal friend seeking a family to share adventures with.</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xl font-bold text-terracotta-orange">Age: 3 Yrs</span>
|
|
<button class="cta-button bg-primary-maroon text-white px-6 py-3 text-lg rounded-lg uppercase focus:outline-none focus:ring-4 focus:ring-primary-maroon/50">
|
|
View Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pet Card 2 -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover cursor-pointer border-t-8 border-primary-maroon">
|
|
<div class="aspect-w-4 aspect-h-3 overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1543424350-631677a8d392?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80"
|
|
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Cat+Profile';"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
|
</div>
|
|
<div class="p-6">
|
|
<h4 class="text-3xl font-heading text-primary-maroon mb-2">Luna</h4>
|
|
<p class="text-lg text-deep-charcoal mb-3">Ragdoll Cat</p>
|
|
<p class="text-deep-charcoal mb-4 text-sm">A gentle soul who excels at lap-sitting. Perfect for quiet evenings and cozy living spaces.</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xl font-bold text-terracotta-orange">Age: 1 Yr</span>
|
|
<button class="cta-button bg-primary-maroon text-white px-6 py-3 text-lg rounded-lg uppercase focus:outline-none focus:ring-4 focus:ring-primary-maroon/50">
|
|
View Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pet Card 3 (Animated Example) -->
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover cursor-pointer border-t-8 border-terracotta-orange floating-pet">
|
|
<div class="aspect-w-4 aspect-h-3 overflow-hidden">
|
|
<img src="https://images.unsplash.com/photo-1552559429-250f8c603558?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1080&q=80"
|
|
onerror="this.onerror=null;this.src='https://via.placeholder.com/400x300?text=Small+Pet';"
|
|
class="w-full h-full object-cover transition duration-500 group-hover:scale-105">
|
|
</div>
|
|
<div class="p-6">
|
|
<h4 class="text-3xl font-heading text-primary-maroon mb-2">Pip</h4>
|
|
<p class="text-lg text-deep-charcoal mb-3">Small Terrier Mix</p>
|
|
<p class="text-deep-charcoal mb-4 text-sm">An energetic pup who thrives with playtime and adventure. Ready to bring joy to your daily routine!</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-xl font-bold text-terracotta-orange">Age: 6 Mo</span>
|
|
<button class="cta-button bg-primary-maroon text-white px-6 py-3 text-lg rounded-lg uppercase focus:outline-none focus:ring-4 focus:ring-primary-maroon/50">
|
|
View Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-12">
|
|
<a href="#" class="text-xl text-primary-maroon hover:text-terracotta-orange font-medium border-2 border-primary-maroon px-8 py-3 rounded-full focus:outline-none focus:ring-4 focus:ring-terracotta-orange/50 transition duration-300">
|
|
View All Animals
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Mission / Story Section -->
|
|
<section id="our-story" class="py-24 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<!-- Text Content -->
|
|
<div>
|
|
<h3 class="text-5xl font-heading text-primary-maroon mb-4 leading-snug">
|
|
Our Commitment to Second Chances
|
|
</h3>
|
|
<p class="text-xl text-deep-charcoal mb-6 leading-relaxed">
|
|
Compassionate Paw was founded on the belief that every animal deserves a safe, loving, and permanent home. We are not just a shelter; we are a bridge between vulnerable animals and the loving families they deserve.
|
|
</p>
|
|
<p class="text-xl text-deep-charcoal mb-8 leading-relaxed border-l-<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.27s</div> |