Sparkle
Sparkle is a free two-page Bootstrap 5 template designed for home and office cleaning companies. It combines a conversion-focused landing page with a detailed services and online booking page that includes a live price estimator. The template is built with vanilla JavaScript, is fully progressive-enhanced, and needs no jQuery.
Key features
- Instant quote mini-form in the hero with inline validation
- Online booking form with service picker, bed/bath steppers and live price estimate
- Six cleaning-specific service cards with from-pricing
- Transparent three-tier pricing table with a highlighted popular plan
- Three-step how-it-works, count-up stats, team row and testimonials slider
- Native details/summary FAQ accordion and service-areas grid
- Sticky glassmorphism navbar with a working mobile off-canvas menu
- Vanilla JS only, IntersectionObserver reveals, respects reduced motion
- Accessible landmarks, ARIA widgets, visible focus and keyboard support
Best for
- Residential house-cleaning companies
- Commercial and office cleaning services
- Maid and housekeeping agencies
- Carpet, window and specialty cleaning businesses
- Local service brands that need online booking
At a glance
- Framework: Bootstrap 5 (self-hosted)
- Pages: index.html, services.html
- JavaScript: vanilla, no jQuery
- Fonts: Sora + Inter (Google Fonts)
- Palette: fresh aqua-teal, cool neutrals, soft mint
- License: free for personal & commercial use
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
What is Sparkle built with?
Sparkle is built on Bootstrap 5, self-hosted so there are no CDN dependencies. All interactivity is written in plain vanilla JavaScript with no jQuery. It pairs the geometric Sora typeface for headings with Inter for body text, both loaded from Google Fonts.
How many pages does the template include?
There are two pages. index.html is a conversion-focused one-page site covering services, why-choose-us, pricing, how-it-works, stats, team, testimonials, service areas and an FAQ. services.html holds detailed service breakdowns and a full online booking form with a live price estimator.
Does the booking form actually calculate a price?
Yes. The booking form recalculates a live estimate as you change the selected service, the number of bedrooms and bathrooms via steppers, and the cleaning frequency. Recurring frequencies apply a discount, and the estimate updates instantly in the browser. It is a front-end demo, so you connect it to your own backend or booking provider to process real orders.
Is the template accessible and keyboard-friendly?
Accessibility was built in from the start. The template uses semantic landmarks, descriptive alt text on every image, ARIA attributes on custom widgets like the slider and radiogroup, visible focus rings, and a skip link. The FAQ uses native details/summary elements, and the mobile menu, slider and forms are all keyboard operable.
Will the content still show if JavaScript is disabled?
Yes. Sparkle follows strict progressive enhancement: a js class is added to the document before styles apply, and every hidden animation start-state is scoped under that class. With JavaScript off, all content renders at full opacity, forms remain usable as standard HTML, and nothing is hidden behind a script.
Can I use Sparkle for a commercial client project?
Absolutely. Sparkle is free for both personal and commercial use, including client work and your own cleaning business. You can rebrand the colors, swap the copy and images, and ship it live without attribution requirements.
How do I change the brand colors?
All brand colors are defined as CSS custom properties in the :root block at the top of css/style.css. Change the core –teal, –teal-deep and –mint values and the accent flows through buttons, icons, cards, gradients and the pricing highlight automatically, so you can re-theme the whole template in a couple of edits.
Is the template responsive on mobile?
Yes, it is mobile-first and fully responsive. Grids collapse gracefully at tablet and phone breakpoints, the navbar turns into a slide-in off-canvas menu with a backdrop, the testimonials slider adapts from three cards to one, and the booking layout stacks into a single column on small screens.
