Free car detailing website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: vernis.md, data: vernis.json

Car detailing website template: first screen on a phone

About this car detailing website template

Car detailing website template: one free HTML file for a studio selling paint correction, ceramic coating and interior care, with priced treatments, a paint readings sheet, a five-day working week and an inspection form. The look is near-black with a very wide light wordmark. An AI agent such as Claude Code can adapt it.

At a glance, October 2026. One 107 KB index.html with its CSS and JavaScript inside, 12 sections, 16 Unsplash photos credited in CREDITS.md, Geist, Google Sans and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Detailers who sell a few priced treatments to owners who care about their car need proof on the page, and among auto detailing website templates this one supplies it: a sheet of paint readings, five finished cars and a day-by-day week. Auto detailing website design of this kind also suits paint protection film, window tint and wrap shops, restoration garages and any premium service with a short price list.

A coding agent should replace first the studio name, address, hours, the three treatments with times and starting prices, the five cars with their photos and the six reviews. Vibe coding with Claude Code or Cursor goes fastest when you hand over your own paint readings, warranty terms and collection radius, because the demo's figures are invented. Treat this car detailing website template for Claude Code as a layout to fill with facts only the studio has.

Choose this for a studio that takes one car at a time and sells on finish rather than price. Most car detailing website templates assume a menu of packages and an online calendar; this one has neither, and its form sends nothing until you connect a service. A call-out business such as a plumber suits the trades layout better. Without code, 8B's builder is another route.

Good for:

Car detailing studioPaint protection film, window tinting or vehicle wrap shopBodywork, restoration or specialist garageAny premium service with a few priced options, a step-by-step process and a case-study gallery

Turn the car detailing website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/car-detailing-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/car-detailing-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/car-detailing-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/car-detailing-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my detailing business: name, city, treatments with times and starting prices, recent cars with my own photos, the working week, reviews, warranty, hours, address, contacts, how people book>. Replace first the studio name, address, prices, paint readings, cars and reviews. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists, and set each --len to its text's length. Ask me for missing facts; never invent prices, readings, reviews or contacts.

In a terminal

npx degit 8bsite/car-detailing-website-template my-site

Car detailing website design prompt for any AI tool

Paste this into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a car detailing site from scratch, or brief a designer. It is this template's design written as decisions, like prompts for other trades; with the template itself, the short prompt above is enough.

Build a one page website for a car detailing studio that sells paint correction, ceramic coating and interior care to owners who care about their car. Sections in order: nav that hides on scroll down, opening with a very wide light wordmark and a headline about seeing the finish, three priced treatments, a paint readings sheet with bars, five recent cars, studio photo, a five day working week, six reviews, FAQ, aftercare statement, inspection request form, footer wordmark. Type: TikTok Sans weight 300 stretched wide for the wordmark and treatment names, Google Sans for headings and body text, Geist uppercase for captions and buttons. Colours: #0f0f0f ground, #ededed text, #a9aea8 muted text, #2f382f deep green sections, #545e54 sage accents. Square corners, hairlines between rows, no rounded cards. Motion: one idea, the wordmark lifts away and photo tiles fly into one frame; the rest is calm reveals. Respect prefers-reduced-motion. Do not use purple gradients, three icon cards or a centered hero with two buttons. Copy is short and concrete. Ask me for treatment times, starting prices, readings, warranty, hours, address and reviews, and never invent them; leave visible placeholders. One primary action, Book an inspection, in the nav, the opening and the form. Check at 390 px width, tap targets of 44 px, visible keyboard focus and no console errors, and list every placeholder when done.

Car detailing website design and motion

Palette

#0f0f0f page ground of the opening, treatments, work, process, questions, contact and footer; text on the buttons and the pale review cards#ededed body and heading text, button fill, the footer wordmark, the sheen on the opening wordmark, reading bars and focus outlines#a9aea8 the opening wordmark, paragraphs under headings, spec labels and the muted lines in the footer#2f382f deep green ground of the paint readings and studio sections and the starting ground of the reviews#545e54 sage ground of the aftercare section, the button hover wipe, form underlines, question rules and the flagged resprayed row#d4cccc the six review cards#1d1f1d tag ground, photo placeholders, bar tracks and hairlines between treatment rows and in the footer#59523f the olive-brown the reviews ground reaches at the end of its sideways track

Fonts

TikTok Sans: the uppercase wordmark in the bar, the opening and the footer, and the three treatment names: weight 300 on a width axis that runs from 75% to 150%
Google Sans: headings, body text, leads, review quotes, questions and form text, all at weight 400, headings with slightly tight tracking
Geist: captions, tags, buttons, links, the table legend and form labels: weight 500, uppercase, 0.08em tracking, 11 to 13 px

A twelve-column grid with square corners throughout. Display lines use a light face stretched wide: the wordmark and each treatment name are sized from their character count to fill the container. Small bracketed uppercase captions label the sections, and hairlines divide the treatment rows and the questions. Recent cars sit in an offset pattern of five, readings in a table with bars, and reviews on pale cards.

This car detailing website design keeps the finish as its subject. Near-black is the ground, while the readings and studio sections sit on deep green, aftercare on sage, and the reviews ground drifts toward olive-brown as the cards slide across. Cars arrive from staggered distances.

