# Ashlar Build, a free construction company website template > One-page website for a construction company: a home renovation and extension contractor. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). A one-page site for a Brooklyn builder that does kitchens, bathrooms, lofts, rear extensions and restoration, with services and prices, a survey, finished work, crew, reviews and a site-visit form. Strict black, white and grey with one red for measuring marks; a wall of grey blocks comes apart into the room photo, scattered photos settle into a contact sheet and the word "Fixed" condenses as you scroll. - Page: https://8b.com/templates/ashlar/ - Live demo: https://8bsite.github.io/construction-company-website-template/ - Repository (GitHub template): https://github.com/8bsite/construction-company-website-template - Download ZIP: https://github.com/8bsite/construction-company-website-template/archive/refs/heads/main.zip - Size: 107 KB, 30 photos (Unsplash), fonts: Host Grotesk and TikTok Sans - Motion: GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll ## 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/construction-company-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/construction-company-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/construction-company-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/construction-company-website-template/main/CREDITS.md ``` Then: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a site for . Keep the layout, the motion and the single-file format; replace the brand name, copy, photos (use your own projects and team), prices, links and contacts, and recolour it through the CSS variables if needed. ``` 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/construction-company-website-template my-site`. ## Design Ashlar Build is a construction company website template for a renovation and extension contractor: services with prices, a measured survey, finished rooms, crew, reviews and a site-visit form. The look is black, white and grey with red measuring marks. It suits a builder or design-and-build practice that wants its site to book site visits. - Palette: #ffffff (white page background), #0c0c0c (black text, gallery and footer), #f2f2f2 (light grey panels and form sheet), #dcdcdc (pale grey hairlines and blocks), #444444 (dark grey blocks and button hover), #2a2a2a (charcoal cards and blocks), #d4351c (red dimension lines and link underlines), #6b6b6b (grey small labels) - Fonts: Host Grotesk (headings and body: large regular weight, very tight letter spacing), TikTok Sans (the huge word Fixed: condensed and as wide as the screen) A 12-column grid with hairline rules and square corners. Grey labels in brackets number every chapter, and the top bar shows the current one. Red dimension lines measure the survey photo and the form, grey blocks build a wall on the first screen, and the work stages are laid as wall courses. ## Sections and motion - **Navigation** (navigation): top bar: wordmark, current chapter with previous/next arrows, Book a visit, Index overlay - **Homes rebuilt in the right order.** (opening): first screen: headline, lead, two buttons and a wall of grey blocks; second screen: room photo with a statement panel and three facts. Motion: Smooth scrolling throughout; headings rise into place. On scroll the grey wall breaks apart block by block and the white page opens from its outline onto a room photo. - **Five kinds of job, one way of working** (services): list of services with duration and starting price beside a sticky photo frame (demo: kitchens, bathrooms, lofts, extensions, restoration). Motion: As each service reaches the middle, its photo wipes up over the last in the sticky frame, the crop changes and other rows dim. - **A fixed price, from a measured survey.** (survey): how quoting works: a measured photo with red dimension lines and four numbered notes. Motion: As the survey photo scrolls into view it opens out from a rounded inset, and red width and height lines draw across it. - **Rooms we handed back** (work): black gallery: twelve project photos with room and neighbourhood captions. Motion: On wide screens the gallery pins while twelve scattered, tilted photos settle into a square contact sheet as you scroll. - **Five materials we keep coming back to** (materials): five material strips with a photo, name and use (demo: plaster, oak, marble, slate, steel). Motion: Five material strips start folded into narrow grey bands at the right edge and fan out across the row as you scroll. - **Built in the order a house is built** (process): five work stages laid as blocks of a wall, each with a week range. Motion: On wide screens the section pins and the stage blocks fly in from alternate sides, building the wall from the bottom up. - **Fixed** (promise): guarantees: one huge condensed word and three written promises. Motion: The word Fixed squeezes from wide to condensed as you scroll, with four copies sliding down into it. - **The people who quote are the people on site** (crew): team row: five portraits at varied heights with name and trade, Shuffle button. Motion: Portraits open out from rounded insets as they scroll into view; the Shuffle button reorders the crew on click. - **What people say after handover** (reviews): four client quotes on grey-to-black cards that stack as you scroll. Motion: Review cards stick and stack as you scroll, each shrinking and fading as the next slides over it. - **Before you call** (faq): questions and answers (native
) - **Book a site visit** (contact): site-visit request: address, phone, email, hours, a photo and a form (placeholders). Motion: Tied to scroll, the two heading lines slide in from opposite sides and the grey form sheet unfolds downward. - **Footer** (footer): black footer: big back-to-top link, address, contacts, section links, licence line, copyright and the Design: 8B credit ## Good for - builder, general contractor or renovation company - kitchen, bathroom or loft conversion specialist - architect or design-and-build practice - any trade business that quotes from a site visit ## Questions **Does the site-visit form send requests?** Not yet. It asks for name, phone, email, address, kind of job and a note, needs a name plus an email or phone, and sends nothing until you connect Formspree, Netlify Forms or a similar service. **Where do I change prices and timings?** Starting prices and week ranges sit under each service, stage weeks in the order of work and the survey fee in its notes, all as plain HTML text in index.html. ## Before publishing Replace: social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.