Waida Studio
A roof is bought on trust and specified on numbers. Steelcrest is a hand-coded HTML template for roofing contractors, cladding specialists, building envelope firms and construction companies that need to show the work, publish the materials with a price, and take the enquiry or the order at the end.
Built with clean HTML5, CSS3 and vanilla JavaScript, Steelcrest pairs a graphite-and-white palette with a complete site: a six-project case study section with its own detail pages, five service pages, a six-material shop with a working cart and a three-page checkout, two service plans with monthly and yearly pricing, and a seven-article blog with category tabs — all running in the browser with no jQuery, no framework and no build step.
Whether you fit residential roofs, install commercial systems, supply panels and tiles by the square metre, or handle storm damage at short notice, Steelcrest provides every page and component needed to make the work look substantial and the next step obvious.
Designed for Roofing and Construction
Steelcrest is organised around the way a roofing job is actually decided: what has been built, what it is made of, what it costs, and who is doing it. The template includes purpose-built sections for a full-bleed hero, slot-machine counters for headline figures, a three-step process row that widens as you move across it, a before-and-after comparison row, a materials grid, a stacking service card scrub, a testimonial rail driven by scroll position, an FAQ accordion, and a product detail page with an add-to-cart form.
With a palette of graphite, off-white and steel grey, Inter throughout, a background film behind the testimonials and scroll-linked motion applied with restraint, every page keeps attention on the work rather than on the interface.
Key Features
Clean design in graphite, off-white and steel grey
Fully responsive across all devices
Built with HTML5, CSS3 and vanilla JavaScript
No jQuery, no frameworks, no build step required
Six roofing material products with full detail pages
Slide-out cart and a three-page checkout, all in localStorage
Six project case studies with type, location, year and material
Five service pages with their own scope and inclusions
Two service plans with monthly and yearly pricing
Seven full-length blog articles with author and date
Blog category tabs, navigable from the keyboard
A category page for the materials catalogue
Slot-machine counters that spin two reels per digit
Process and comparison rows that widen on hover
Stacking service cards driven by scroll position
Testimonial rail scrubbed by the page scroll
Background film with a real play and pause control
Client logo ticker that loops without a seam
Pages mega-menu that opens on hover and from the keyboard
FAQ accordion on the home, pricing and product pages
Contact page with an enquiry form and three departments
Password-protected, 404, style guide and licence pages
Self-hosted web fonts, no third-party requests
One stylesheet and one script, easy to maintain
SEO-friendly, semantic code structure with a single H1 per page
Skip link, landmarks and a heading outline with no gaps
Every control keyboard reachable and screen-reader named
Respects prefers-reduced-motion throughout
Readable with JavaScript switched off
Perfect For
Roofing contractors and re-roofing specialists
Metal roofing and standing seam installers
Cladding and building envelope companies
Roofing material suppliers and merchants
General building and construction firms
Storm damage and emergency repair services
Guttering, fascia and soffit installers
Commercial and industrial roofing companies
Solar mounting and rooftop systems installers
Any trade whose work is judged from the ground
Performance & User Experience
Steelcrest ships as one stylesheet, one script and its own fonts. There is no runtime to boot, no framework to parse and no third-party request on any page, so a project page paints as soon as its HTML arrives. The background film is held back until a visitor scrolls to it, and images are served in modern formats at the sizes the layout actually asks for.
Every interaction is a real control. The navigation, the mega-menu, all four tab sets, both accordions, the cart, the video button and every card hover are buttons a keyboard can reach and a screen reader can name, each page has a skip link and exactly one H1, and every animation stops when the visitor's system asks for less motion. With JavaScript switched off the whole site still reads: nothing is hidden behind a script that has to run first.
Why Choose Steelcrest?
Steelcrest gives a roofing business the two things its site has to do well — make finished work look worth paying for, and make the quote easy to ask for — in code clean enough to hand to any developer, with no framework to learn, no build to run and nothing to keep up to date.