Electrical Contractor — Multi-Page Website

The brief

A family-run father-and-son electrical business needed a professional online presence to reflect the quality and reliability of their work. They had no existing website — just word-of-mouth and local reputation. The goal was to build something clean, credible, and easy to navigate that would work for both homeowners and commercial clients searching for an electrician in North Wales.

The site needed to clearly separate their three core service areas, include a working contact form, and be fully owned as a static HTML & CSS build — no CMS dependency, no ongoing platform fees.

What was built

• Homepage — FlexSlider hero, services overview, about section, team, portfolio gallery, and contact form
• Domestic page — full service breakdown for homeowners covering sockets, rewires, fuse boxes, and smart home cabling
• Commercial page — dedicated page for offices, shops, and industrial clients covering fit-outs, maintenance, and compliance
• Inspection & Testing page — PAT testing, safety checks, EICR certificates, and emergency lighting with a clear CTA to book
• Contact form integrated with Getform.io for no-backend form submission directly to the client's inbox
• Fully responsive — Bootstrap grid, collapsible mobile navigation, and fluid images throughout

How it was designed

The visual direction was built around trust and professionalism — a clean white base with strong red accents ( #ed3223) to convey confidence without being corporate or cold. Raleway was chosen as the sole typeface for its geometric clarity and legibility at all weights.

Each service page follows the same layout pattern: a full-width FlexSlider hero image with caption overlay, a two-column content block with service list and supporting image, a branded callout divider, and a footer. This gave the site consistency while allowing each page to feel purpose-built for its audience.

WOW.js scroll animations were used throughout to add motion on entry, keeping the experience lively without being distracting. The portfolio grid on the homepage uses Isotope for category filtering — letting visitors drill into commercial, domestic, or inspection work specifically.

Built with

What this project showed

Building a consistent multi-page static site without a CMS is a good discipline — every component, every nav item, every footer has to be maintained manually across pages, which pushes you to write clean, reusable CSS from the start. The shared style.css grew to cover global layout, responsive breakpoints, service-specific sections, and animation states all in one file.

It also reinforced how much impact a clear information hierarchy has for trade businesses. The brief was simple — three services, one contact form — but structuring that clearly, with consistent CTAs and a logical page flow, makes the difference between a site that generates enquiries and one that doesn't.