Service Business Template

Name: Service Business Template
Brand: GSAP Vault
Price: 10.00 GBP
Availability: InStock

£10

A three-column service business website with sticky navigation, an interactive service selector and an enquiry ticket. Includes bicycle workshop, dog grooming and home cleaning versions in one template.

ScrollTrigger intermediate

2 more details

scroll-revealinteractive-selection

Service Business Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab

Explore versions

About this template

One three-column layout, three complete service businesses. Spoke Works pairs orange and condensed lettering with bicycle workshop photography. Marlow & Mutt uses apricot, a soft serif and dog grooming imagery. Sunday Home brings cream, sage and warm sand surfaces and bold type to a home cleaning service.

Read the full template overview

Each version includes three service choices, a synchronised enquiry ticket, practical information and expandable answers. The grooming enquiry asks about the dog and breed; the cleaning enquiry adds a postcode and home size. The demo launcher lets you compare all three versions.

All three editable HTML pages and their local photographs are included in the same download, sharing one layout stylesheet and interaction script. Choose a starting point, replace the example business details and connect a form provider: the included enquiries only create local previews.

What's included

6 items

Three complete versions: bicycle workshop, dog grooming and home cleaning
Shared three-column layout with sticky identity and enquiry rails
Service comparison with synchronised ticket and enquiry selection
Nine bundled, optimised photographs across three distinct identities
Industry-specific enquiry fields, native FAQs and practical details
Responsive stacked layout, keyboard controls and reduced-motion support

Perfect for

3 use cases

Independent bicycle and repair shops
Dog grooming and pet care businesses
Home cleaning and other home service businesses

How it works

4 sections

A business always within reach

The central content column carries the workshop introduction, services and practical details. Desktop navigation and the enquiry ticket remain alongside it; smaller screens turn the same content into a readable sequence.

Compare the work

Three service choices make the scope and starting price easy to compare. The chosen coverage, service name and price follow into the enquiry ticket and form, whether the visitor needs a bicycle repair, a dog groom or a home clean.

An honest enquiry preview

Each version collects a service, name and email address, then adds details relevant to that business: bike notes, dog information or home size and postcode. The local summary explicitly says nothing has been sent or booked. Connect a form destination before receiving real enquiries.

A usable static page

Service descriptions, workshop information and expandable answers remain available without animation. Visitors who prefer reduced motion get immediate state changes, and the page remains readable if the animation libraries cannot load.

Plugins ScrollTrigger

Difficulty Intermediate

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (3 pages, lowest score shown), 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which businesses suit this three-column layout?

The permanent identity and enquiry rails suit service businesses where visitors need practical details quickly. Three complete examples are included: a bicycle workshop, a dog grooming salon and a home cleaning service. Choose the closest version, then replace its business details, service descriptions and photography while keeping the same layout.

Are all three business versions included in the download?

Yes. The download includes separate bicycle workshop, dog grooming and home cleaning HTML pages, with shared layout and interaction files. Each has its own copy, photographs, type and palette. The demo-only version launcher is excluded, so your chosen page opens as a clean business website.

Do the enquiry forms send messages or reserve appointments?

No. They are unwired static front ends that collect a service, name and email, plus bike notes, dog details or home size and postcode. Each shows a local preview only. Connect your chosen version to Formspree, Netlify Forms or your CRM and replace the preview response with a real submission result.

What happens to the side panels on a phone?

The identity becomes a compact header with visible navigation links. The content reads vertically and the enquiry ticket and form follow the main page. Service selection still updates the ticket and form, and the enquiry links take visitors straight to the relevant control without a mobile menu overlay.

Are the photographs for all three versions included?

Yes. Nine cropped and colour-treated WebP photographs are bundled locally: three bicycle workshop images, three grooming images and three home cleaning images. Source credits and the Pexels licence are documented in the README. The people pictured are illustrative stock subjects, not identified staff or endorsers of the fictional businesses.

Paid template

Purchase to unlock the code.

Buying Service Business Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

Open index.html (bicycle workshop), dog-grooming.html or home-cleaning.html in a browser. Choose one, edit its content, then upload it with the assets/ folder to any static host. Rename your chosen page to index.html for the homepage. No build step is required. Internet access loads the fonts and GSAP; all nine photographs are bundled locally.

The product page has Explore versions thumbnail tabs above the preview; each switches the iframe in place. Standalone and fullscreen demos retain a compact launcher with the same three photographic choices. This launcher is demo-only and is excluded from buyer downloads. The three business pages are included; none depends on the launcher.

Using It With Your Own Design

Start with the business name, contact details, opening hours and service descriptions in your chosen HTML page. The example address, phone, email and prices are fictional. Replace all of them before launch. All photographed people are illustrative stock subjects, not identified employees or endorsers.

