Verdant
Verdant is a free, premium Bootstrap 5 website template designed specifically for landscaping, lawn-care and garden-design companies. It ships with two hand-built pages — a full homepage and a detailed services/quote page — and a heavy custom design layer of botanical greens, stone neutrals and a citrus-lime accent. Everything is front-end only, self-hosts Bootstrap 5, uses vanilla JavaScript with no jQuery, and stays fully visible when JavaScript is disabled.
Key features
- Two complete pages: homepage plus a detailed services and free-quote page
- Sticky glass navbar with click-to-call phone number and a working mobile menu
- Hero with an inline instant-quote form and licensed/insured trust badges
- Working vanilla before/after image slider with drag, keyboard and range control
- Lightbox project gallery and an auto-advancing testimonials slider
- Transparent lawn-care plans with a monthly / per-visit price toggle
- IntersectionObserver count-up stats and reveal-on-scroll animations
- Two validated quote forms with inline errors and a success message
- Native details/summary FAQ and progressive enhancement throughout
Best for
- Landscaping and lawn-care companies
- Garden and landscape design studios
- Hardscaping, patio and irrigation contractors
- Local home-services businesses that need a quote flow
- Tree-care and seasonal-cleanup crews
At a glance
- Framework: Bootstrap 5 (self-hosted), no jQuery, vanilla JS only
- Pages: 2 (index.html, services.html)
- Fonts: Bricolage Grotesque + Figtree (Google Fonts)
- Palette: deep forest green, fresh grass green, stone neutral, citrus-lime accent
- License: free for personal and commercial use
- Dependencies: none beyond Bootstrap CSS/JS bundle and Google Fonts
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Verdant really free to use?
Yes. Verdant is free for both personal and commercial projects, so you can use it for a real landscaping business, a client site or a portfolio piece. There is no purchase required and no feature is locked behind a paywall. Attribution to uiCookies is appreciated but the template is ready to launch as-is.
Does Verdant use Bootstrap and jQuery?
Verdant is built on Bootstrap 5, which is self-hosted in the template's css/vendor and js/vendor folders rather than loaded from a CDN. It contains no jQuery at all — every interaction, from the mobile menu to the before/after slider, is written in plain vanilla JavaScript. That keeps the template lighter, faster and easier to maintain.
What pages and sections are included?
There are two pages. The homepage covers a hero with an instant-quote form, a six-service grid, a before/after slider, a project lightbox gallery, a why-choose-us section, lawn-care pricing plans, a how-it-works flow, animated stats, a crew row, testimonials, service areas, seasonal-tips cards, a FAQ and a call-to-action band. The services page adds detailed service breakdowns with starting prices and a full project quote form.
Will the content still show if JavaScript is turned off?
Yes — Verdant is built with progressive enhancement as a hard requirement. A small script adds a 'js' class to the document, and every hidden or animated start-state in the CSS is scoped under that class. With JavaScript off, all text, images, gallery items, forms and panels render at full opacity and remain readable and usable; only the optional animations and interactive widgets are skipped.
How do the quote forms work?
Both the hero mini-form and the full project form use vanilla JavaScript for inline validation. Required fields are checked on submit, invalid fields get a visible error message and focus, and errors clear as the visitor types. On a valid submit the form shows a success message rather than reloading. Because the template is front-end only, you connect the forms to your own backend, form service or email handler to actually receive leads.
Can I change the colors and fonts?
Easily. The entire palette is defined as CSS custom properties at the top of css/style.css — change the forest green, grass green, stone neutral or citrus-lime accent in one place and it cascades across the whole site. The fonts are set with two variables and loaded from Google Fonts in the page head, so swapping the Bricolage Grotesque and Figtree pairing for your own is a two-line change.
Is the before/after slider accessible?
Yes. The before/after comparison works by pointer drag anywhere on the image, by an underlying range input, and by keyboard — the handle is focusable and responds to the left and right arrow keys, with proper ARIA slider roles and values. The lightbox, testimonials slider, accordion and forms are all keyboard-operable too, and the template honours the prefers-reduced-motion setting.
Is Verdant mobile-friendly and SEO-ready?
The layout is mobile-first and fully responsive, with the navbar collapsing into a working toggle menu and every grid reflowing cleanly down to small screens. Each page has a descriptive title and meta description, semantic landmark elements, alt text on every image, and width/height plus lazy-loading attributes on images to protect layout stability and performance. Add your own analytics and structured data to finish the SEO setup.
