Swatchworks Painting Co. — Painting Contractor Website (7 Pages)
A 7-page website for a house painting contractor — bold colour-swatch collage design with paint-chip cards, brushstroke reveals, a working room colour visualiser, finish guide, before/after sliders, filterable gallery, process timeline, estimate price-range helper and a free estimate form, with HousePainter SEO markup.




Preview
What you can customize
Each section below becomes a guided form field in your library after purchase — no prompting experience required.
- 1
Home
Collage hero with taped photos over colour blocks, paint-chip stat cards, six service chips, colour ticker, fan deck that opens, before/after slider, painted process stroke, reviews band with drips, warranty badge.
2 editable fields
- 2
Interior Painting
Five surface chips (walls, ceilings, trim & doors, cabinets, accent walls), stacking prep cards (patch, sand, caulk, prime), cabinet refinishing, accent walls, FAQ.
2 editable fields
- 3
Exterior Painting
Siding, trim, decks & fences and stucco chips, Colorado season tabs, exterior prep, lead-safe (RRP) note for pre-1978 homes, FAQ.
2 editable fields
- 4
Color Help
Working room color visualizer (wall + trim swatches recolor an SVG room), finish guide with sheen meters, color tips, consultation offer with fan deck.
2 editable fields
- 5
Our Work
Three before/after sliders in taped frames, filterable project gallery, count-up project stats, six reviews.
2 editable fields
- 6
Our Process
Five-step timeline painted as a stroke, how we protect your home, warranty badge and sample terms, day-by-day sample schedule, FAQ.
2 editable fields
- 7
Free Estimate
Per-room price-range helper and the free estimate request form with next steps and service areas.
2 editable fields
Launching it is simple: download the files, publish it live to your own Vercel account, or push it to your own GitHub — see how to launch your AI Tapz website.
Usage instructions
7 pages, each a complete, self-contained HTML page — a bold colour-swatch collage design for a painting contractor: warm white plaster base and charcoal ink with one bold swatch accent per section (terracotta, cobalt, ochre, sage, plum), Syne ExtraBold headlines over Karla, paint-chip cards, torn masking-tape labels, brushstroke shapes, taped and rotated photo collages, and paint drips along the top of coloured bands. 1. Home (index.html) — collage hero, paint-chip stat cards, six service chips, colour-name ticker, fan deck of colour chips, before/after slider, five-step process stroke, reviews, warranty badge. 2. Interior Painting (interior.html) — walls, ceilings, trim & doors, cabinets and accent walls; stacking prep cards (patch, sand, caulk, prime); cabinet refinishing; accent walls; FAQ (FAQPage markup). 3. Exterior Painting (exterior.html) — siding, trim, decks & fences, stucco; season tabs; exterior prep; lead-safe note for pre-1978 homes; FAQ. 4. Color Help (color-help.html) — working room colour visualiser, finish guide with sheen and washability meters, colour tips, consultation offer. 5. Our Work (our-work.html) — three before/after sliders, filterable project gallery, project stats, six reviews. 6. Our Process (process.html) — five-step painted timeline, how we protect your home, warranty and sample terms, sample day-by-day schedule, FAQ. 7. Free Estimate (estimate.html) — estimate price-range helper and the estimate request form. ANIMATION. Headings are revealed by a brushstroke that sweeps across them; collage photos wipe in; the fan deck of colour chips fans open when it scrolls into view; the "Free estimate" button's roller-stroke underline paints itself in; the process stroke and the timeline line draw themselves; stats count up (they read the number you type); the colour ticker scrolls; finish meters fill; the warranty badge ring turns slowly. Everything is visible without JavaScript, and visitors who ask for reduced motion see a still page. COLOR VISUALIZER. It works in the browser. Each swatch is a radio input whose value is the colour (hex) and whose data-name is the label; data-target="wall" or "trim" picks the surface. Edit or add swatches in the page HTML (the visualiser is marked data-no-edit so clicks don't open the text editor). The room drawing is inline SVG; its wall and trim shapes use the --pw-wall and --pw-trim variables. PRICE-RANGE HELPER. Per-room ranges are the size dropdown's option values ("low-high", in dollars per room); each add-on checkbox carries data-lo / data-hi (dollars per room) or data-pct (a percentage added to both ends). Replace the sample numbers with your own rates. The result is labelled as a sample estimate, not a quote. GALLERY FILTER & BEFORE/AFTER. Filter chips use data-filter; each photo's data-cat lists its categories (interior, exterior, cabinets, accent), space-separated. Each before/after slider is two ordinary images — the samples pair two different rooms and are labelled "sample project"; replace both with your own photos of the same room. FONTS. Syne and Karla load from Google Fonts via @font-face in each page's style block, with system sans-serif fallbacks. SEO. Each page opens with a labeled block (title, meta description, canonical link, Open Graph tags and JSON-LD with a HousePainter business entity on every page, plus WebPage, FAQPage, CollectionPage or ContactPage). Copy it into your real <head> when you deploy, and update the domain, address, rating and areas served. FORMS. The free estimate form posts nowhere and takes no uploads — connect it to your CRM or form service before publishing. EDITING. Change colors and fonts site-wide in the editor's Theme panel; edit the header or footer once and use "Apply to all pages"; sections can be moved, duplicated, hidden or deleted; use the Tablet and Mobile views for device-specific tweaks. CLAIMS & SAMPLE CONTENT. The company name, address, phone, email, prices (per-room ranges, the $95 consultation, deposit), warranty terms, statistics, ratings, service areas and reviews are fictional samples — replace them with your own. The "RRP-certified" and "lead-safe certified firm" lines are samples: only claim EPA RRP certification if your firm and renovators are actually certified. Colour names are generic and the chip codes (SW·011 and so on) are made up — they are not any paint manufacturer's names or codes; match real colours to the paint line you use. Season and temperature notes are general guidance — follow your paint manufacturer's application limits. IMAGES. All photography is real Unsplash stock, self-hosted under /content-images. Painters are shown from the waist down only, so no photo shows a recognisable face. Room photos are generic interiors used as sample projects — replace them with photos of your own work.
Reviews
No reviews yet — be the first once you've used this template.