Download this free Lawn Care HTML website template built with Tailwind CSS and GSAP. A responsive, SEO-friendly design for landscaping businesses. Get the code now!
Table of Contents
Are you running a landscaping or gardening business? To grow your client list, you need a professional website. But hiring a developer can be expensive. That’s why I created this Free Lawn Care HTML Website Template.
In this guide, I will share a free code snippet to build a stunning Homepage for a lawn care business. It is fully responsive (looks good on phones and laptops) and easy to customize. We will use HTML, Tailwind CSS for styling, and GSAP for smooth animations.
Prerequisites:
- Basic knowledge of HTML and CSS.
- A code editor (like VS Code).
- An internet connection (to load the libraries).
Let's get your hands dirty and build this!
Source Code
Step 1 (HTML Code):
First, we need the skeleton of our website. In this file, we will include the necessary libraries via CDN: Tailwind CSS for styling, Phosphor Icons for beautiful icons, jQuery, and GSAP for animations.
Create a file named index.html and paste the code below. This covers the Navigation, Hero Section, Services Grid, and a Footer.
Step 2 (CSS Code):
The beauty of Tailwind CSS is that we don't need a separate heavy CSS file. I have already included the Tailwind CDN script in the <head> of the HTML code above.
I customized the configuration to add a specific "Brand Green" color (#1a4c3e) so the website feels fresh and organic—perfect for a lawn care business.
If you want to add any custom CSS overrides, simply put them inside the <style> tag in the HTML head.
body {
background-color: #f5f5f0;
overflow-x: hidden;
color: #0f1715;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f5f5f0;
}
::-webkit-scrollbar-thumb {
background: #1a4c3e;
}
/* Hamburger Animation Classes */
.hamburger-line {
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.nav-open .line-1 {
transform: rotate(45deg) translate(5px, 6px);
background-color: #0f1715;
}
.nav-open .line-2 {
opacity: 0;
transform: translateX(-20px);
}
.nav-open .line-3 {
transform: rotate(-45deg) translate(5px, -6px);
background-color: #0f1715;
}
/* Loader Styles */
.loader {
position: fixed;
inset: 0;
background: #0f1715;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.8s ease-in-out;
}
.loader-bar-bg {
width: 200px;
height: 2px;
background: rgba(255, 255, 255, 0.1);
margin-top: 20px;
overflow: hidden;
position: relative;
}
.loader-bar {
width: 0%;
height: 100%;
background: #d4cbb8;
position: absolute;
left: 0;
top: 0;
}
/* Floating Buttons */
.float-btn {
position: fixed;
z-index: 50;
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
transition: all 0.3s ease;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.float-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
#scroll-top {
bottom: 2rem;
right: 2rem;
background: #1a4c3e;
color: white;
opacity: 0;
pointer-events: none;
}
#scroll-top.visible {
opacity: 1;
pointer-events: auto;
}
#sticky-call {
bottom: 2rem;
left: 2rem;
background: #d4cbb8;
color: #0f1715;
animation: pulse-shadow 2s infinite;
}
@keyframes pulse-shadow {
0% {
box-shadow: 0 0 0 0 rgba(212, 203, 184, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(212, 203, 184, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(212, 203, 184, 0);
}
}
/* Image Masking for Hero */
.hero-mask {
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
} Step 3 (JavaScript Code):
Now, let’s bring the site to life! We will use jQuery for the mobile menu toggle and GSAP for professional, smooth animations that trigger when you scroll.
Add this script tag right before the closing </body> tag in your HTML file:
$(document).ready(function () {
// --- 1. New Loader Animation ---
// Animate bar width
gsap.to('#loader-bar', {
width: '100%',
duration: 1.5,
ease: 'power2.inOut',
onComplete: function () {
// Slide up loader
gsap.to('#loader', {
yPercent: -100,
duration: 0.8,
ease: 'power4.inOut',
});
// Trigger Hero Animations
gsap.to('.hero-reveal', {
y: 0,
opacity: 1,
duration: 1,
stagger: 0.2,
ease: 'power3.out',
delay: 0.2,
});
gsap.to('.hero-img-container', {
scale: 1,
duration: 2,
ease: 'power2.out',
delay: 0.2,
});
},
});
// Set initial state for hero reveal
gsap.set('.hero-reveal', { y: 100, opacity: 0 });
// --- 2. Navbar & Mobile Menu ---
// Mobile Dropdown Logic
$('#mobile-services-toggle').on('click', function () {
const $icon = $(this).find('i');
const $list = $('#mobile-services-list');
$list.slideToggle(300);
$icon.toggleClass('rotate-180');
});
// Navbar & Hamburger Logic
$('#hamburger').on('click', function () {
const $nav = $('#navbar');
const $targets = $('.nav-blend-target');
$(this).toggleClass('nav-open');
if ($(this).hasClass('nav-open')) {
$('#mobile-menu')
.removeClass('translate-x-full')
.addClass('translate-x-0');
$targets
.removeClass('mix-blend-difference')
.removeClass('text-white')
.addClass('text-v-dark');
$('body').css('overflow', 'hidden');
} else {
$('#mobile-menu')
.removeClass('translate-x-0')
.addClass('translate-x-full');
setTimeout(() => {
$targets.removeClass('text-v-dark').addClass('text-white');
if ($(window).scrollTop() <= 50) {
$targets.addClass('mix-blend-difference');
}
}, 400);
$('body').css('overflow', 'auto');
}
});
$(window).on('scroll', function () {
const $targets = $('.nav-blend-target');
if (!$('#hamburger').hasClass('nav-open')) {
if ($(this).scrollTop() > 50) {
$('#navbar')
.addClass('bg-black/80 backdrop-blur-md py-3')
.removeClass('py-6');
$targets.removeClass('mix-blend-difference');
} else {
$('#navbar')
.removeClass('bg-black/80 backdrop-blur-md py-3')
.addClass('py-6');
$targets.addClass('mix-blend-difference');
}
}
});
// --- 3. GSAP Animations ---
gsap.registerPlugin(ScrollTrigger);
// Parallax Hero Image
gsap.to('.hero-img-container img', {
yPercent: 30,
ease: 'none',
scrollTrigger: {
trigger: '#home',
start: 'top top',
end: 'bottom top',
scrub: true,
},
});
// Reveal Text on Scroll (About Section)
gsap.from('.gs-reveal-text', {
scrollTrigger: {
trigger: '#about',
start: 'top 70%',
},
y: 50,
opacity: 0,
duration: 1,
ease: 'power3.out',
});
// Reveal Image on Scroll (About Section)
gsap.from('.gs-reveal-img', {
scrollTrigger: {
trigger: '#about',
start: 'top 70%',
},
x: -50,
opacity: 0,
duration: 1.2,
ease: 'power3.out',
});
// Number Counters
gsap.utils.toArray('.counter').forEach((counter) => {
const target = counter.getAttribute('data-target');
gsap.to(counter, {
innerHTML: target,
snap: { innerHTML: 1 },
scrollTrigger: {
trigger: counter,
start: 'top 85%',
once: true,
},
duration: 2,
ease: 'power2.out',
});
});
// Horizontal Scroll for Gallery
const scrollContainer = document.querySelector(".gallery-wrapper");
const scrollDistance = scrollContainer.scrollWidth - window.innerWidth;
gsap.to(scrollContainer, {
x: -scrollDistance,
ease: "none",
scrollTrigger: {
trigger: "#projects",
pin: true,
start: "center center",
scrub: 1,
end: "+=3000"
}
});
// --- 4. Testimonial Swiper Logic ---
const testimonials = [
{
text: 'Verdant & Stone transformed our disorganized backyard into a beautiful garden. Their attention to detail was amazing.',
name: 'James Sterling',
role: 'Homeowner, Kensington',
img: 'https://randomuser.me/api/portraits/men/32.jpg',
},
{
text: 'The team is incredibly professional. They show up on time, and my lawn has never looked greener. Highly recommended!',
name: 'Sarah Jenkins',
role: 'Resident, Portland',
img: 'https://randomuser.me/api/portraits/women/44.jpg',
},
{
text: 'I love the new garden design. It feels like a completely new home. The designers listened to exactly what I wanted.',
name: 'Michael Ross',
role: 'Homeowner, Beaverton',
img: 'https://randomuser.me/api/portraits/men/64.jpg',
},
];
let currentTestimonial = 0;
const $container = $('#testimonial-container');
function renderTestimonial(index) {
const t = testimonials[index];
const content = `
<div class="testimonial-slide active animate-fade-in">
<p class="text-2xl md:text-4xl font-display font-light leading-normal mb-8">
"${t.text}"
</p>
<div class="flex items-center justify-center gap-4">
<img src="${t.img}" class="w-12 h-12 rounded-full grayscale border-2 border-v-dark" alt="Client">
<div class="text-left">
<h5 class="font-bold uppercase tracking-wider text-sm">${t.name}</h5>
<span class="text-xs opacity-70">${t.role}</span>
</div>
</div>
</div>
`;
$container.html(content).hide().fadeIn(400);
}
// Initial Render
renderTestimonial(currentTestimonial);
$('#next-testim').click(function () {
currentTestimonial = (currentTestimonial + 1) % testimonials.length;
renderTestimonial(currentTestimonial);
});
$('#prev-testim').click(function () {
currentTestimonial =
(currentTestimonial - 1 + testimonials.length) % testimonials.length;
renderTestimonial(currentTestimonial);
});
// --- 5. Marquee CSS Injection ---
const styleSheet = document.createElement('style');
styleSheet.innerText = `
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
animation: marquee 20s linear infinite;
}
`;
document.head.appendChild(styleSheet);
// --- 6. Floating Buttons Logic ---
const scrollTopBtn = $('#scroll-top');
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
scrollTopBtn.addClass('visible');
} else {
scrollTopBtn.removeClass('visible');
}
});
scrollTopBtn.click(function () {
$('html, body').animate({ scrollTop: 0 }, 500);
return false;
});
});Final Output:
Conclusion:
Congratulations! You now have a sleek, modern homepage for a Lawn Care business. It loads fast, looks great on mobile, and the animations give it a premium feel.
This snippet gives you the Homepage (Free Version). If you want to scale this into a complete business website with 15+ professionally designed pages (including Contact, About, Gallery, Pricing, and Blog), you can get the full version below.
Want the complete Website? 👉 Get the Full 15-Page Version Here: codewithfaraz.com/shop
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
