Free home renovation 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: squarefoot.md, data: squarefoot.json

Home renovation website template: first screen on a phone

About this home renovation website template

Home renovation website template: one free HTML file for a design-and-build firm that does kitchens, extensions, lofts and bathrooms. A four-stage method, six services drawn as the rooms of a floor plan, square-foot prices, a site diary and a visit form sit on warm graph paper with pencil notes. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

At a glance, October 2026. One 109 KB index.html with its CSS and JavaScript inside, 13 sections, 13 Unsplash photos credited in CREDITS.md, Playpen Sans and Schibsted Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Firms looking for a construction company website template usually need to show how a job runs, not only a gallery. This one does: a measure, draw, build and hand-over method, three prices per square foot, five finished projects and a weekly diary from one extension. A home remodeling website for a kitchen fitter, a loft specialist or an architect who also builds can rename the rooms and keep the structure.

For vibe coding with Claude Code, Cursor or Codex, hand the agent the facts the demo invents: prices per square foot and what they include, guarantee terms, programme lengths, districts, insurance, certificates, real projects and permitted reviews. Replace the Manchester firm, phone, email and yard first, then the diary, the neighbours' letter and the snag list address. The plan is built for six rooms, the method for four photos and four steps.

Choose this for a house renovation website that sells design and build to homeowners, with a process, prices and a diary. A builder who wants stark black and white with one red, not graph paper, will find the general contractor template closer. The weak spot is the projects track: on wide screens the cards enter one pinned screen from the right, so at first you see mostly the heading. If nobody edits code, 8B's AI website builder is the no-code route.

Good for:

Home renovation or design-and-build firmKitchen, bathroom, loft or extension specialistArchitect or interior designer who also buildsAny trade that quotes by area and wants to show its process and diary

Turn the home renovation 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/home-renovation-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/home-renovation-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/home-renovation-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/home-renovation-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my building firm: name, area, services, prices per square foot and what they include, how a job runs, projects, guarantee, insurance, how people book a visit>. Replace first the Manchester details, phone, email, prices, five projects, diary, neighbours' letter, snag list street and reviews. Keep the section ids, four method photos and steps, six plan rooms with their data-dx and data-dy, and the footer wordmark len. Ask me for missing facts and never invent prices, guarantees, reviews or contacts.

In a terminal

npx degit 8bsite/home-renovation-website-template my-site

Home renovation website design and motion

Palette

#e9dfcb the paper ground under the graph grid, including the opening stage#2a2926 body text, the faint graph lines and the borders of the method steps and diary pages#2446d0 cobalt: the opening plan lines, room borders and titles, step numbers, the Extend sheet, the footer ground, button fill on hover and the duotone photos#1b2457 deep navy: button bases, the letter section ground, the footer panel and the dim over the opening photo#c23d27 vermilion: the Rebuild sheet, the icon tile in every button, diary margin lines and notes, snag ticks and strike lines, the Signed off stamp and the stamp box on the envelope#cfb98f manila: the Refresh sheet, the questions folder and its tab, the envelope, the tape on diary photos and the footer column titles#fbf8f1 warm white: the paper sheets and cards (nav strip, diary, letter, snag list, review slips, form), photo frames and captions, text on cobalt, vermilion and navy, and the stamp#48443d the grey-brown of pencil notes and small captions

Fonts

Schibsted Grotesk: headings, body text, labels and buttons, from regular to semibold
Playpen Sans: the handwritten pencil notes, set in capitals at small sizes

Warm graph paper runs behind the page as a CSS background of squares. Sections are physical objects: a tracing-paper sheet over a photo, a contact sheet of four photos, a floor plan of six rooms, three tilted price sheets, a ruled two-page notebook, a letter with its envelope on navy, a snag list and a manila folder of questions. Handwritten pencil notes sit beside most headings.

In construction website design this is stationery, not steel: cobalt for plan lines, room borders and the Extend sheet, navy for the main buttons, the letter and the footer panel, vermilion for the Rebuild sheet, snag ticks and the stamp. Photos stay cobalt duotone; only the projects develop into colour.

Every value of this home renovation 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 home renovation website page

