Mason & Co.. Free construction HTML & Astro template

About Mason & Co.

Mason & Co. is an eight-page construction and renovation template with the familiar structure of a business theme: a contact strip, white main navigation, a construction photograph beside a bold introduction, service cards and a project grid. Barlow Condensed headings, steel blue and brick-red accents give it an industrial identity. The inner pages contain practical service scopes, a complete renovation detail and an illustrative kitchen project brief.

Best suited to: Independent builders, renovation contractors and small commercial fit-out firms that need clear services, project briefs and an enquiry route.

Desktop and mobile screenshots

Captured from version 1.0.0 on 29 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 8-page design. Neither requires an account, subscription, or license key.

What’s in the design

• Home uses a conventional contact/header arrangement, a wide construction image, a three-service grid, company introduction, project studies, process notes and an enquiry band.
• Services describes renovations, new homes and commercial fit-out, with preparation topics and scope notes. Renovation has one full separate service-detail page; the other two services have detailed sections in Services.
• Projects contains three illustrative briefs and category filters: one renovation, one new-home and one commercial example. Garden Kitchen has one separate project page; the other two include inline project notes.
• The project page includes two licensed images, practical coordination decisions, scope/status facts and handover notes. The native image viewer supports Previous/Next, arrow keys, Escape and focus restoration.
• The enquiry validates required name, email and message fields and collects project type, location and intended timeframe. Service links preselect an allowed project type.
• Barlow Condensed, Source Sans 3, four responsive photographs and the original brick-mark identity are served locally. No fabricated awards, client reviews or certification claims are included.

Verified page layouts

These 8 pages are included in both archives. Each link opens the live preview.

• Home ↗index.html
• About ↗about.html
• Services ↗services.html
• Renovation service detail ↗service.html
• Projects ↗projects.html
• Garden Kitchen project detail ↗project.html
• Contact ↗contact.html
• 404 ↗404.html

How project enquiries work

The form validates labeled name, email and message fields, then builds an encoded email draft containing project type, intended timeframe, location and the brief. Nothing is sent or stored by the website. A visitor opens a configured email app, reviews the draft and sends it themselves.

The [email protected] mailbox is reserved sample data and cannot receive email. Replace it before launch. Without JavaScript a direct email link remains available. No automatic quote, cost estimate or start date is confirmed; direct delivery requires a separate tested backend.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

• Choose HTML for direct file editing, or Astro for shared layouts and source-driven content.
• Replace the fictional identity, email, office details and service/project claims with accurate information.
• Edit src/site.ts for services and project briefs; src/pages/ holds the page compositions.
• Replace photos with properly licensed imagery. Update variants, src/images.json dimensions, alt text and ASSETS.md credits together.
• Replace the reserved .example recipient and verify the project-type enquiry fields. No quote or start date is confirmed.
• Set PUBLIC_SITE_URL to the real domain/folder URL with a trailing slash for canonical/social metadata, robots.txt and a 7-page sitemap. Leave PUBLIC_PREVIEW unset for production.
• Upload the entire HTML folder or Astro dist/. Configure unknown URLs to return 404.html with HTTP 404 status. Connect a separately tested delivery backend if enquiries must send directly.

A static company website with no CMS, project-management platform, automatic estimator or message-delivery backend. One service and one project have separate detail pages; the other services and projects have detailed index sections.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

The construction image is by Josh Olalde; interior images are by Francesca Tosolini under the Unsplash License. They illustrate the design, not Mason employees or completed commissions. Barlow Condensed and Source Sans 3 use SIL OFL. The original brick mark and code are MIT. Unsplash License. Full asset credits.

Release verification

Both exact release archives were extracted and inspected. Each standalone source passed a clean npm ci, Astro check and production build outside our workspace; its HTML output matched the HTML edition byte for byte. Production domain/subfolder metadata, sitemap generation and noindex preview mode were tested. All page layouts fit 320px without document overflow. Local Lighthouse runs across every page on mobile and representative desktop pages scored 99–100 performance and 100 automated accessibility. These are lab results, not complete accessibility certification.

Version 1.0.0, reviewed 29 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Mason & Co. is a fictional company. Project briefs, office location and service descriptions are sample content; photographs do not show its work or staff.