ksloan
60e616ed25
- Replace gradient backgrounds with high-quality imagery for hero and page sections - Add 10 new pet care and team member photos (hero, services, team profiles) - Implement overlay system for hero sections with improved text contrast and readability - Restructure hero markup with overlay div and hero-content wrapper for proper layering - Convert about preview section to two-column grid layout with image and content - Update footer credits to include photo attribution to Unsplash - Enhance dark mode styling for hero sections with adjusted overlay gradients - Add responsive grid layout for about section that stacks on mobile devices - Improve visual hierarchy and brand presentation across all pages
162 lines
8.7 KiB
HTML
162 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Professional dog walking, grooming, and pet care services for your beloved furry family members in Springfield.">
|
|
<title>Happy Tails Pet Care</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Nunito+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<a href="/" class="logo" aria-label="Happy Tails Pet Care - Home">
|
|
<span class="logo-text">Happy Tails</span>
|
|
</a>
|
|
<nav class="main-nav" aria-label="Main navigation">
|
|
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Toggle navigation">
|
|
<span class="hamburger"></span>
|
|
</button>
|
|
<ul id="nav-menu" class="nav-list">
|
|
<li><a href="/" class="nav-link active">Home</a></li>
|
|
<li><a href="/about.html" class="nav-link">About</a></li>
|
|
<li><a href="/services.html" class="nav-link">Services</a></li>
|
|
<li><a href="/contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="site-main">
|
|
<!-- Hero Section -->
|
|
<section class="hero" aria-labelledby="hero-heading">
|
|
<div class="hero-overlay"></div>
|
|
<div class="container hero-content">
|
|
<p class="hero-emoji" aria-hidden="true">🐾</p>
|
|
<h1 id="hero-heading">Your Dog Deserves the Best Day Ever</h1>
|
|
<p class="hero-subheadline">Trusted dog walking, grooming, and overnight care from people who truly love dogs.</p>
|
|
<a href="/contact.html" class="btn btn-primary">Book a Visit</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Value Props / Features -->
|
|
<section class="features" aria-labelledby="features-heading">
|
|
<div class="container">
|
|
<h2 id="features-heading" class="section-title">Why Happy Tails</h2>
|
|
<div class="features-grid">
|
|
<article class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">🐕</div>
|
|
<h3>Personalized Walks</h3>
|
|
<p>Every dog gets one-on-one attention on routes tailored to their energy level</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">🐾</div>
|
|
<h3>Gentle Grooming</h3>
|
|
<p>Calm and patient bathing and styling for dogs of all breeds and sizes</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">🏠</div>
|
|
<h3>Safe Overnights</h3>
|
|
<p>Your pup sleeps in a cozy home environment with 24-hour supervision</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">🐶</div>
|
|
<h3>Puppy Experts</h3>
|
|
<p>Specialized socialization and gentle training for young dogs</p>
|
|
</article>
|
|
<article class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">🦴</div>
|
|
<h3>Trusted Pack Leaders</h3>
|
|
<p>Certified handlers with years of experience and genuine love for dogs</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Preview -->
|
|
<section class="about-preview" aria-labelledby="about-preview-heading">
|
|
<div class="container">
|
|
<div class="about-preview-grid">
|
|
<div class="about-preview-image">
|
|
<img src="images/dog-walking.jpg" alt="Happy dog being walked through a sunny neighborhood" loading="lazy">
|
|
</div>
|
|
<div class="about-preview-content">
|
|
<h2 id="about-preview-heading" class="section-title">Meet the Team</h2>
|
|
<p class="about-preview-text">We are a small crew of dog lovers dedicated to keeping your pups happy and healthy. Every handler on our team is certified and genuinely passionate about dogs.</p>
|
|
<a href="/about.html" class="btn btn-secondary">Learn About Us</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section class="testimonials" aria-labelledby="testimonials-heading">
|
|
<div class="container">
|
|
<h2 id="testimonials-heading" class="section-title">What Our Clients Say</h2>
|
|
<div class="testimonials-grid">
|
|
<blockquote class="testimonial-card">
|
|
<p class="testimonial-text">"Our dog Max used to hate bath time but the grooming team made him actually enjoy it. He comes home smelling great every time!"</p>
|
|
<footer class="testimonial-author">
|
|
<cite>Jennifer Walsh</cite>
|
|
<span class="author-role">Dog Owner</span> </footer>
|
|
</blockquote>
|
|
<blockquote class="testimonial-card">
|
|
<p class="testimonial-text">"The weekly walking package has been a lifesaver. Marcus always sends photos and Max gets so excited when he sees him arrive."</p>
|
|
<footer class="testimonial-author">
|
|
<cite>Tom Nguyen</cite>
|
|
<span class="author-role">Dog Owner</span> </footer>
|
|
</blockquote>
|
|
<blockquote class="testimonial-card">
|
|
<p class="testimonial-text">"We were nervous about overnight stays but David made our puppy feel right at home. Now she wags her tail when we drop her off."</p>
|
|
<footer class="testimonial-author">
|
|
<cite>Lisa Patel</cite>
|
|
<span class="author-role">Puppy Owner</span> </footer>
|
|
</blockquote>
|
|
<blockquote class="testimonial-card">
|
|
<p class="testimonial-text">"The puppy socialization sessions helped our shy rescue come out of her shell. Truly wonderful and patient trainers."</p>
|
|
<footer class="testimonial-author">
|
|
<cite>Rachel Adams</cite>
|
|
<span class="author-role">Rescue Dog Mom</span> </footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<p class="footer-logo">Happy Tails</p>
|
|
<p class="footer-tagline">Devoted care for happy dogs every single day</p>
|
|
</div>
|
|
<nav class="footer-nav" aria-label="Footer navigation">
|
|
<h3>Quick Links</h3>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/about.html">About</a></li>
|
|
<li><a href="/services.html">Services</a></li>
|
|
<li><a href="/contact.html">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
<address class="footer-contact" aria-label="Contact information">
|
|
<h3>Contact</h3>
|
|
<p>742 Evergreen Terrace, Springfield, IL 62704</p>
|
|
<p><a href="tel:(555) 742-9283">(555) 742-9283</a></p>
|
|
<p><a href="mailto:hello@3031023.xyz">hello@3031023.xyz</a></p>
|
|
</address>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Happy Tails Pet Care. All rights reserved.</p>
|
|
<p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a> · Photos by <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|