# Free stonemason website template
> Free HTML stonemason website template for stone yards and restoration masons, with lettering prices. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
This stonemason website template is one free HTML file for a masonry yard that does repairs, new stonework and lettering. It has trade panels, a stone list, a four-step process, a team of seven, four recent jobs, lettering prices and an enquiry form. The page is near-black with light-grey panels, and AGENTS.md lets Claude Code or Cursor adapt it.
- Page: https://8b.com/templates/bankermark/
- Live demo: https://8b.com/templates/bankermark/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/bankermark/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/stonemason-website-template
- Download ZIP: https://8b.com/templates/bankermark/stonemason-website-template.zip
- Template name in the repository: Bankermark
- At a glance: One 100 KB index.html with its CSS and JavaScript inside, 13 sections, 17 Unsplash photos credited in CREDITS.md, Host Grotesk and Source Serif 4 from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); 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/stonemason-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/stonemason-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/stonemason-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/stonemason-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 name, Corsham details, stones, masons, jobs, prices and client quotes. Keep the section ids, the classes AGENTS.md lists and the SVG mark paths, and set the footer wordmark's len to the new name's length. Ask me for missing facts and never invent prices, licences, quotes 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/stonemason-website-template my-site`.
### Stonemason website design prompt for any AI tool
Use this to build a stonemason site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.
```text
Build a single-page website for a stonemason yard, in plain HTML, CSS and JavaScript with GSAP and ScrollTrigger from a CDN and no build step. Audience: homeowners, architects and heritage clients who want proof of craft before they ask for a visit. Sections in order: navigation, opening, trades as stacked panels, stones, a four-step process, masons with a drawn mark each, recent jobs, lettering prices, lime, client quotes, questions, contact form, footer with a large wordmark. Type: Host Grotesk, medium weight with tight tracking, for headings, body and buttons; Source Serif 4 only for the lettering inscription and client quotes. Colours: near-black #0e100e page ground, light grey #e7e7e5 panels with 28px corners and a 10px gap, ink #151614 for text on light panels, pale stone green #d9dcc4 for filled buttons and marks, tan #b39a7f for three small icons. Avoid purple gradients, stock icon grids, a centred hero with two buttons and round avatar testimonials. Motion: one idea, work being cut: panels stack over each other and each mason's mark draws stroke by stroke; all of it stops under prefers-reduced-motion. Copy: plain trade language, short sentences. Ask me for stones, area covered, prices, hours, team names, jobs and company number; never invent them, leave visible placeholders. One primary action, Book a site visit, repeated in the menu, the end of the process and the contact section. Mobile: check at 390 px, tap targets of at least 44 px, phone and email as links. Done when there are no console errors, keyboard focus is visible and every placeholder is listed.
```
## About
People who look for a stone mason website want the same few answers: which trades the yard offers, which stones it cuts, who does the work and what a finished job looks like. This masonry website puts them in that order, adds lettering prices and ends on a site visit form. A memorial cutter or a heritage bricklayer can reuse this stonemason website template for Claude Code and Cursor.
Give the agent the facts only the yard has: stones, areas covered, prices, hours, team names, jobs, company number and client quotes. It should replace the name in the bar, the footer wordmark and the copyright line, change both wordmark halves together with the len number, and swap the 17 stock photos. Each mason mark is an SVG path drawn on scroll, so it stays a path. Vibe coding with Claude Code or Cursor suits a single file.
This is the right base for a yard with several trades, a named team and a record of finished jobs. A general builder who mostly quotes extensions will find the [renovation contractor](https://8b.com/templates/ashlar/) template closer. A solo letter cutter needs fewer sections. The weak spot is the recent work track, which stays pinned for over a screen of scrolling on a phone. If nobody on your side edits code, 8B's builder can design a site from a sentence.
## Design
- Palette: #e7e7e5 (light panels (trades, process, recent work, lime, questions, footer), text on the dark sections, the logo and call pills, the stone cards), #151614 (text on light panels, the dark buttons, the pill around Menu and Book a site visit), #0e100e (page background, the opening, the full-screen menu and the shade over the clients photo), #d9dcc4 (pale stone green: the filled buttons, the Menu button, the mason marks, the lettering prices and inscription, the second contact heading line, button hover fills), #555753 (grey text on light panels: leads, labels, step text, job detail lines), #a2a69d (muted text and hairlines on the dark sections, the scratched colour of the inscription before it is cut), #fafaf8 (trade cards, badges, the frosted quote panes and form, the lime comparison card, the hover fill of the filled button), #b39a7f (tan: the three small icons under the opening text and the mark on the process photo)
- Fonts: Host Grotesk (headings (medium weight, tight tracking), body text, labels, buttons and the footer wordmark; one variable font from Google Fonts), Source Serif 4 (serif for the three-line lettering inscription (uppercase, wide tracking, weight animated on scroll) and the three client quotes; one variable font from Google Fonts)
A near-black ground with large light-grey panels, 28px corners and a 10px gap, alternating light panels (trades, process, recent work, lime, questions, footer) with open dark sections (opening, stones, masons, lettering, clients, contact). Headings are huge, tight grotesk. Most sections split into two columns. Stones are courses of a wall: a photo and a light card whose widths change from row to row. Masons are ruled rows, each with a drawn mark. A wordmark fills the footer.
Masonry web design here leans on restraint. The serif appears only in the inscription and the quotes, tan only in four small marks, and stone green fills the main buttons, which fill from two diagonal slices on hover. Pinned work panels [stack over each other](https://8b.com/templates/animated/) as you scroll.
## Sections and motion
- **Navigation** (navigation): floating bar: mark and wordmark, a Menu button, a Book a site visit button and a Call the yard link; a full-screen menu of ten numbered links. Motion: The bar hides when you scroll down past 140 px and returns on scroll up; the full-screen menu stops smooth scrolling while open.
- **Stone is cut once. We take our time over the cut.** (opening): first screen: h1, intro, two actions, three facts with icons, and a photo of a squared stone slab. Motion: On load the heading rises out of a clip, the text blocks fade up in turn and the slab photo settles; nothing moves on scroll.
- **Three trades at one banker** (trades): three trade panels that stack like blocks, each with a photo, a badge, a title, a paragraph, four jobs and a link (demo: repair and repointing, ashlar and steps, lettering and ornament). Motion: Each panel sticks and the next slides over it, while the covered card shrinks to 90% and darkens and the arriving photo settles from a closer crop.
- **Five stones on the banker this year** (stones): five stones as courses of a wall: photo, name, origin and a line (demo: Bath stone, Portland, York stone, Ham stone, Welsh slate) and a note on other stones. Motion: Each row slides in as it crosses the screen, the photo and the card from opposite sides, and the photo shrinks from a larger scale.
- **From the bed to the wall** (banker): a photo of rough stone blocks whose frame is cut step by step, beside four numbered process steps (demo: survey, sawing, working, signing and setting). Motion: As the four steps are read, the photo's frame goes from a rough outline to a sawn square, a moulded profile and the full block, and the mark draws stroke by stroke at the end.
- **Seven masons, seven marks** (masons): seven masons as rows with a drawn mark, name, role and a line (demo: Tom Hearn, Ellie Pratt, Dan Okafor, Martha Vowles, Sam Beddoe, Ruth Allard, Josh Tanner). Motion: Each mason's mark draws stroke by stroke as its row arrives.
- **Recent work** (work): pinned horizontal track of four jobs with photo, badge, title, a paragraph and a year, stone and client line (demo: a Georgian terrace, a church tower, a garden arch, a boundary wall). Motion: The stage pins and the four job cards slide sideways, each photo opening from a cropped frame to its full size.
- **Letters cut by hand** (lettering): a pinned inscription of three lines cut line by line, then a heading, a paragraph, three prices and a button (demo: house names from £380, memorials from £1,450, inscriptions by the letter). Motion: The three-line inscription is held on screen while ruled guides cross each line and its letters go from thin and pale to heavy and green.
- **Lime, never cement** (lime): a photo of hands with lime powder beside a heading, a paragraph, a lime versus cement comparison and a closing paragraph. Motion: The photo drops in with a slight turn and settles when it arrives.
- **What clients say once the scaffold comes down** (reviews): three client quotes on glass panes over a photo of an old stone wall. Motion: The wall photo drifts and zooms out while each quote pane climbs at its own speed and turns level.
- **Asked on site** (faq): six questions and answers as native rows with a plus icon (demo: listed buildings, travel, matching stone, memorial timing, cement, site visit cost). Motion: Each question row drops in and settles when it arrives; the plus turns to a cross when a row opens.
- **Bring us the stone, or the problem.** (contact): a two-line heading, yard details (address, phone, email, hours) and an enquiry form over a quarry photo. Motion: The two heading lines slide in from opposite sides and the quarry photo behind the form climbs and settles.
- **Footer** (footer): large split wordmark, a drawn mark, a short description, the yard details, contacts, page links and the copyright line with the company number. Motion: The footer mark draws stroke by stroke when it arrives.
## Good for
- stonemason or stone restoration yard
- memorial and letter-cutting workshop
- heritage builder, bricklayer or lime plasterer
- any craft trade with several services, a team and a portfolio of jobs
## Questions
**Is this stonemason template free to use?** Yes. It is MIT licensed, so it suits a client's yard or your own. The photos are Unsplash images listed in CREDITS.md; swap in the yard's own. Host it free from [its public repository with Pages](https://8b.com/templates/github/). Keep the header comment, the 8B meta tag and the Design: 8B footer link unless the site owner asks to remove it.
**How do I give this masonry website template to Claude Code or Cursor?** Put index.html and AGENTS.md in one folder, open it in Claude Code, Cursor or Codex and paste the prompt from this page; [the Codex CLI reads AGENTS.md unprompted](https://8b.com/templates/for-codex/). The curl commands in the repository fetch both files. To build from scratch instead, use the stonemason website design prompt below.
**What must I keep when I edit it?** Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each animated section, such as .tr-card, .wk-track and .lt-line. Keep each mason mark as path strokes inside its svg. Set the footer wordmark's len to the new name's length.
**Does the enquiry form send anything?** No. It checks the required fields, clears itself and shows a thank-you line, but sends nothing until you connect Formspree or Netlify Forms, or delete the form and its script. The phone and email links hold placeholder numbers. The Book a site visit buttons only jump to the form.
**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 it designs a new one, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.
**Does it work with reduced motion or without JavaScript?** It reads in full either way. With reduced motion the entrance and scroll animations and smooth scrolling are off, and recent work becomes a sideways-scrolling row, but the bar still hides on scroll and hover effects still run. Without JavaScript the Menu button does nothing and the form sends nothing; the question rows still open.
## Before publishing
Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).
- Book a site visit button in the nav, the opening and the footer lead to #contact, the enquiry form now; point them to your enquiry or booking page, or keep #contact once the form is connected.
- Call the yard link in the nav, and the phone and email links in the contact section and the footer lead to a tel: link and a mailto: link with placeholder numbers now; point them to your real phone number and email address.
- Ask about a repair, Send us your drawings and Commission an inscription links in the three trade cards, and the Commission an inscription button in the lettering section lead to #contact (the third card link goes to #lettering) now; point them to keep, or pages for each trade.
- See recent work link in the opening lead to #work now; point them to keep, or your portfolio page.
- The enquiry form is a placeholder: it resets and shows a thank-you line until you connect a form service.
- In the work section the cards sit on a pinned stage for as much scroll as the track is wider than the window: about one screen at 1440 px, about 1.4 screens on a 375 by 667 phone.
- Photos are 500 to 1600 px wide stock images loaded lazily; the wall behind the reviews has no alt text on purpose.
- GSAP, ScrollTrigger, SplitText and Lenis load from a CDN at the end of the body.
## 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 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).