All three pages share assets/style.css and assets/script.js. The two adaptations also load assets/variants.css, selected by data-variant="grooming" or data-variant="cleaning" on <html>. Keep this attribute and stylesheet when renaming a page. Change the semantic colours and type roles in the matching stylesheet. Preserve the narrow identity / wide content / enquiry-ticket relationship if you want this layout's character. The orange hero can carry equipment photography, a workspace or an example of your service.

The service buttons use data-service, data-name, data-price and data-coverage. Match their data-service values to the enquiry select's option values. [data-ticket-name], [data-ticket-price] and [data-coverage] receive the selection. Replace or remove .service-photo for another industry. All three service descriptions remain in the page without JavaScript.

The script guards missing sections. You can remove a main section; its corresponding navigation link is hidden by the script, but delete that link too for the no-JS page. Keep the main landmark and skip link together. .contact-rail owns the desktop sticky placement and native overflow; no scroll library is required.

Sections and Configuration

Area	Edit
Identity	Wordmark, caption and section anchors in the header
Hero	Headline, introductory copy, photograph and three promises
Services	Button attributes, visible price/copy and matching form options
Service photograph	Local bicycle detail image and selected coverage caption
Workshop	Portrait, explanatory copy and visit link
Visit	Address, email and opening hours
Questions	Native `details` elements; add or remove freely
Enquiry	Contact ticket, service select and form integration

Enquiry Form

These are unwired static front ends. All collect a service, name and email. The workshop adds bike notes; grooming adds a dog name, breed/size and care notes; cleaning adds postcode, bedroom count and priorities. Each displays a local preview. It does not transmit data, save a booking or reserve a time. Connect Formspree, Netlify Forms or your own CRM before launch; replace the data-enquiry submit handler with a real request and error/success handling. Do not remove the demo disclosure until that integration works. The preview button is disabled without JavaScript. Additional fields marked data-enquiry-detail="Readable label" are included in the preview. data-notes-label and data-price-suffix on the form customise its summary. The notes textarea in the adaptations uses name="notes"; the bicycle page retains name="bike".

Palettes

Ivory surfaces and blue ink establish the reading layer. Safety orange identifies the hero; pale blue distinguishes technical and practical information. Orange carries dark text. Recheck contrast when changing tokens; white small text on the orange is not an approved pairing. The CSS comments record measured ratios.

Marlow & Mutt uses plum ink on cream, apricot and soft sage, with Fraunces display type and DM Sans body text. Sunday Home uses deep olive ink on warm cream, soft sage and sand, with Archivo Black headings and Public Sans body text. variants.css contains both token sets and the typography adjustments; it does not duplicate the base layout.

Animation and Accessibility

GSAP animates the hero arrival, one-time section entrances and a subtle enquiry-ticket response after service selection. No content is pinned and there is no continuous animation. Native buttons work with Enter, Space and touch. The form uses native labels and validation; FAQs use native disclosure controls. Keyboard focus remains visible.

Reduced motion shows content immediately and updates selection without motion. With no JavaScript all service descriptions and information remain readable. With blocked GSAP/ScrollTrigger, native selection and the enquiry preview still work; the reveal gate is removed.

The head adds .has-js synchronously before the stylesheet. Preserve that placement and the reduced-motion CSS overrides when moving the page into another application. Reveal targets use explicit visible endpoints.

Dependencies

GSAP 3.15.0 and ScrollTrigger (demo pin); GSAP 3.12+ compatibility floor.
Google Fonts: Barlow 400/500/600 and Barlow Condensed 600/700.
Grooming: Fraunces 600/700 and DM Sans 400/500/600.
Cleaning: Archivo Black 400 and Public Sans 400/500/600.
No Lenis, framework or build tool is required by the downloaded site.

Images and Credits

Local optimised WebP derivatives include the hero, mechanic and drivetrain close-up. The crops and subdued saturation are baked into the files, not applied by runtime filters.

Alexander Dummer — bicycle on a workshop stand.
Henrique Rocha — mechanic adjusting a bicycle.
Mathias Reding — bicycle gears and chain.
Pexels licence: photographs may be used and modified in website templates. They remain subject to their source licence; do not imply endorsement by the pictured people.

Replace assets/img/workshop.webp , assets/img/mechanic.webp and assets/img/gears.webp and update their alt text and dimensions. The source manifest documents provenance and crop dimensions. Inside the GSAP Vault authoring repository, regenerate with bun scripts/build-template-assets.ts service-business-template; buyers can simply replace the image files without a build step.

The wheel, paw and house marks are original SVG artwork included with the template.

Additional version photography (bundled as grooming-*.webp and cleaning-*.webp):

These use the same Pexels licence linked above. Replace the relevant three images and their alt text when adapting either page.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.