Free stonemason 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: bankermark.md, data: bankermark.json

Stonemason website template: first screen on a phone

About this stonemason website template

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.

At a glance, October 2026. 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.

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 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.

Good for:

Stonemason or stone restoration yardMemorial and letter-cutting workshopHeritage builder, bricklayer or lime plastererAny craft trade with several services, a team and a portfolio of jobs

Turn the stonemason 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/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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my stonemasonry yard: name, town, trades, stones cut, how a job runs, team and roles, recent jobs, lettering prices, area covered, hours, phone, email, company number>. 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.

In a terminal

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.

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.

Stonemason website design and motion

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 as you scroll.

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

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
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.
First screen: h1, intro, two actions, three facts with icons, and a photo of a squared stone slab
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
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)
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
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
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
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)
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
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)
Each mason's mark draws stroke by stroke as its row arrives.
Recent 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)
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
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)
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
A photo of hands with lime powder beside a heading, a paragraph, a lime versus cement comparison and a closing paragraph
The photo drops in with a slight turn and settles when it arrives.
What clients say once the scaffold comes down
Three client quotes on glass panes over a photo of an old stone wall
The wall photo drifts and zooms out while each quote pane climbs at its own speed and turns level.
Asked on site
Six questions and answers as native <details> rows with a plus icon (demo: listed buildings, travel, matching stone, memorial timing, cement, site visit cost)
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.
A two-line heading, yard details (address, phone, email, hours) and an enquiry form over a quarry photo
The two heading lines slide in from opposite sides and the quarry photo behind the form climbs and settles.
Footer
Large split wordmark, a drawn mark, a short description, the yard details, contacts, page links and the copyright line with the company number
The footer mark draws stroke by stroke when it arrives.

Before you publish the stonemason website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this stonemason website template

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. 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. 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. 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.

Not a stonemason website? More free templates