Complete Roof Redesign — Roofing Contractor Website Redesign
An industrial, trust-driven static website redesign for a Wellington roofing contractor. Designed and hand-built by Themedown.
Quick Start
bash
git clone <repo-url>
cd complete-roof-redesign
# Open index.html in your browser, or use a local server:
python -m http.server 8000 --directory .
# or
npx serve .
No build step. No npm install. Just open and go.
Pages
| Page | Description |
|---|---|
| Home | Dark hero + certification trust strip + service card grid + process steps + testimonial + CTA |
| About | Timeline + credentials + director profile |
| Services | Detail rows (alternating layout + material/region tags) |
| Contact | Contact info + quote form |
Tech Stack
- HTML5 — Semantic elements, ARIA attributes
- CSS3 — Custom properties, Grid, clamp() fluid typography
- JavaScript — IIFE pattern, mobile menu toggle
- Google Fonts — Barlow Condensed, Inter, IBM Plex Mono
Features
- Fully responsive — 900px / 560px breakpoints
- Dark hero + material-tagged service cards + numbered process steps
- Corrugated steel profile divider (repeating-linear-gradient) — signature trade element
- Certification trust strip (LBP, RANZ, HazardCo)
- Alternating detail rows for services
- Site-wide free quote CTAs
- Accessible (focus-visible, aria-expanded)
- prefers-reduced-motion support
- Zero build tools, zero framework dependencies
Design System
See design.md for the complete design specification — color tokens, typography scale, layout rationale, and self-critique against generic AI design defaults.
Scripts
script.js— Mobile menu toggle (IIFE pattern)
License
MIT — free for personal and commercial use.
