Refactor code structure and remove redundant changes
This commit is contained in:
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Paws & Purpose Adoption Center</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
.custom-focus { outline: 2px solid #3B82F6; outline-offset: 2px; }
|
||||
.hero-image { max-height: 600px; object-fit: cover; transition: transform 0.3s ease; }
|
||||
.hero-image:hover { transform: scale(1.05); }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
.fade-in { animation: fadeIn 1s ease-in-out; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-800 font-sans">
|
||||
<header class="bg-gray-100 shadow-md">
|
||||
<div class="container mx-auto px-4 py-10 flex flex-col sm:flex-row items-center">
|
||||
<div class="text-3xl font-bold text-indigo-600">Paws & Purpose</div>
|
||||
<div class="ml-8 text-gray-600">
|
||||
Helping pets find forever homes since 2010
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto px-4 py-10">
|
||||
<section class="hero py-20">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<img
|
||||
src="https://images.pexels.com/photos/16465597/pexels-photo-16465597.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200"
|
||||
alt="A cute dog behind a wire fence in a shelter enclosure, looking towards the camera."
|
||||
class="hero-image fade-in mt-10"
|
||||
>
|
||||
<div class="mt-6 text-center">
|
||||
<h2 class="text-4xl font-bold text-gray-900">Find Your Forever Friend</h2>
|
||||
<p class="mt-4 text-lg text-gray-700">Compassionate care meets lifelong companionship</p>
|
||||
<a href="#about" class="btn bg-indigo-600 text-white px-6 py-3 rounded shadow hover:shadow-lg focus:outline-none custom-focus">Explore Adoption Process</a>
|
||||
</div>
|
||||
<div class="mt-8 text-center text-gray-600">
|
||||
Photo by Mia X on Pexels
|
||||
<a href="https://www.pexels.com/photo/cute-dog-standing-behind-fence-16465597/" class="ml-2 text-blue-500 underline hover:no-underline">View Source</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h3 class="text-3xl font-bold text-gray-900 mb-8">Our Mission</h3>
|
||||
<p class="text-lg text-gray-700">
|
||||
At Paws & Purpose, we believe every animal deserves a loving home. With over 200 pets adopted monthly, we focus on matching pets with families based on lifestyle, preferences, and behavior assessments. Our center partners with local rescues and provides free veterinary care for the first month.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-20 bg-white">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h3 class="text-3xl font-bold text-indigo-600 mb-8">Why Choose Us?</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-10">
|
||||
<div class="p-6 border-gray-100 rounded-lg shadow">
|
||||
<h4 class="text-2xl font-bold text-indigo-600">Personalized Matching</h4>
|
||||
<p class="text-lg">Our counselors spend 1+ hours with each adopter to ensure compatibility</p>
|
||||
</div>
|
||||
<div class="p-6 border-gray-100 rounded-lg shadow">
|
||||
<h4 class="text-2xl font-bold text-indigo-600">No Adoption Fees</h4>
|
||||
<p class="text-lg">We cover all necessary vaccinations and microchipping at no cost</p>
|
||||
</div>
|
||||
<div class="p-6 border-gray-100 rounded-lg shadow">
|
||||
<h4 class="text-2xl font-bold text-indigo-600">Lifelong Support</h4>
|
||||
<p class="text-lg">Post-adoption check-ins and access to a community forum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="py-20 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto text-center">
|
||||
<h3 class="text-3xl font-bold text-gray-900 mb-8">Ready to Adopt?</h3>
|
||||
<form class="mt-8 max-w-md mx-auto">
|
||||
<div class="mb-4">
|
||||
<input type="text" name="name" placeholder="Your Name" class="w-full px-4 py-3 border rounded focus:outline-none custom-focus">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<input type="email" name="email" placeholder="Your Email" class="w-full px-4 py-3 border rounded focus:outline-none custom-focus">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<textarea name="message" placeholder="Your Message" rows="5" class="w-full px-4 py-3 border rounded focus:outline-none custom-focus"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn bg-indigo-600 text-white px-6 py-3 rounded shadow hover:shadow-lg focus:outline-none custom-focus">Send Inquiry</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-gray-900 text-white py-8">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<p>© 2023 Paws & Purpose Adoption Center. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<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 49.20s</div></body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user