Navigation
Fixed paper strip: four-tile logo, wordmark, five links, Book a site visit button; two pencil notes in the corners; phone menu overlay
The strip hides while you scroll down and returns on scroll up, and the phone menu opens as a full-screen overlay.
One sheet of graph paper, one crew.
A full-screen sunlit-room photo in blue duotone with a paper sheet laid over it: heading, intro, pencil note, two actions and a small drawn plan
On load the photo fades in, the sheet drops in at a tilt and the plan's lines draw one after another, while a soft shaft of light loops across the photo.
From pencil to keys, with the same four people
Four stages (measure, draw, build, hand over) as a 2×2 contact sheet of photos that the camera zooms across, beside the four step texts
Pinned: the contact sheet stays in view and the camera zooms into each photo in turn as its step reaches the middle of the screen.
What we build, room by room
Six services as the rooms of one floor plan, with door arcs and pencil labels (demo: refurbishment, cellar, kitchens, extensions, lofts, bathrooms)
The six rooms start apart and slide together into one floor plan as it scrolls into view, snapping to whole grid squares.
Priced by the square foot
Three sheets priced per square foot (demo: Refresh £65, Rebuild £140, Extend £210) with lists and buttons, and a footnote
Each price sheet drops a grid square and settles from a slight tilt as it arrives.
Finished rooms
Five finished rooms on a horizontal track that turn from blue duotone to full colour, with place, type and duration (demo: Chorlton, Didsbury, Levenshulme, Whalley Range, Burnage)
On wide screens the section pins and a track of five cards runs sideways, each card developing from cobalt duotone to full colour at the centre.
The site diary
A two-page notebook of six weekly entries from one extension, with two taped photos (demo: Chorlton, weeks 1 to 11)
The two photos settle into place and a ruled line draws under four of the six entries on arrival.
Before we start, we write to your neighbours
On a dark ground, a letter to the neighbours rises out of an envelope while four logo tiles float around it
The letter rises out of its envelope as it scrolls into view while four logo tiles drift in and grow.
The snag list ends empty
A snag list of six items that are struck through and ticked in turn, then stamped Signed off, beside the guarantee text
The six items are struck through and ticked one by one as you scroll, then the stamp lands at a tilt.
Heard over the garden fence
Three short reviews on paper slips (demo: Chorlton, Didsbury, Levenshulme)
Each review slip drops in and settles on arrival.
Asked at the kitchen table
Five questions in native disclosures inside a manila folder with a tab, beside a heading and a phone button
The folder slides up at a tilt and straightens before it settles, then stays still while the questions open.
Book a free site visit
Site-visit form with six fields, one of them a room select, beside a duotone street photo and a contact list (phone, email, yard, areas)
A line draws above the send button when the form arrives.
We build the room you keep sketching.
Dark footer: four tiles that lock into the logo mark, a closing line, link columns, a large wordmark and the copyright with the Design: 8B credit
Four tiles fly in turned from four directions and lock into the logo mark as the footer comes into view.

Before you publish the home renovation website site

Replace social preview image, favicon, phone number, contact form (sends nothing yet), email address and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a site visit buttons in the nav, the phone menu and the footer, and the Book a free site visit, Start with a site visit and Price my room, rebuild and extension buttons lead to #contact now; point them to your booking or enquiry page, or keep #contact once the form is connected.
See finished rooms link in the opening sheet lead to #projects now; point them to keep it, or point it to a project gallery or portfolio page.
Request a visit button in the contact form lead to submits the form and shows the thank-you line, nothing is sent now; point them to your form service (Formspree, Netlify Forms) in the form's action, or an email or CRM handler.
Phone button in the questions folder, the phone note in the nav and menu, and the contact and footer phone links lead to tel: link to the placeholder 0161 000 0000 now; point them to your real phone number in the tel: href and the visible text.
Email links in the contact list and the footer lead to mailto: link to the placeholder hello@squarefoot.example now; point them to your real address.
Privacy and Terms links in the footer lead to #footer now; point them to your privacy policy and terms pages.
The contact form sends nothing: with JavaScript it shows the thank-you line, without it the form posts to #contact. Connect a form service before publishing.
On wide screens the projects section pins and a horizontal track runs through it; on every screen wider than 860 px the intro and the cards share one pinned screen and the track starts off to the right, so the first moments show mostly the heading until the first card arrives.
The pencil notes are in a handwriting font at small sizes in grey; check them at 375 px when you change the copy, since they sit above or beside headings.
The footer wordmark and the nav corner notes are decorative or hidden on narrow screens: the corner notes with the phone and "since 2011" show only above 1180 px.

Questions about this home renovation website template

Is this a free home renovation website template I can use for client sites?

Yes, like the free construction website templates it is one index.html under the MIT license, so a freelancer can ship it for clients at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, and the photos and fonts are listed in CREDITS.md.

Does it work as a construction company website, or only for renovations?

It works for any firm that quotes by area and wants to show its process, such as extension, loft or kitchen builders. Rename the six rooms, packages and projects. The copy talks about older houses and snag lists, so a firm doing commercial or large new builds should choose another template.

Where does the site-visit form send enquiries?

Nowhere yet. It requires a name and phone, shows the thank-you line and resets, sending nothing. Connect Formspree or Netlify Forms using the steps in AGENTS.md, or delete the form and keep the phone and email links. Without JavaScript the form posts to #contact.

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

Put index.html and AGENTS.md in an empty folder with the curl lines from AGENTS.md, then tell the agent to read AGENTS.md before editing index.html. Give it the files, not the page address, because a link comes back as a summary. Then paste the prompt from this page, filled in with your facts.

What must I keep when I edit it?

Keep the section ids, data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists, the four method photos and steps, and each room's data-dx, data-dy and class. Match the footer wordmark len to the name. 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. You describe the site in a sentence and its engine designs a new site of its own, not this template. Designing and restyling are free; publishing with hosting and SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a home renovation website? More free templates