John Loper II
061a7a16c4
- lawn-care.html: 7 services (mowing, leaves, pick-up, edging, mulch, weeds, garden beds) - home-services.html: 9 services (gutters, windows, snow, wood, porch, trash cans, pressure wash, house wash, seasonal) - auto-care.html: 8 services (basic wash, interior detail, full detail, mobile, trash run, gas fill, jump start, wipers) - moving.html: 8 services (furniture, junk, mattress, college moves, garage, donations, appliances, lumber/soil) Each page includes: - Dedicated nav with Services dropdown linking all 4 categories - Category-specific hero with matching accent color - Service card grid with featured card - Pricing note and contact form with hidden service_category field - Full SEO (title, description, OG tags, Twitter card, canonical, JSON-LD Service schema) - Back to all services breadcrumb - Cross-links to sibling category pages in footer - Same CSS/fonts/mobile nav as main site
494 lines
23 KiB
HTML
494 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lawn & Garden Services | LoperBoys — Warsaw, Coshocton, OH</title>
|
|
<meta name="description" content="Professional lawn mowing, leaf raking, edging, mulching, and garden care in Warsaw, Coshocton, and surrounding areas. Honest prices, reliable service. Call 220-200-4022.">
|
|
<meta name="keywords" content="lawn mowing, leaf raking, lawn pickup, edging, trimming, mulching, weed control, garden bed cleanup, lawn care, Warsaw OH, Coshocton, LoperBoys">
|
|
<meta name="author" content="LoperBoys">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://loperboys.com/lawn-care.html">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://loperboys.com/lawn-care.html">
|
|
<meta property="og:title" content="Lawn & Garden Services | LoperBoys — Warsaw, Coshocton, OH">
|
|
<meta property="og:description" content="Professional lawn mowing, leaf raking, edging, mulching, and garden care in Warsaw, Coshocton, and surrounding areas.">
|
|
<meta property="og:image" content="https://loperboys.com/img/og-banner.png">
|
|
<meta property="og:locale" content="en_US">
|
|
<meta property="og:site_name" content="LoperBoys">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:url" content="https://loperboys.com/lawn-care.html">
|
|
<meta name="twitter:title" content="Lawn & Garden Services | LoperBoys — Warsaw, Coshocton, OH">
|
|
<meta name="twitter:description" content="Professional lawn mowing, leaf raking, edging, mulching, and garden care in Warsaw, Coshocton, and surrounding areas.">
|
|
<meta name="twitter:image" content="https://loperboys.com/img/og-banner.png">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
|
<link rel="apple-touch-icon" href="img/favicon.svg">
|
|
|
|
<!-- Structured Data (Service) -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Service",
|
|
"serviceType": "Lawn & Garden Services",
|
|
"provider": {
|
|
"@type": "LocalBusiness",
|
|
"name": "LoperBoys",
|
|
"url": "https://loperboys.com",
|
|
"telephone": "+1-220-200-4022",
|
|
"areaServed": {
|
|
"@type": "Place",
|
|
"name": "Warsaw, Coshocton, and surrounding areas, Ohio"
|
|
}
|
|
},
|
|
"hasOfferCatalog": {
|
|
"@type": "OfferCatalog",
|
|
"name": "Lawn & Garden Services",
|
|
"itemListElement": [
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Lawn Mowing"}},
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Leaf Raking"}},
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Lawn Pick-up"}},
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Edging & Trimming"}},
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Mulching"}},
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Weed Control"}},
|
|
{"@type": "Offer", "itemOffered": {"@type": "Service", "name": "Garden Bed Cleanup"}}
|
|
]
|
|
},
|
|
"priceRange": "$"
|
|
}
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="css/style.css?v=2">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Category-specific hero for Lawn & Garden */
|
|
.cat-hero {
|
|
position: relative;
|
|
min-height: 60vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #16a34a 0%, #22c55e 40%, #15803d 70%, #16a34a 100%);
|
|
overflow: hidden;
|
|
padding: 120px 24px 80px;
|
|
}
|
|
.cat-hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
|
animation: heroFloat 8s ease-in-out infinite;
|
|
}
|
|
.cat-hero .hero-title {
|
|
font-size: clamp(2rem, 5vw, 3.2rem);
|
|
}
|
|
.cat-hero .hero-slogan {
|
|
color: #bbf7d0;
|
|
}
|
|
|
|
/* Breadcrumbs */
|
|
.breadcrumbs {
|
|
background: var(--off-white);
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--gray-light);
|
|
}
|
|
.breadcrumbs .container {
|
|
font-size: 0.9rem;
|
|
color: var(--text-mid);
|
|
}
|
|
.breadcrumbs a {
|
|
color: var(--blue-mid);
|
|
font-weight: 600;
|
|
transition: color var(--transition);
|
|
}
|
|
.breadcrumbs a:hover {
|
|
color: var(--blue-accent);
|
|
}
|
|
|
|
/* Category services section */
|
|
.cat-services {
|
|
padding: 80px 0;
|
|
background: var(--off-white);
|
|
}
|
|
|
|
/* Category service cards with green accent bar */
|
|
.cat-services .service-card::before {
|
|
background: linear-gradient(90deg, var(--green), var(--green-dark));
|
|
}
|
|
|
|
/* Pricing note */
|
|
.pricing-note {
|
|
background: linear-gradient(135deg, var(--blue-dark), var(--blue-mid));
|
|
padding: 48px 24px;
|
|
text-align: center;
|
|
color: var(--white);
|
|
}
|
|
.pricing-note p {
|
|
font-size: 1.15rem;
|
|
max-width: 700px;
|
|
margin: 0 auto 20px;
|
|
line-height: 1.7;
|
|
}
|
|
.pricing-note .accent {
|
|
color: var(--cyan-bright);
|
|
}
|
|
|
|
/* Footer cross-links */
|
|
.footer-categories {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
margin-bottom: 24px;
|
|
}
|
|
.footer-categories span {
|
|
color: rgba(255,255,255,0.4);
|
|
font-size: 0.85rem;
|
|
margin-right: 8px;
|
|
}
|
|
.footer-categories a {
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
margin: 0 8px;
|
|
transition: color var(--transition);
|
|
}
|
|
.footer-categories a:hover {
|
|
color: var(--cyan-bright);
|
|
}
|
|
.footer-categories a.active-link {
|
|
color: var(--cyan-bright);
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar" id="navbar">
|
|
<div class="nav-container">
|
|
<a href="index.html" class="logo">
|
|
<img src="img/logo-icon.svg" alt="LoperBoys" class="logo-icon-svg">
|
|
<span class="logo-text">Loper<span class="accent">Boys</span></span>
|
|
</a>
|
|
<button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
<ul class="nav-links" id="navLinks">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li class="nav-dropdown" id="navDropdown">
|
|
<a href="#" class="nav-dropdown-toggle" aria-haspopup="true">Services ▾</a>
|
|
<ul class="nav-dropdown-menu" role="menu">
|
|
<li><a href="lawn-care.html" role="menuitem">🌿 Lawn & Garden</a></li>
|
|
<li><a href="home-services.html" role="menuitem">🏠 Home Services</a></li>
|
|
<li><a href="auto-care.html" role="menuitem">🚗 Auto Care</a></li>
|
|
<li><a href="moving.html" role="menuitem">📦 Moving & Hauling</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="#contact" class="nav-cta">Get a Free Quote</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="cat-hero" id="home">
|
|
<div class="hero-overlay"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-badge">🌿 Lawn & Garden</div>
|
|
<h1 class="hero-title">Lawn & Garden <span class="accent">Services</span></h1>
|
|
<p class="hero-sub">Keep your yard looking sharp all season long. From mowing to mulching, we handle the work you'd rather not do.</p>
|
|
<div class="hero-ctas">
|
|
<a href="tel:2202004022" class="btn btn-primary" style="background: linear-gradient(135deg, var(--green), var(--green-dark)); box-shadow: 0 4px 16px rgba(34,197,94,0.4);">
|
|
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
|
|
220-200-4022
|
|
</a>
|
|
<a href="#contact" class="btn btn-secondary">Get a Free Quote</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Breadcrumbs -->
|
|
<div class="breadcrumbs">
|
|
<div class="container">
|
|
<a href="index.html">← Back to all services</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Grid -->
|
|
<section class="cat-services" id="services">
|
|
<div class="container">
|
|
<h2 class="section-title">Lawn & Garden <span class="accent">Services</span></h2>
|
|
<p class="section-subtitle">Everything your yard needs, covered by one reliable crew.</p>
|
|
<div class="services-grid">
|
|
<div class="service-card featured">
|
|
<div class="featured-badge">Most Popular</div>
|
|
<div class="service-icon">🌱</div>
|
|
<h3>Lawn Mowing</h3>
|
|
<p>Professional mowing, edging, and trimming. All season, every season. We keep your lawn neat and tidy.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="service-icon">🍂</div>
|
|
<h3>Leaf Raking</h3>
|
|
<p>Complete fall cleanup — leaf removal, bagging, and yard prep so your property is ready for winter.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="service-icon">🗑️</div>
|
|
<h3>Lawn Pick-up</h3>
|
|
<p>Branches, sticks, debris — we'll pick up anything off your lawn and haul it away.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="service-icon">✂️</div>
|
|
<h3>Edging & Trimming</h3>
|
|
<p>Clean, crisp edges around your driveway, walkways, and flower beds. The finishing touch that makes a difference.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="service-icon">🪵</div>
|
|
<h3>Mulching</h3>
|
|
<p>Garden bed mulch installation and refresh. Fresh mulch looks great and helps retain moisture.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="service-icon">🌿</div>
|
|
<h3>Weed Control</h3>
|
|
<p>Hand-pulled, no chemicals. We remove weeds the natural way so your lawn stays green without the spray.</p>
|
|
</div>
|
|
<div class="service-card">
|
|
<div class="service-icon">🌻</div>
|
|
<h3>Garden Bed Cleanup</h3>
|
|
<p>Remove dead plants, clear debris, and prep your garden beds for the next season.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Note -->
|
|
<section class="pricing-note">
|
|
<div class="container">
|
|
<p>Prices vary by job. <strong>Call 220-200-4022</strong> or use the form below for a <span class="accent">free, no-obligation quote</span>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section class="contact" id="contact">
|
|
<div class="container">
|
|
<h2 class="section-title">Get a <span class="accent">Free Quote</span></h2>
|
|
<p class="section-subtitle">Tell us what you need — we'll get back to you fast.</p>
|
|
<div class="contact-grid">
|
|
<div class="contact-info">
|
|
<h3>Contact Information</h3>
|
|
<div class="contact-card">
|
|
<div class="contact-item">
|
|
<div class="contact-icon">📞</div>
|
|
<div>
|
|
<strong>Phone</strong>
|
|
<a href="tel:2202004022">220-200-4022</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="contact-icon">📧</div>
|
|
<div>
|
|
<strong>Email</strong>
|
|
<a href="mailto:contact@loperboys.com">contact@loperboys.com</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-item">
|
|
<div class="contact-icon">📍</div>
|
|
<div>
|
|
<strong>Service Area</strong>
|
|
<p>Warsaw, Coshocton, and surrounding areas</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-item payment-methods">
|
|
<div class="contact-icon">💳</div>
|
|
<div>
|
|
<strong>We Accept</strong>
|
|
<div class="payment-badges">
|
|
<span class="payment-badge">💵 Cash</span>
|
|
<span class="payment-badge">📱 Venmo</span>
|
|
<span class="payment-badge">📲 Cash App</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="contact-cta">
|
|
<a href="tel:2202004022" class="btn btn-primary btn-large">📞 Call Now — It's Free to Quote!</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-form-wrapper">
|
|
<form class="contact-form" id="contactForm" action="send-contact.php" method="POST">
|
|
<input type="hidden" name="service_category" value="lawn-garden">
|
|
<p class="form-note" style="text-align:left; font-style:italic;">We value your privacy. Your information is only used to respond to your quote request and will never be shared with third parties.</p>
|
|
<div class="form-group">
|
|
<label for="name">Your Name *</label>
|
|
<input type="text" id="name" name="name" required placeholder="John Smith">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Phone Number *</label>
|
|
<input type="tel" id="phone" name="phone" required placeholder="(740) 000-0000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" placeholder="john@example.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="service">Service Needed *</label>
|
|
<select id="service" name="service" required>
|
|
<option value="">Select a service...</option>
|
|
<option value="lawn-mowing">Lawn Mowing</option>
|
|
<option value="leaf-raking">Leaf Raking</option>
|
|
<option value="lawn-pickup">Lawn Pick-up</option>
|
|
<option value="edging-trimming">Edging & Trimming</option>
|
|
<option value="mulching">Mulching</option>
|
|
<option value="weed-control">Weed Control</option>
|
|
<option value="garden-bed-cleanup">Garden Bed Cleanup</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group form-honeypot" aria-hidden="true" style="display:none;">
|
|
<label for="website_url">Leave this blank</label>
|
|
<input type="text" id="website_url" name="website_url" tabindex="-1" autocomplete="off">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="message">Tell Us About Your Project</label>
|
|
<textarea id="message" name="message" rows="4" placeholder="Yard size, service frequency, any special requests..."></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-block">
|
|
Send Message →
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-categories">
|
|
<span>Other Services:</span>
|
|
<a class="active-link" href="lawn-care.html">🌿 Lawn & Garden</a>
|
|
<a href="home-services.html">🏠 Home Services</a>
|
|
<a href="auto-care.html">🚗 Auto Care</a>
|
|
<a href="moving.html">📦 Moving & Hauling</a>
|
|
</div>
|
|
<div class="footer-content">
|
|
<div class="footer-brand">
|
|
<h3>LoperBoys</h3>
|
|
<p class="slogan">Hard Work. Honest Prices. Local Service.</p>
|
|
</div>
|
|
<div class="footer-contact">
|
|
<a href="tel:2202004022" class="footer-phone">📞 220-200-4022</a>
|
|
<a href="mailto:contact@loperboys.com" class="footer-email">📧 contact@loperboys.com</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© <span id="year"></span> LoperBoys. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Floating CTA -->
|
|
<a href="tel:2202004022" class="floating-cta" id="floatingCta" aria-label="Call LoperBoys">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
|
|
</a>
|
|
|
|
<script src="js/main.js"></script>
|
|
<script>
|
|
// Nav dropdown support for sub-pages
|
|
(function() {
|
|
var dropdown = document.getElementById('navDropdown');
|
|
if (!dropdown) return;
|
|
var toggle = dropdown.querySelector('.nav-dropdown-toggle');
|
|
var menu = dropdown.querySelector('.nav-dropdown-menu');
|
|
if (!toggle || !menu) return;
|
|
|
|
// Toggle on click (desktop)
|
|
toggle.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (!dropdown.contains(e.target)) {
|
|
menu.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Show dropdown on hover (desktop only)
|
|
if (window.matchMedia('(min-width: 769px)').matches) {
|
|
dropdown.addEventListener('mouseenter', function() { menu.style.display = 'block'; });
|
|
dropdown.addEventListener('mouseleave', function() { menu.style.display = 'none'; });
|
|
}
|
|
|
|
// On mobile, dropdown links close the nav
|
|
menu.querySelectorAll('a').forEach(function(link) {
|
|
link.addEventListener('click', function() {
|
|
menu.style.display = 'none';
|
|
var navLinks = document.getElementById('navLinks');
|
|
var navToggle = document.getElementById('navToggle');
|
|
if (navLinks) navLinks.classList.remove('active');
|
|
if (navToggle) navToggle.classList.remove('active');
|
|
});
|
|
});
|
|
})();
|
|
|
|
// Dropdown menu inline styles
|
|
(function() {
|
|
var style = document.createElement('style');
|
|
style.textContent =
|
|
'.nav-dropdown { position: relative; }' +
|
|
'.nav-dropdown-menu { ' +
|
|
' display: none; ' +
|
|
' position: absolute; ' +
|
|
' top: 100%; ' +
|
|
' left: 50%; ' +
|
|
' transform: translateX(-50%); ' +
|
|
' background: rgba(10, 36, 99, 0.98); ' +
|
|
' backdrop-filter: blur(12px); ' +
|
|
' border-radius: 12px; ' +
|
|
' padding: 12px 0; ' +
|
|
' min-width: 220px; ' +
|
|
' box-shadow: 0 8px 32px rgba(0,0,0,0.3); ' +
|
|
' z-index: 1001; ' +
|
|
'}' +
|
|
'.nav-dropdown-menu li a { ' +
|
|
' display: block; ' +
|
|
' padding: 10px 20px; ' +
|
|
' color: rgba(255,255,255,0.85); ' +
|
|
' font-size: 0.95rem; ' +
|
|
' font-weight: 600; ' +
|
|
' font-family: Montserrat, sans-serif; ' +
|
|
' transition: background 0.2s, color 0.2s; ' +
|
|
' white-space: nowrap; ' +
|
|
'}' +
|
|
'.nav-dropdown-menu li a:hover { ' +
|
|
' background: rgba(255,255,255,0.1); ' +
|
|
' color: #00e0ff; ' +
|
|
'}' +
|
|
'@media (max-width: 768px) { ' +
|
|
' .nav-dropdown-menu { ' +
|
|
' position: static; ' +
|
|
' transform: none; ' +
|
|
' background: transparent; ' +
|
|
' box-shadow: none; ' +
|
|
' padding: 4px 0 0 16px; ' +
|
|
' } ' +
|
|
' .nav-dropdown-menu li a { ' +
|
|
' font-size: 1.1rem; ' +
|
|
' padding: 8px 12px; ' +
|
|
' } ' +
|
|
'}';
|
|
document.head.appendChild(style);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|