Fetch
Fetch is a free, two-page Bootstrap 5 website template designed for pet grooming salons and pet-care businesses. It ships with a priced grooming menu, a working multi-step online booking flow with live price estimates, a before/after slider, and a lightbox gallery. Built with self-hosted Bootstrap 5 and vanilla JavaScript, it is fully responsive, accessible, and progressively enhanced.
Key features
- Two pages: one-page home plus dedicated services, pricing & booking page
- Multi-step booking flow with vanilla validation and live price/time estimate
- Grooming menu priced by pet size with a filterable service list
- Drag-and-keyboard before/after grooming slider
- Accessible photo lightbox gallery with keyboard navigation
- Testimonials slider, loyalty band, groomers row and FAQ accordion
- Self-hosted Bootstrap 5, no jQuery, vanilla JavaScript only
- Progressive enhancement: full content with JS disabled, honours reduced motion
- Custom design layer with CSS custom-property palette and Fredoka/Nunito type
Best for
- Pet grooming salons and pet spas
- Mobile and independent dog groomers
- Dog daycare, boarding and pet-care services
- Cat grooming specialists
- Local pet businesses that take online bookings
At a glance
- Pages: index.html, services.html
- Framework: Bootstrap 5 (self-hosted)
- JavaScript: Vanilla ES5-safe, one function per feature, no dependencies
- Fonts: Fredoka (display) + Nunito (body) via Google Fonts
- Palette: Sky-teal primary, coral + sunny-yellow accents, soft cream base
- Licence: Free for personal and commercial use
- Best for: Pet grooming salons, mobile groomers, dog daycare & boarding, pet spas
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 Fetch really free to use?
Yes. Fetch is free for both personal and commercial projects under the uiCookies licence. You can use it for a real grooming salon or client site, customise the colours, copy and images, and launch it without any purchase. Attribution is appreciated but the template itself carries no fee.
Does the online booking form actually work?
The booking flow is fully interactive on the front end: it validates every required field, updates step indicators as you progress, and shows a live price and duration estimate based on the service and pet size you pick. Because it is a static template, it does not send data to a server out of the box — you connect the form to your own backend, a form service, or your booking provider by wiring up the submit handler in js/main.js.
How is Fetch built, and does it use jQuery?
Fetch is built on self-hosted Bootstrap 5 with a heavy custom CSS design layer, and all interactivity is written in plain vanilla JavaScript. There is no jQuery and no third-party JS libraries — the mobile menu, before/after slider, lightbox, testimonials slider, count-up stats, filtering and form validation are each a small self-contained function. This keeps the template fast, dependency-free and easy to maintain.
Will the content still show if JavaScript is disabled?
Yes. Fetch is progressively enhanced, so every section, gallery image and form is fully visible and usable with JavaScript turned off. Scroll animations only add a hidden start state when a js class is present on the page, and they gracefully fall back to fully-visible content otherwise. This is good for accessibility, SEO and resilience.
How many pages and sections are included?
There are two pages. The home page covers the hero, trust strip, services and pricing, before/after results, groomers, why-us, a happy-clients gallery, retail add-ons, a loyalty band, testimonials, hours and location, an FAQ and a closing call-to-action. The second page is a dedicated services, pricing and booking page with a size guide, a filterable grooming menu, the full booking flow, add-ons and its own FAQ.
Can I change the colours and fonts?
Easily. The entire palette is defined as CSS custom properties at the top of css/style.css — change a handful of variables like --teal, --coral and --yellow and the whole template re-themes. The fonts are loaded from Google Fonts (Fredoka and Nunito) via a single link tag, so you can swap in your own pairing by editing that line and the two font-family variables.
Is Fetch accessible and mobile-friendly?
Yes. It is mobile-first and responsive down to small phones, with a collapsing navbar and touch-friendly controls. Accessibility is built in: semantic landmarks, alt text on every image, ARIA roles on the custom slider, lightbox and form widgets, visible focus outlines, full keyboard support, and respect for the prefers-reduced-motion setting.
What do I need to do before launching it for a real salon?
Replace the placeholder images in the img folder, update the salon name, address, phone, email and opening hours, adjust the service names, prices and durations to match your menu, and connect the booking and newsletter forms to your chosen backend or form service. After that you can deploy it to any static host — there is no build step or server-side requirement.
