sloanops.admin/3031023-xyz-public
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site): Replace products page with contact and refresh branding

Browse Source 
- Remove products.html page and all references from navigation menus
- Replace products navigation links with contact page across all pages
- Update color palette from cool blues to warm amber and teal theme
- Adjust typography font declarations for better font stack support
- Add hero section emoji animation with bounce keyframe
- Implement page hero styling for inner pages
- Add about section preview component styling
- Update service pricing background to use primary color
- Enhance CTA section gradient with new color scheme
- Add testimonial card paw print emoji and styling improvements
- Fix footer quick links formatting and alignment
- Standardize HTML indentation and spacing across pages
This commit is contained in:
ksloan
2026-08-17 11:56:57 -04:00
parent ed28f9e168
commit 41f3f9f672
6 changed files with 209 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
about.html
+4 -2
View File
@@ -24,7 +24,7 @@
<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>
<li><a href="/contact.html" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
@@ -147,7 +147,9 @@
<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>
<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>
contact.html
+6 -2
View File
@@ -22,7 +22,9 @@
</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>
<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 active">Contact</a></li>
</ul>
</nav>
</div>
@@ -133,7 +135,9 @@
<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>
<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">
css/style.css
+169 -32
View File
@@ -1,26 +1,26 @@
:root {
/* Brand Colors - PRIMARY */
--color-primary: #2563eb; /* Blue-600 */
--color-primary-dark: #1d4ed8; /* Blue-700 */
--color-primary-light: #3b82f6; /* Blue-500 */
/* Brand Colors - Warm Amber/Terracotta Pet Palette */
--color-primary: #b45309; /* Amber-700 */
--color-primary-dark: #92400e; /* Amber-800 */
--color-primary-light: #d97706; /* Amber-600 */
/* Accent Colors */
--color-accent: #10b981; /* Emerald-500 */
--color-accent-dark: #059669; /* Emerald-600 */
/* Accent Colors - Soft Teal for contrast */
--color-accent: #0d9488; /* Teal-600 */
--color-accent-dark: #0f766e; /* Teal-700 */
/* Neutral Colors */
--color-bg: #f8fafc; /* Slate-50 */
--color-surface: #ffffff; /* White */
--color-border: #e2e8f0; /* Slate-200 */
--color-text: #1e293b; /* Slate-800 */
--color-text-secondary:#64748b; /* Slate-500 */
--color-text-muted: #94a3b8; /* Slate-400 */
--color-footer-bg: #0f172a; /* Slate-900 */
--color-footer-text: #94a3b8; /* Slate-400 */
/* Neutral Colors - Warm tones */
--color-bg: #fefce8; /* Warm cream */
--color-surface: #fffbeb; /* Soft ivory */
--color-border: #fde68a; /* Amber-200 */
--color-text: #451a03; /* Deep brown */
--color-text-secondary:#78350f; /* Warm brown */
--color-text-muted: #92400e; /* Muted amber */
--color-footer-bg: #1c1917; /* Stone-900 */
--color-footer-text: #d6d3d1; /* Stone-300 */
/* Typography */
--font-family-heading: Playfair+Display;
--font-family-body: Nunito+Sans;
--font-family-heading: 'Playfair Display', Georgia, serif;
--font-family-body: 'Nunito Sans', system-ui, sans-serif;
/* Layout & Spacing */
--max-width: 1200px;
@@ -248,7 +248,7 @@ img {
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--color-bg) 0%, #f0f9ff 100%);
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
padding: var(--spacing-2xl) 0 var(--spacing-xl);
text-align: center;
}
@@ -256,7 +256,7 @@ img {
.hero h1 {
font-size: 2.75rem;
margin-bottom: var(--spacing-lg);
background: linear-gradient(to right, var(--color-primary), var(--color-accent));
background: linear-gradient(to right, var(--color-primary), #dc2626);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -269,6 +269,17 @@ img {
margin: 0 auto var(--spacing-xl);
}
.hero-emoji {
font-size: 3.5rem;
margin-bottom: var(--spacing-md);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.btn {
display: inline-flex;
align-items: center;
@@ -319,6 +330,29 @@ img {
color: white;
}
.btn-full-width {
width: 100%;
}
/* Page Hero (inner pages) */
.page-hero {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: var(--spacing-2xl) 0;
text-align: center;
}
.page-hero h1 {
color: var(--color-text);
margin-bottom: var(--spacing-md);
}
.page-subheadline {
font-size: 1.125rem;
color: var(--color-text-secondary);
max-width: 650px;
margin: 0 auto;
}
/* Features Section */
.features {
padding: var(--spacing-2xl) 0;
@@ -366,6 +400,24 @@ img {
}
/* About Section */
.about-preview {
padding: var(--spacing-2xl) 0;
background-color: var(--color-surface);
text-align: center;
}
.about-preview h2 {
margin-bottom: var(--spacing-md);
}
.about-preview-text {
max-width: 650px;
margin: 0 auto var(--spacing-xl);
color: var(--color-text-secondary);
font-size: 1.1rem;
line-height: 1.8;
}
.about-content {
padding: var(--spacing-2xl) 0;
background-color: var(--color-bg);
@@ -517,7 +569,7 @@ img {
.service-price {
margin: 0 var(--spacing-lg) var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-sm);
background-color: var(--color-accent);
background-color: var(--color-primary);
color: white;
font-weight: 600;
border-radius: var(--radius-sm);
@@ -587,7 +639,7 @@ img {
/* CTA Section */
.cta-section {
padding: var(--spacing-2xl) 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #0d9488 100%);
color: white;
text-align: center;
}
@@ -636,7 +688,18 @@ img {
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-accent);
border-left: 4px solid var(--color-primary);
position: relative;
overflow: hidden;
}
.testimonial-card::after {
content: '🐾';
position: absolute;
bottom: 8px;
right: 12px;
font-size: 1.5rem;
opacity: 0.15;
}
.testimonial-text {
@@ -942,6 +1005,73 @@ img {
border: 1px solid var(--color-border);
}
/* Team Section */
.team-section {
padding: var(--spacing-2xl) 0;
background-color: var(--color-bg);
}
.team-section h2 {
text-align: center;
margin-bottom: var(--spacing-2xl);
color: var(--color-primary);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-lg);
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
.team-card {
text-align: center;
background-color: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-normal);
}
.team-card:hover {
transform: translateY(-5px);
}
.team-photo {
width: 120px;
height: 120px;
margin: 0 auto var(--spacing-md);
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--color-primary-light);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-info h3 {
margin-bottom: var(--spacing-2xs);
color: var(--color-text);
}
.team-role {
color: var(--color-primary);
font-weight: 600;
margin-bottom: var(--spacing-sm);
font-size: 0.875rem;
}
.team-bio {
color: var(--color-text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
/* Footer */
.site-footer {
background-color: var(--color-footer-bg);
@@ -1146,14 +1276,14 @@ img {
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0f172a;
--color-surface: #1e293b;
--color-border: #334155;
--color-text: #f8fafc;
--color-text-secondary: #94a3b8;
--color-text-muted: #64748b;
--color-footer-bg: #000000;
--color-footer-text: #94a3b8;
--color-bg: #1c1917;
--color-surface: #292524;
--color-border: #44403c;
--color-text: #fef3c7;
--color-text-secondary: #d6d3d1;
--color-text-muted: #a8a29e;
--color-footer-bg: #0c0a09;
--color-footer-text: #a8a29e;
}
.site-header {
@@ -1162,7 +1292,14 @@ img {
}
.hero {
background: linear-gradient(135deg, var(--color-bg) 0%, #1e293b 100%);
background: linear-gradient(135deg, #1c1917 0%, #292524 50%, #44403c 100%);
}
.hero h1 {
background: linear-gradient(to right, #fbbf24, #f59e0b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.feature-card,
index.html
+16 -5
View File
@@ -21,10 +21,10 @@
<span class="hamburger"></span>
</button>
<ul id="nav-menu" class="nav-list">
<li><a href="/" class="nav-link">Home</a></li>
<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="/products.html" class="nav-link">Products</a></li>
<li><a href="/contact.html" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
@@ -34,9 +34,10 @@
<!-- Hero Section -->
<section class="hero" aria-labelledby="hero-heading">
<div class="container">
<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" class="btn btn-primary">Book a Visit</a>
<a href="/contact.html" class="btn btn-primary">Book a Visit</a>
</div>
</section>
@@ -75,6 +76,13 @@
</section>
<!-- About Preview -->
<section class="about-preview" aria-labelledby="about-preview-heading">
<div class="container">
<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>
</section>
<!-- Testimonials -->
<section class="testimonials" aria-labelledby="testimonials-heading">
@@ -121,7 +129,10 @@
<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>
<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>
@@ -139,4 +150,4 @@
<script src="js/main.js"></script>
</body>
</html>
</html>
products.html
-91
View File
@@ -1,91 +0,0 @@
<!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>&copy; 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>
services.html
+14 -12
View File
@@ -24,7 +24,7 @@
<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>
<li><a href="/contact.html" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
@@ -53,7 +53,7 @@
<li>Water Breaks</li>
</ul>
<div class="service-price">$25/walk</div>
<a href="/contact" class="btn btn-secondary">Book a Walk</a>
<a href="/contact.html" class="btn btn-secondary">Book a Walk</a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">🐾</div>
@@ -66,7 +66,7 @@
<li>Consistent Handler</li>
</ul>
<div class="service-price">$80/week</div>
<a href="/contact" class="btn btn-secondary">Get Weekly Plan</a>
<a href="/contact.html" class="btn btn-secondary">Get Weekly Plan</a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">🏠</div>
@@ -80,7 +80,7 @@
<li>24hr Supervision</li>
</ul>
<div class="service-price">$65/night</div>
<a href="/contact" class="btn btn-secondary">Book Overnight</a>
<a href="/contact.html" class="btn btn-secondary">Book Overnight</a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">🐶</div>
@@ -93,7 +93,7 @@
<li>Nail Trim</li>
</ul>
<div class="service-price">$40</div>
<a href="/contact" class="btn btn-secondary">Book Bath</a>
<a href="/contact.html" class="btn btn-secondary">Book Bath</a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">🦴</div>
@@ -108,7 +108,7 @@
<li>Ear Cleaning</li>
</ul>
<div class="service-price">$75</div>
<a href="/contact" class="btn btn-secondary">Book Groom</a>
<a href="/contact.html" class="btn btn-secondary">Book Groom</a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">🐕</div>
@@ -121,7 +121,7 @@
<li>Confidence Building</li>
</ul>
<div class="service-price">$35/session</div>
<a href="/contact" class="btn btn-secondary">Join a Session</a>
<a href="/contact.html" class="btn btn-secondary">Join a Session</a>
</article>
<article class="service-card">
<div class="service-icon" aria-hidden="true">🐾</div>
@@ -135,7 +135,7 @@
<li>Shaded Rest Areas</li>
</ul>
<div class="service-price">$20/dog</div>
<a href="/contact" class="btn btn-secondary">Join the Pack</a>
<a href="/contact.html" class="btn btn-secondary">Join the Pack</a>
</article>
</div>
</div>
@@ -173,7 +173,7 @@
<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>
<a href="/contact.html" class="btn btn-primary">Book a Visit</a>
</div>
</section>
</main>
@@ -189,8 +189,10 @@
<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>
<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>
@@ -208,4 +210,4 @@
<script src="js/main.js"></script>
</body>
</html>
</html>