Cedar Roofing. Free roofing and roof care HTML & Astro template

About Cedar Roofing

Slate/navy and copper; broad landscape roofing photograph below a solid masthead, a left-aligned service index, straight rules and a full-width material comparison. Heavy condensed headings paired with readable neutral body text. Avoid rounded floating cards. Roof repairs, replacement and planned care. Tell us about the building, the covering and the work you have noticed.

Best suited to: Independent roofing and roof care websites that need complete information pages and a straightforward enquiry path.

Design reference: JTC Roofing. The homepage separates roof materials from company navigation, introduces services with labeled photographs, and provides distinct project and quotation routes. Cedar borrows the material-first browsing hierarchy, without its accreditation marks or commercial claims. The template uses original branding, writing and code.

Desktop and mobile screenshots

Captured from version 1.0.0 on 2 November 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 9-page design. Confirm your email to download. Newsletter emails are optional; no account or license key is needed.

What’s in the design

• Nine complete pages: Home, About Cedar Roofing, Roofing services, Roof repairs, Roof replacement, Planned roof care, Planning a roofing enquiry, Contact & enquiries, Page not found.
• Three full service or programme pages explain the scope, included details and questions to discuss before arranging anything.
• Combined keyword and option filters include a result count, reset and empty state. Every option remains visible without JavaScript.
• The practical guide has dedicated sections, anchor navigation and print styles. FAQs use native accessible disclosures.
• Mobile navigation works without JavaScript. Escape closes the enhanced menu and restores focus.
• The contact form prepares a validated, encoded email draft, with allowlisted topic preselection and stale-draft clearing. It does not send a message or book anything.

Verified page layouts

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

• Home ↗index.html
• About Cedar Roofing ↗about.html
• Roofing services ↗services.html
• Roof repairs ↗roof-repairs.html
• Roof replacement ↗roof-replacement.html
• Planned roof care ↗planned-roof-care.html
• Planning a roofing enquiry ↗guide.html
• Contact & enquiries ↗contact.html
• Page not found ↗404.html

How Cedar Roofing enquiries work

The form validates a name, email and message, then prepares a mailto draft to review in your email app. It does not send messages, reserve services, take payments or confirm availability. Replace [email protected] with a monitored address.

Known service query values preselect an existing option; unknown values are ignored. Submit stays disabled until JavaScript is ready, and a direct email link is available without it. Editing fields hides the earlier draft.

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.5 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 plain HTML for direct editing and upload, or the Astro edition for shared layouts and source-driven content.
• Edit src/content.json for the identity, offers, practical guide, FAQs and descriptions. Keep all three service-page slugs aligned with their page files.
• Edit src/theme.css and src/browser.js for presentation and enhancements. Replace the sample email and test the draft workflow or integrate a separately tested delivery backend.
• Keep LICENSE and ASSETS.md, replace photographs only with licensed assets, and maintain responsive variants and accurate alt descriptions.
• Set PUBLIC_SITE_URL to your actual domain or folder URL with a trailing slash before building. Leave PUBLIC_PREVIEW unset for production. The 404 page remains noindex; configure its HTTP status on your host.
• Production-site research reference: JTC Roofing — https://www.jtcroofing.co.uk/. This is an original adaptation; reference code, copy and branding are not included.

No message-delivery backend, checkout, payments, accounts, reservations, live availability or business management system. Replace demonstration content with accurate authorized information before using the template.

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.

Local photographs carry separate source and license credits in ASSETS.md. System fonts require no downloaded font files. Original code, fictional identity and writing are MIT. Separate photograph license. Full asset credits.

Release verification

Archive extraction, standalone npm ci/check/build, matching HTML, root/subfolder metadata and preview noindex checks passed. Playwright covers all nine pages across 320, 390, 768 and 1440 pixel widths and tests the actual browsing and enquiry interactions. Automated tests do not establish full WCAG compliance or field performance.

Version 1.0.0, reviewed 2 November 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Cedar Roofing, offers, business details and contact information are fictional illustrative content. Photographs show separate subjects and are not evidence of actual premises, staff or completed work. No affiliation with the research reference is implied.