Every value of this car detailing website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the car detailing website page

Navigation
Fixed bar: wordmark, five section links in the page's own link style, Menu button on phones with a full-screen overlay
The bar hides when you scroll down past 140 px and returns when you scroll up.
You see the finish before you see the car.
Two screens: a wide wordmark with headline, intro, two actions and an address caption, then a framed photo of a car in a tunnel of light with a claim and three tags
The wordmark and headline rise on load and a sheen loops across the wordmark; on scroll the wordmark lifts away, 24 photo tiles (12 on phones) fly in and lock into one frame, then a haze sweeps off behind a thin line and the claim and tags fade up.
Three treatments, one standard of light.
Three tall rows: treatment name in the wide face, lead, text, time in the studio, price from, and a photo
Per row, on scroll: the name widens from 75% to 150% width, the photo opens from a narrow slit to full width and the text brightens.
We read the paint before we cut it.
A sheet of twelve panels with paint depth in microns and a bar for each; one flagged as resprayed
A scan line runs down the sheet while the bars grow to their values row by row and the flagged row's ground fades in.
Cars that left the studio this season.
An offset grid of five recent cars, each with two tags on the photo, a name and a description
Each car drifts into place on scroll: the first and fourth settle down from above, the other three rise from below, and the third car's photo also zooms out inside its frame.
One car in the studio at a time.
A photo of a car in a white room beside a short text and three facts with square markers
A haze veil sweeps off the photo once, behind a vertical line, as it scrolls into view.
A working week for one car.
A working week of five day columns, Monday to Friday, with a stack of photos travelling across them
Pinned on wide screens for about one and a half screens of scroll: five stacked photos spread to their day columns while a line above the days grows; phones run it down the rows without a pin.
Owners, in their words.
Six owner quotes on cards that stand as a descending staircase and level into one row on a sideways track
Pinned for about two screens of scroll, the cards slide sideways and climb from a staircase into one row while the ground shifts from deep green toward olive-brown.
What owners ask before booking.
Six questions in native details elements beside a heading
The plus sign turns into a minus by a CSS transition when a question opens.
A coating is not armour. Wash it gently, dry it softly, and the gloss you collected is the gloss you keep.
A sage-ground statement with three rules, a maintenance wash offer and a photo of a towel on a bonnet
The statement's words clear from a faint fade one by one as you scroll, with a blur on wide hover screens, and the photo settles and zooms out in its frame.
Forty minutes under the lamps.
Booking form beside the studio details: address, hours, phone, email
Footer
Footer with the wordmark across the width, address, hours, contact, page links and legal lines
The wordmark widens from 75% to 150% as the footer scrolls into view.

Before you publish the car detailing website site

Replace social preview image, favicon, phone number, contact form (sends nothing yet) and email address and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book buttons and links in the nav, the phone menu, the footer and the Book a slot, Book an inspection and Book a maintenance wash links lead to #contact now; point them to your online booking page, or keep #contact once the form is connected.
See the work link on the first screen lead to #work now; point them to keep, or point to your gallery or Instagram.
Request an inspection button in the form lead to does not send anything: the form action is #, and section-script:contact checks name plus phone or email and shows the thank-you line now; point them to a form service (Formspree, Netlify Forms) or your own endpoint, or a link to your booking system.
Phone and email links in the contact details, the footer and the phone menu lead to tel: and mailto: placeholders now; point them to your real phone number and email address.
The form does not send anything yet: the action is # and the thank-you line comes from a script.
GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, so without that network access the page stays a static layout and the scenes do not run.
The reviews and process stages are pinned to the screen height (320vh and 250vh tracks), so on short landscape windows the cards and columns can be tight.
Nav hide-on-scroll, the sheen loop and hover transitions are separate from the scenes: the hide-on-scroll and hover effects keep running with reduced motion.

Questions about this car detailing website template

Is this one of the free auto detailing templates, and can I use it for client sites?

Yes. It is a single index.html under the MIT license, so a freelancer can use it for detailing clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and CREDITS.md lists the Unsplash photos and the Open Font License typefaces.

Where does the inspection form send its messages?

Nowhere yet. The form needs a name plus a phone number or an email, then shows a thank-you line that promises a call within one working day and clears the fields. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or point the booking links at your own booking page.

How do I hand it to Claude Code, Cursor or Codex?

Put index.html and AGENTS.md in an empty project folder with the curl lines from AGENTS.md, then tell the agent to read AGENTS.md before editing. Give it the files, not the page address. Cursor users can plan the edit first. To start from nothing, paste the car detailing website design prompt below into Lovable, v0 or Bolt.

Which parts of the file break if I change them?

Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists for each script. The wordmark and treatment names need a --len equal to their character count. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. Describe the site in a sentence and its engine designs a new one, with its own design, not this template. Designing and restyling are free; hosting with SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

How do I change the paint readings table?

Edit each row's panel name, its visible figure, the value attribute of its data element and the matching --measure-v in its style, which draws the bar without JavaScript. Bars are scaled to 240 µm in the CSS and the motion script, so change both for another scale. Rows can be added or removed.

Not a car detailing website? More free templates