Regenerated site from SloanOps template
This commit is contained in:
ksloan
@@ -0,0 +1,93 @@
|
|||||||
|
name: Deploy to Cloudflare Pages
|
||||||
|
|
||||||
|
# Preview deployments are created for pushes to any non-master branch.
|
||||||
|
# Pushing to master creates the production deployment (served on custom domain).
|
||||||
|
# Non-master branches get a unique preview URL for client review.
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
env:
|
||||||
|
# These will be replaced during site creation
|
||||||
|
CLOUDFLARE_PROJECT_NAME: 3031023-xyz
|
||||||
|
CLOUDFLARE_CUSTOM_DOMAIN: 3031023.xyz
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
deploy:
|
||||||
|
name: Deploy to Cloudflare Pages
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout code
|
||||||
|
uses: https://github.com/actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Deploy to Cloudflare Pages (Direct Upload)
|
||||||
|
run: npx wrangler pages deploy . --project-name=${{ env.CLOUDFLARE_PROJECT_NAME }} --branch=${GITHUB_REF#refs/heads/}
|
||||||
|
env:
|
||||||
|
CLOUDFLARE_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
|
||||||
|
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
|
||||||
|
|
||||||
|
- name: Attach custom domain (master only)
|
||||||
|
if: github.ref == 'refs/heads/master'
|
||||||
|
run: |
|
||||||
|
echo "Adding domain ${CLOUDFLARE_CUSTOM_DOMAIN} to project ${CLOUDFLARE_PROJECT_NAME}..."
|
||||||
|
BODY=$(printf '{"name": "%s"}' "${CLOUDFLARE_CUSTOM_DOMAIN}")
|
||||||
|
HTTP_STATUS=$(curl -s -o /tmp/cf_response.txt -w "%{http_code}" -X POST \
|
||||||
|
"https://api.cloudflare.com/client/v4/accounts/${CLOUDFLARE_ACCOUNT_ID}/pages/projects/${CLOUDFLARE_PROJECT_NAME}/domains" \
|
||||||
|
-H "Authorization: Bearer *** " \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d "${BODY}")
|
||||||
|
echo "HTTP Status: ${HTTP_STATUS}"
|
||||||
|
echo "Response: $(cat /tmp/cf_response.txt)"
|
||||||
|
if [ "${HTTP_STATUS}" -ge 200 ] && [ "${HTTP_STATUS}" -lt 300 ]; then
|
||||||
|
echo "Domain attached successfully"
|
||||||
|
else
|
||||||
|
echo "::warning::Domain attach returned ${HTTP_STATUS} - check domain and permissions"
|
||||||
|
fi
|
||||||
|
env:
|
||||||
|
CR_AUTH: ${{ secrets.CF_API_TOKEN }}
|
||||||
|
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
|
||||||
|
|
||||||
|
- name: Create DNS record for custom domain
|
||||||
|
if: github.ref == 'refs/heads/master'
|
||||||
|
run: |
|
||||||
|
# Extract root zone from the custom domain (e.g. product-example.sloanops.com -> sloanops.com)
|
||||||
|
ROOT_ZONE="${CLOUDFLARE_CUSTOM_DOMAIN#*.}"
|
||||||
|
echo "Root zone: ${ROOT_ZONE}"
|
||||||
|
# Look up the Cloudflare zone ID
|
||||||
|
ZONE_RESPONSE=$(curl -s -X GET "https://api.cloudflare.com/client/v4/zones?name=${ROOT_ZONE}" \
|
||||||
|
-H "Authorization: Bearer *** " \
|
||||||
|
-H "Content-Type: application/json")
|
||||||
|
ZONE_ID=$(echo "$ZONE_RESPONSE" | python3 -c "import sys,json; data=json.load(sys.stdin); print(data.get('result',[{}])[0].get('id',''))" 2>/dev/null || echo "")
|
||||||
|
if [ -z "$ZONE_ID" ]; then
|
||||||
|
echo "::warning::Could not find zone ID for ${ROOT_ZONE} - check Cloudflare token has Zone:Zone:Read permission"
|
||||||
|
exit 0
|
||||||
|
fi
|
||||||
|
echo "Zone ID: ${ZONE_ID}"
|
||||||
|
# Create CNAME record (skip if it already exists - idempotent)
|
||||||
|
RECORDS_RESPONSE=$(curl -s -X GET "https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/dns_records?type=CNAME&name=${CLOUDFLARE_CUSTOM_DOMAIN}" \
|
||||||
|
-H "Authorization: Bearer *** " \
|
||||||
|
-H "Content-Type: application/json")
|
||||||
|
EXISTING=$(echo "$RECORDS_RESPONSE" | python3 -c "import sys,json; data=json.load(sys.stdin); print(len(data.get('result',[])))" 2>/dev/null || echo "0")
|
||||||
|
if [ "$EXISTING" -gt 0 ]; then
|
||||||
|
echo "DNS record already exists, skipping creation"
|
||||||
|
else
|
||||||
|
BODY=$(printf '{"type":"CNAME","name":"%s","content":"%s.pages.dev","proxied":true}' "${CLOUDFLARE_CUSTOM_DOMAIN}" "${CLOUDFLARE_PROJECT_NAME}")
|
||||||
|
HTTP_STATUS=$(curl -s -o /tmp/cf_dns_response.txt -w "%{http_code}" -X POST \
|
||||||
|
"https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/dns_records" \
|
||||||
|
-H "Authorization: Bearer *** " \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d "${BODY}")
|
||||||
|
echo "DNS record HTTP Status: ${HTTP_STATUS}"
|
||||||
|
echo "Response: $(cat /tmp/cf_dns_response.txt)"
|
||||||
|
if [ "${HTTP_STATUS}" -ge 200 ] && [ "${HTTP_STATUS}" -lt 300 ]; then
|
||||||
|
echo "DNS record created successfully"
|
||||||
|
else
|
||||||
|
echo "::warning::DNS record creation returned ${HTTP_STATUS} - ensure token has Zone:DNS:Edit permission"
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
env:
|
||||||
|
CR_AUTH: ${{ secrets.CF_API_TOKEN }}
|
||||||
|
CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
|
||||||
|
CLOUDFLARE_CUSTOM_DOMAIN: ${{ env.CLOUDFLARE_CUSTOM_DOMAIN }}
|
||||||
|
CLOUDFLARE_PROJECT_NAME: ${{ env.CLOUDFLARE_PROJECT_NAME }}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
# Happy Tails Pet Care
|
||||||
|
|
||||||
|
A professional website created for Happy Tails Pet Care using SloanOps template system.
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
This site was generated using the SloanOps client onboarding system and is designed for deployment to Cloudflare Pages via Gitea Actions CI/CD.
|
||||||
|
|
||||||
|
## Customization
|
||||||
|
|
||||||
|
### Content Updates
|
||||||
|
- Edit HTML files in the root directory to update page content
|
||||||
|
- Modify images in the `images/` directory
|
||||||
|
- Update text content directly in HTML files
|
||||||
|
|
||||||
|
### Styling
|
||||||
|
- All colors, fonts, and spacing are controlled via CSS variables in `css/style.css`
|
||||||
|
- To rebrand: modify the `:root` variables at the top of `css/style.css`
|
||||||
|
- Font families can be changed in the HTML `<head>` section
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
Pushes to the `master` branch trigger automatic deployment to Cloudflare Pages.
|
||||||
|
Preview deployments are created for all other branches.
|
||||||
|
|
||||||
|
## Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
3031023-xyz/
|
||||||
|
├── index.html # Home page
|
||||||
|
├── about.html # About page (if included)
|
||||||
|
├── services.html # Services page (if included)
|
||||||
|
├── products.html # Products page (if included)
|
||||||
|
├── contact.html # Contact page
|
||||||
|
├── css/
|
||||||
|
│ └── style.css # All styles with CSS variables
|
||||||
|
├── js/
|
||||||
|
│ └── main.js # Interactive components (mobile menu, etc.)
|
||||||
|
├── images/ # Image assets
|
||||||
|
└── .gitea/
|
||||||
|
└── workflows/
|
||||||
|
└── deploy.yml # Cloudflare Pages CI/CD configuration
|
||||||
|
```
|
||||||
|
|
||||||
|
## Deployment Setup
|
||||||
|
|
||||||
|
1. Ensure Cloudflare API token and account ID are configured as secrets in your Gitea repository:
|
||||||
|
- `CF_API_TOKEN`: Your Cloudflare API token
|
||||||
|
- `CF_ACCOUNT_ID`: Your Cloudflare account ID
|
||||||
|
|
||||||
|
2. Push to the repository to trigger deployment:
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Initial commit"
|
||||||
|
git push origin master
|
||||||
|
```
|
||||||
|
|
||||||
|
3. The site will be available at: https://3031023.xyz
|
||||||
|
|
||||||
|
## Maintenance
|
||||||
|
|
||||||
|
- Update content by editing HTML files
|
||||||
|
- Update styling by modifying CSS variables in `css/style.css`
|
||||||
|
- Add new images to the `images/` directory and reference them in HTML
|
||||||
|
- For structural changes, modify the appropriate HTML template
|
||||||
+168
@@ -0,0 +1,168 @@
|
|||||||
|
<!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="About Happy Tails Pet Care - Learn about Happy Tails Pet Care, our story, values, and the dedicated team caring for Springfield dogs every day.">
|
||||||
|
<title>About | 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">Home</a></li>
|
||||||
|
<li><a href="/about.html" class="nav-link active">About</a></li>
|
||||||
|
<li><a href="/services.html" class="nav-link">Services</a></li>
|
||||||
|
<li><a href="/products.html" class="nav-link">Products</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="site-main">
|
||||||
|
<section class="page-hero" aria-labelledby="page-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="page-heading">About Happy Tails Pet Care</h1>
|
||||||
|
<p class="page-subheadline">A small team with a big love for dogs, serving Springfield since 2019.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="about-content" aria-labelledby="about-heading">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-text">
|
||||||
|
<h2 id="about-heading">Our Story</h2>
|
||||||
|
<div class="about-body">
|
||||||
|
<p>Happy Tails Pet Care was born in 2019 when founder Sarah Mitchell noticed her Springfield neighborhood lacked a truly personal dog care service.</p>
|
||||||
|
<p>What started as walking a few neighbors' dogs quickly grew into a full-service operation as word spread about Sarah's gentle approach and genuine love for every pup.</p>
|
||||||
|
<p>Today our team of five certified handlers serves over sixty families across Springfield, offering walks, grooming, overnight stays, and puppy socialization.</p>
|
||||||
|
<p>We believe every dog deserves individual attention, so we keep our client list small and our care standards high.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="about-image">
|
||||||
|
<img src="images/happy-tails-team.jpg" alt="The Happy Tails Pet Care team playing with dogs in a sunny park" loading="lazy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="values-section">
|
||||||
|
<h2>What We Stand For</h2>
|
||||||
|
<div class="values-grid">
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-icon" aria-hidden="true">🐾</div>
|
||||||
|
<h3>Compassion</h3>
|
||||||
|
<p>We treat every dog as if they were our own beloved companion</p>
|
||||||
|
</article>
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-icon" aria-hidden="true">🏠</div>
|
||||||
|
<h3>Safety First</h3>
|
||||||
|
<p>Certified handlers, secure yards, and GPS-tracked walks keep your pup protected</p>
|
||||||
|
</article>
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-icon" aria-hidden="true">🐶</div>
|
||||||
|
<h3>Trust</h3>
|
||||||
|
<p>Transparent communication and photo updates so you always know your dog is happy</p>
|
||||||
|
</article>
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-icon" aria-hidden="true">🦴</div>
|
||||||
|
<h3>Health</h3>
|
||||||
|
<p>We monitor nutrition, hydration, and energy levels on every visit</p>
|
||||||
|
</article>
|
||||||
|
<article class="value-card">
|
||||||
|
<div class="value-icon" aria-hidden="true">🐕</div>
|
||||||
|
<h3>Community</h3>
|
||||||
|
<p>Building lasting bonds between neighbors, families, and their four-legged friends</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="team-section" aria-labelledby="team-heading">
|
||||||
|
<h2 id="team-heading">Meet Our Pack</h2>
|
||||||
|
<div class="team-grid">
|
||||||
|
<article class="team-card">
|
||||||
|
<div class="team-photo">
|
||||||
|
<img src="images/sarah-mitchell.jpg" alt="Sarah Mitchell" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="team-info">
|
||||||
|
<h3>Sarah Mitchell</h3>
|
||||||
|
<p class="team-role">Head Groomer</p>
|
||||||
|
<p class="team-bio">Certified grooming specialist with ten years of experience and a gentle touch</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="team-card">
|
||||||
|
<div class="team-photo">
|
||||||
|
<img src="images/marcus-rivera.jpg" alt="Marcus Rivera" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="team-info">
|
||||||
|
<h3>Marcus Rivera</h3>
|
||||||
|
<p class="team-role">Lead Trainer</p>
|
||||||
|
<p class="team-bio">Positive reinforcement expert who has trained over 200 dogs</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="team-card">
|
||||||
|
<div class="team-photo">
|
||||||
|
<img src="images/emily-chen.jpg" alt="Emily Chen" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="team-info">
|
||||||
|
<h3>Emily Chen</h3>
|
||||||
|
<p class="team-role">Pack Walker</p>
|
||||||
|
<p class="team-bio">Marathon runner turned dog walker who keeps every pup exercised and happy</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="team-card">
|
||||||
|
<div class="team-photo">
|
||||||
|
<img src="images/david-okonkwo.jpg" alt="David Okonkwo" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="team-info">
|
||||||
|
<h3>David Okonkwo</h3>
|
||||||
|
<p class="team-role">Overnight Caretaker</p>
|
||||||
|
<p class="team-bio">Night owl who ensures dogs feel safe and cozy during sleepovers</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</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="/products.html">Products</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></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+155
@@ -0,0 +1,155 @@
|
|||||||
|
<!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="Contact Happy Tails Pet Care - Get in touch with Happy Tails Pet Care to schedule dog walking, grooming, or any of our caring pet services in Springfield.">
|
||||||
|
<title>Contact | 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">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="/products.html" class="nav-link">Products</a></li> <li><a href="/contact.html" class="nav-link active">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="site-main">
|
||||||
|
<section class="page-hero" aria-labelledby="page-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="page-heading">Contact Us</h1>
|
||||||
|
<p class="page-subheadline">We would love to hear from you. Reach out to schedule a visit or ask us anything about our dog care services.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="contact-section" aria-labelledby="contact-heading">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h2 id="contact-heading">Get in Touch</h2>
|
||||||
|
<p>Whether you need daily walks, a fresh groom, or overnight care, we are here to help. Fill out the form below or reach us directly and we will get back to you within one business day.</p>
|
||||||
|
|
||||||
|
<div class="contact-methods">
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="method-icon" aria-hidden="true">📍</div>
|
||||||
|
<div class="method-content">
|
||||||
|
<h3>Visit Us</h3>
|
||||||
|
<address>742 Evergreen Terrace, Springfield, IL 62704</address>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="method-icon" aria-hidden="true">📞</div>
|
||||||
|
<div class="method-content">
|
||||||
|
<h3>Call Us</h3>
|
||||||
|
<p><a href="tel:(555) 742-9283">(555) 742-9283</a></p>
|
||||||
|
<p class="method-note">Mon-Fri 7am-6pm CST</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-method">
|
||||||
|
<div class="method-icon" aria-hidden="true">✉️</div>
|
||||||
|
<div class="method-content">
|
||||||
|
<h3>Email Us</h3>
|
||||||
|
<p><a href="mailto:hello@3031023.xyz">hello@3031023.xyz</a></p>
|
||||||
|
<p class="method-note">Within 24 business hours</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-form-wrapper">
|
||||||
|
<h2>Send Us a Message</h2>
|
||||||
|
<form id="contact-form" class="contact-form" action="https://formsubmit.co/hello@3031023.xyz" method="POST">
|
||||||
|
<input type="hidden" name="_subject" value="New Inquiry from Happy Tails Pet Care">
|
||||||
|
<input type="hidden" name="_next" value="">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="name">Name <span class="required" aria-hidden="true">*</span></label>
|
||||||
|
<input type="text" id="name" name="name" required autocomplete="name">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email <span class="required" aria-hidden="true">*</span></label>
|
||||||
|
<input type="email" id="email" name="email" required autocomplete="email">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">Phone</label>
|
||||||
|
<input type="tel" id="phone" name="phone" autocomplete="tel">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="subject">Subject</label>
|
||||||
|
<select id="subject" name="subject">
|
||||||
|
<option value="">Select a topic</option>
|
||||||
|
<option value="Dog Walking">Dog Walking</option>
|
||||||
|
<option value="Grooming">Grooming</option>
|
||||||
|
<option value="Overnight Care">Overnight Care</option>
|
||||||
|
<option value="Puppy Training">Puppy Training</option>
|
||||||
|
<option value="General Inquiry">General Inquiry</option>
|
||||||
|
<option value="Scheduling">Scheduling</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Message <span class="required" aria-hidden="true">*</span></label>
|
||||||
|
<textarea id="message" name="message" rows="6" required placeholder="How can we help you?"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary btn-full-width">Send Message</button>
|
||||||
|
|
||||||
|
<p class="form-note" aria-live="polite"></p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</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="/products.html">Products</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></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+1201
File diff suppressed because it is too large
Load Diff
+142
@@ -0,0 +1,142 @@
|
|||||||
|
<!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">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="/products.html" class="nav-link">Products</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="site-main">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero" aria-labelledby="hero-heading">
|
||||||
|
<div class="container">
|
||||||
|
<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" 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 -->
|
||||||
|
|
||||||
|
<!-- 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="/products.html">Products</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></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+136
@@ -0,0 +1,136 @@
|
|||||||
|
// Mobile Menu Toggle
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const navToggle = document.querySelector('.nav-toggle');
|
||||||
|
const navMenu = document.getElementById('nav-menu');
|
||||||
|
|
||||||
|
if (navToggle && navMenu) {
|
||||||
|
navToggle.addEventListener('click', function() {
|
||||||
|
const expanded = this.getAttribute('aria-expanded') === 'true' || false;
|
||||||
|
this.setAttribute('aria-expanded', !expanded);
|
||||||
|
navMenu.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close mobile menu when clicking outside
|
||||||
|
document.addEventListener('click', function(event) {
|
||||||
|
if (navToggle && navMenu) {
|
||||||
|
const isClickInsideNav = navToggle.contains(event.target) || navMenu.contains(event.target);
|
||||||
|
if (!isClickInsideNav && navMenu.classList.contains('active')) {
|
||||||
|
navToggle.setAttribute('aria-expanded', 'false');
|
||||||
|
navMenu.classList.remove('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// FAQ Accordion
|
||||||
|
const faqItems = document.querySelectorAll('.faq-item');
|
||||||
|
faqItems.forEach(item => {
|
||||||
|
const question = item.querySelector('.faq-question');
|
||||||
|
if (question) {
|
||||||
|
question.addEventListener('click', () => {
|
||||||
|
const isActive = item.classList.contains('active');
|
||||||
|
// Close all items
|
||||||
|
faqItems.forEach(i => i.classList.remove('active'));
|
||||||
|
// Open clicked item if it wasn't active
|
||||||
|
if (!isActive) {
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Smooth scrolling for anchor links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function(e) {
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
e.preventDefault();
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Back to top button
|
||||||
|
const backToTopButton = document.createElement('button');
|
||||||
|
backToTopButton.innerHTML = '▲'; // Up arrow
|
||||||
|
backToTopButton.className = 'back-to-top';
|
||||||
|
backToTopButton.setAttribute('aria-label', 'Back to top');
|
||||||
|
document.body.appendChild(backToTopButton);
|
||||||
|
|
||||||
|
backToTopButton.addEventListener('click', () => {
|
||||||
|
window.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (window.pageYOffset > 300) {
|
||||||
|
backToTopButton.classList.add('visible');
|
||||||
|
} else {
|
||||||
|
backToTopButton.classList.remove('visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form submissions (if using Formspree or similar)
|
||||||
|
const forms = document.querySelectorAll('.contact-form');
|
||||||
|
forms.forEach(form => {
|
||||||
|
form.addEventListener('submit', function(e) {
|
||||||
|
// This would typically be handled by the form service
|
||||||
|
// For now, we'll prevent default and show a message
|
||||||
|
e.preventDefault();
|
||||||
|
const formNote = this.querySelector('.form-note');
|
||||||
|
if (formNote) {
|
||||||
|
formNote.textContent = 'Thank you for your message! We will get back to you soon.';
|
||||||
|
formNote.style.color = '#10b981';
|
||||||
|
this.reset();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tab functionality for product categories
|
||||||
|
const tabButtons = document.querySelectorAll('.category-tab');
|
||||||
|
tabButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
const tabSlug = button.getAttribute('aria-controls');
|
||||||
|
const tabPanel = document.getElementById(tabSlug);
|
||||||
|
|
||||||
|
// Remove active class from all tabs and panels
|
||||||
|
tabButtons.forEach(btn => btn.classList.remove('active'));
|
||||||
|
document.querySelectorAll('.category-panel').forEach(panel => panel.classList.remove('active'));
|
||||||
|
|
||||||
|
// Add active class to clicked tab and corresponding panel
|
||||||
|
button.classList.add('active');
|
||||||
|
if (tabPanel) {
|
||||||
|
tabPanel.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
const header = document.querySelector('.site-header');
|
||||||
|
let lastScroll = 0;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const currentScroll = window.pageYOffset;
|
||||||
|
|
||||||
|
if (currentScroll <= 0) {
|
||||||
|
header.classList.remove('scroll-up');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentScroll > lastScroll && !header.classList.contains('scroll-down')) {
|
||||||
|
// Scrolling down
|
||||||
|
header.classList.remove('scroll-up');
|
||||||
|
header.classList.add('scroll-down');
|
||||||
|
} else if (currentScroll < lastScroll && header.classList.contains('scroll-down')) {
|
||||||
|
// Scrolling up
|
||||||
|
header.classList.remove('scroll-down');
|
||||||
|
header.classList.add('scroll-up');
|
||||||
|
}
|
||||||
|
lastScroll = currentScroll;
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
<!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="Happy Tails Pet Care Products - ">
|
||||||
|
<title>Products | 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">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="/products.html" class="nav-link active">Products</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="site-main">
|
||||||
|
<section class="page-hero" aria-labelledby="page-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="page-heading">Our Products</h1>
|
||||||
|
<p class="page-subheadline"></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="product-categories" aria-labelledby="categories-heading">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="category-tabs" aria-label="Product categories">
|
||||||
|
<h2 id="categories-heading" class="visually-hidden">Product Categories</h2>
|
||||||
|
<ul role="tablist">
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="category-panels">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="cta-section" aria-labelledby="cta-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="cta-heading">Ready to Schedule Your Pup?</h2>
|
||||||
|
<p>Get in touch today and let us put together the perfect care plan for your dog.</p>
|
||||||
|
<a href="/contact" class="btn btn-primary">Book a Visit</a>
|
||||||
|
</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="/products.html">Products</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></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+211
@@ -0,0 +1,211 @@
|
|||||||
|
<!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="Happy Tails Pet Care Services - Explore our dog services including walks, grooming, overnight stays, puppy socialization, and park adventures in Springfield.">
|
||||||
|
<title>Services | 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">Home</a></li>
|
||||||
|
<li><a href="/about.html" class="nav-link">About</a></li>
|
||||||
|
<li><a href="/services.html" class="nav-link active">Services</a></li>
|
||||||
|
<li><a href="/products.html" class="nav-link">Products</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="site-main">
|
||||||
|
<section class="page-hero" aria-labelledby="page-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="page-heading">Our Services</h1>
|
||||||
|
<p class="page-subheadline">From daily walks to full grooming, we provide caring and reliable dog services at fair prices.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="services-list" aria-labelledby="services-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="services-heading" class="section-title">Our Services</h2>
|
||||||
|
<div class="services-grid">
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🐕</div>
|
||||||
|
<h3>Dog Walking</h3>
|
||||||
|
<p>Leashed neighborhood walks with GPS tracking and post-walk photo updates</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>GPS Tracking</li>
|
||||||
|
<li>Photo Updates</li>
|
||||||
|
<li>Flexible Scheduling</li>
|
||||||
|
<li>Water Breaks</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$25/walk</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Book a Walk</a>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🐾</div>
|
||||||
|
<h3>Weekly Packages</h3>
|
||||||
|
<p>Five walks per week at a discounted bundle rate for regular clients</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>Five Walks</li>
|
||||||
|
<li>Priority Scheduling</li>
|
||||||
|
<li>Weekly Report</li>
|
||||||
|
<li>Consistent Handler</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$80/week</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Get Weekly Plan</a>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🏠</div>
|
||||||
|
<h3>Overnight Watching</h3>
|
||||||
|
<p>In-home overnight stays with evening and morning walks included</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>Evening Walk</li>
|
||||||
|
<li>Morning Walk</li>
|
||||||
|
<li>Feeding</li>
|
||||||
|
<li>Bedtime Routine</li>
|
||||||
|
<li>24hr Supervision</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$65/night</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Book Overnight</a>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🐶</div>
|
||||||
|
<h3>Bathing</h3>
|
||||||
|
<p>Basic bath with shampoo, blow-dry, ear cleaning, and nail trim</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>Shampoo</li>
|
||||||
|
<li>Blow-Dry</li>
|
||||||
|
<li>Ear Cleaning</li>
|
||||||
|
<li>Nail Trim</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$40</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Book Bath</a>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🦴</div>
|
||||||
|
<h3>Grooming</h3>
|
||||||
|
<p>Full grooming session including haircut, styling, teeth brushing, and spa treatment</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>Haircut</li>
|
||||||
|
<li>Styling</li>
|
||||||
|
<li>Teeth Brushing</li>
|
||||||
|
<li>Spa Treatment</li>
|
||||||
|
<li>Nail Trim</li>
|
||||||
|
<li>Ear Cleaning</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$75</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Book Groom</a>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🐕</div>
|
||||||
|
<h3>Puppy Socialization</h3>
|
||||||
|
<p>Guided playgroup sessions for puppies under one year to build confidence</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>Small Groups</li>
|
||||||
|
<li>Supervised Play</li>
|
||||||
|
<li>Basic Commands</li>
|
||||||
|
<li>Confidence Building</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$35/session</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Join a Session</a>
|
||||||
|
</article>
|
||||||
|
<article class="service-card">
|
||||||
|
<div class="service-icon" aria-hidden="true">🐾</div>
|
||||||
|
<h3>Dog Park Adventures</h3>
|
||||||
|
<p>Supervised group outings to local dog parks for exercise and socialization</p>
|
||||||
|
<ul class="service-features">
|
||||||
|
<li>Group Play</li>
|
||||||
|
<li>Exercise</li>
|
||||||
|
<li>Socialization</li>
|
||||||
|
<li>Fresh Water</li>
|
||||||
|
<li>Shaded Rest Areas</li>
|
||||||
|
</ul>
|
||||||
|
<div class="service-price">$20/dog</div>
|
||||||
|
<a href="/contact" class="btn btn-secondary">Join the Pack</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="process-section" aria-labelledby="process-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="process-heading" class="section-title">How It Works</h2>
|
||||||
|
<div class="process-steps">
|
||||||
|
<article class="process-step">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3>Reach Out</h3>
|
||||||
|
<p>Contact us by phone, email, or form to tell us about your dog and what you need</p>
|
||||||
|
</article>
|
||||||
|
<article class="process-step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3>Meet and Greet</h3>
|
||||||
|
<p>We schedule a free visit so your dog can get comfortable with their handler</p>
|
||||||
|
</article>
|
||||||
|
<article class="process-step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3>Start Services</h3>
|
||||||
|
<p>Pick your plan and we begin caring for your pup on the agreed schedule</p>
|
||||||
|
</article>
|
||||||
|
<article class="process-step">
|
||||||
|
<div class="step-number">4</div>
|
||||||
|
<h3>Stay Connected</h3>
|
||||||
|
<p>Receive photo updates and daily notes after every visit or stay</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="cta-section" aria-labelledby="cta-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="cta-heading">Ready to Schedule Your Pup?</h2>
|
||||||
|
<p>Get in touch today and let us put together the perfect care plan for your dog.</p>
|
||||||
|
<a href="/contact" class="btn btn-primary">Book a Visit</a>
|
||||||
|
</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="/products.html">Products</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></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user