# Free home renovation website template > Free HTML home renovation website template for builders, loft and extension firms, with square-foot prices. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/squarefoot/ - Live demo: https://8b.com/templates/squarefoot/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/squarefoot/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/home-renovation-website-template - Download ZIP: https://8b.com/templates/squarefoot/home-renovation-website-template.zip - Template name in the repository: Squarefoot - At a glance: 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. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash 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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . 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. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/home-renovation-website-template my-site`. ## About 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](https://8b.com/templates/ashlar/) 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. ## Design - 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. ## Sections and motion - **Navigation** (navigation): fixed paper strip: four-tile logo, wordmark, five links, Book a site visit button; two pencil notes in the corners; phone menu overlay. Motion: 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.** (opening): 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. Motion: 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** (method): 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. Motion: 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** (rooms): six services as the rooms of one floor plan, with door arcs and pencil labels (demo: refurbishment, cellar, kitchens, extensions, lofts, bathrooms). Motion: 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** (pricing): three sheets priced per square foot (demo: Refresh £65, Rebuild £140, Extend £210) with lists and buttons, and a footnote. Motion: Each price sheet drops a grid square and settles from a slight tilt as it arrives. - **Finished rooms** (projects): 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). Motion: 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** (diary): a two-page notebook of six weekly entries from one extension, with two taped photos (demo: Chorlton, weeks 1 to 11). Motion: 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** (letter): on a dark ground, a letter to the neighbours rises out of an envelope while four logo tiles float around it. Motion: 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** (snags): a snag list of six items that are struck through and ticked in turn, then stamped Signed off, beside the guarantee text. Motion: 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** (reviews): three short reviews on paper slips (demo: Chorlton, Didsbury, Levenshulme). Motion: Each review slip drops in and settles on arrival. - **Asked at the kitchen table** (faq): five questions in native disclosures inside a manila folder with a tab, beside a heading and a phone button. Motion: The folder slides up at a tilt and straightens before it settles, then stays still while the questions open. - **Book a free site visit** (contact): 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). Motion: A line draws above the send button when the form arrives. - **We build the room you keep sketching.** (footer): 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. Motion: Four tiles fly in turned from four directions and lock into the logo mark as the footer comes into view. ## Good for - home renovation or design-and-build firm - kitchen, bathroom, loft or extension specialist - architect or interior designer who also builds - any trade that quotes by area and wants to show its process and diary ## Questions **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](https://8b.com/). 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. ## Before publishing Replace: social preview image, favicon, phone number, contact form (sends nothing yet), email address and social media links, plus the invented demo facts (prices, dates, addresses). - 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. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 121+ (it uses color-mix(), :has(), cascade layers, small/dynamic viewport units).