# Free electrician website template
> Free HTML electrician website template for home electricians with fixed prices and landlord reports. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Electrician website template: one free HTML file for a home electrician, with a three-step process, room-by-room services, a fixed price list of eight jobs, a landlord checklist, an out-of-hours line and a visit form. Cream sheets sit on dark green with one aqua accent. AGENTS.md is included, so an AI agent can adapt it.
- Page: https://8b.com/templates/ohmstead/
- Live demo: https://8b.com/templates/ohmstead/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/ohmstead/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/electrician-website-template
- Download ZIP: https://8b.com/templates/ohmstead/electrician-website-template.zip
- Template name in the repository: Ohmstead
- At a glance: One 81 KB index.html with its CSS and JavaScript inside, 13 sections, 14 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.
## Use it with an AI coding agent
Download the files into the project (Windows PowerShell: `curl.exe`):
```bash
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make this the site for . Replace first the company name, the Sheffield places, the eight prices, the team, the reviews and the phone numbers. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the selectors AGENTS.md lists and one photo per room. Ask me for missing facts; never invent prices, registrations, cover, hours, addresses, reviews or contacts.
```
Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/electrician-website-template my-site`.
### Electrician website design prompt for any AI tool
Use this to build an electrician site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions, the opposite of a page nobody designed; with the template itself, the short prompt above is enough.
```text
Build a one-page website for a home electrician who quotes fixed prices, books landlord safety reports and keeps an out-of-hours line open. Audience: homeowners and landlords. Plain HTML and CSS with GSAP, ScrollTrigger, SplitText and Lenis, no build step. Section order: floating nav, opening sheet with a three-step process, services listed by room beside a sticky photo frame, tidy-work promise, car charger, landlord checklist, fixed price list, team, FAQ, out-of-hours night section, reviews, visit form, footer. Type: Host Grotesk only; weight 340 with tight tracking for headings, 420 for job names and prices, 400 for body, 500 for buttons and labels. Colours: #10231a page ground, #f8f6f1 cream sheets, #212320 ink, #a4e6f4 as the only accent (buttons, Passed badges), #a6b8ac secondary text on green, #e0dcd3 hairlines. Motion idea: things are revealed from a corner or a line; photos open from a notched top-right corner, headings rise line by line, price rows wipe in. Respect prefers-reduced-motion. Avoid purple gradients, three icon cards, a centred hero with two buttons, card shadows and stock icons; show prices and checklists as ruled rows, not boxes. Corners: 18px sheets, 10px photos, 6px buttons. Copy: short and concrete. Ask me for company name, area, prices, registrations, insurance, hours, callout fee and phone; never invent them, leave visible placeholders and list them. One primary action, Book a visit, repeated in the nav, the opening and the form. Mobile: one column at 900px, a Menu button, tap targets of 48px. Checks: no console errors, works at 390px, visible keyboard focus, every placeholder listed.
```
## About
A website for electricians has to settle three questions fast: what a job costs, whether the firm is safe to let into the house, and who to ring at night. This page answers them with a price list, a landlord checklist and an out-of-hours number. It suits sole traders, small electrician websites with a team of a few, car charger installers and an electrical contractor website that wants prices shown up front.
Electrician web design by vibe coding goes quickest with an electrician website template for Claude Code, Cursor or Codex, once the agent has the real facts: prices, areas, registrations, insurance, hours and phone numbers. The demo invents all of them, including the nine employed electricians and the eight reviews. Replace those first, keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists, keep one photo per room, and set the footer wordmark's --len to the new name's character count.
This is a good base for a one-page electrician with published prices, landlord work and an emergency line. A [plumbing firm](https://8b.com/templates/ferrule/) can reuse the structure with other prices. A firm that needs several pages, a blog, a quote calculator or online booking will outgrow it, because every booking button only jumps to the one form. The copy is British, with pounds, VAT and Sheffield places. Owners who would rather not touch code can use 8B's builder.
## Design
- Palette: #f8f6f1 (cream: reading sheets, photo tabs, form fields and text on the dark green bands), #212320 (near-black ink: text on cream and aqua, button hover fill, landlord rule lines), #575953 (grey for secondary text on cream, the Due badge and landlord rows before they are checked), #e0dcd3 (stone: hairline rules between rows, review card borders and the photo placeholder ground), #a4e6f4 (aqua accent: opening sheet, primary buttons, Passed badges, charger price tab and lit night cells), #10231a (dark green: page ground, tidy promise, prices, night stage panel, footer and the tab notch on dark photos), #a6b8ac (sage: secondary text on the dark green bands), #1c3428 (deep green: charger and contact photo panels, dark photo ground, the rule above the footer credit line)
- Fonts: Host Grotesk (the only typeface: light headings and the footer wordmark (weight 340) with tight tracking, sub-headings, job names and prices (420), labels, buttons and photo tabs (500), regular body text (400))
Rounded cream and aqua sheets sit inset on a dark green ground, alternating with full-width dark bands. Section heads pair a heading with a short ruled note. Room photos, team portraits and the wide tidy photo have a notch in the top-right corner holding a small tab. Services are room names beside a sticky photo frame; prices and the landlord checklist are ruled rows, not cards. Corners are 18px on sheets, 10px on photos, 6px on buttons.
In this electrician website design, aqua is kept for the opening sheet, main buttons, Passed badges, the charger price tab and the lit night cells. Cream carries the reading sheets; dark green carries the tidy promise, prices, night stage and footer. The footer wordmark is sized to the screen width.
## Sections and motion
- **Navigation** (navigation): bar with the logo mark and wordmark, four links, phone and a Book a visit button; a Menu button and full-screen overlay on narrow screens. Motion: The bar floats after 60 px of scrolling and slides away while you scroll down past 160 px, and the link of the section in view is underlined in aqua.
- **From first look to final certificate** (opening): one aqua sheet with the h1, a short note, two links and a numbered three-step process. Motion: On load the heading, the note and the three steps rise in one after another, with about 0.08 s between steps.
- **Room by room** (rooms): six rooms listed by name with a sticky frame of photos that open over one another. Motion: As each row reaches the reading line its photo opens over the previous one from the top-right corner while the room name darkens, and it dims again once the next room takes over.
- **We leave the place tidier than we found it** (tidy): tidy-work promise: a wide photo with a tab, a small photo and three ruled notes on a dark ground. Motion: The heading rises line by line, each photo opens from its corner while the image settles from a zoom, and each note draws in once as it arrives.
- **Plug in on the drive, wake up full** (charge): car charger offer: a village seen from above behind a sheet with a list, a button and a price tab. Motion: With the scroll the photo zooms out from 1.55 times, the sheet rises into place and the price tab slides in from the right.
- **Landlord certificates without the chasing** (landlords): landlord certificate: heading, lead, button and a five-line test sheet that fills in as you read. Motion: With the scroll each checklist row draws its line across and darkens its text, and its badge switches from Due to Passed.
- **Fixed prices for the jobs we do most** (prices): fixed price list of eight jobs in ruled rows on a dark ground. Motion: Each price row wipes in from the left as it comes into view, after the heading rises line by line.
- **The people who come round** (team): four electricians with notched portraits, tabs and a speciality line. Motion: The four portraits start as one tilted pile in the middle of the grid and are dealt to their places as the grid scrolls in.
- **Questions we get asked at the door** (faq): six questions and answers in native details elements. Motion: The heading rises line by line and the note beside it wipes in; the questions are plain details elements that open and close without script.
- **Lights out at 2 a.m.?** (night): dark stage with the out-of-hours number while a grid of cells lights up around it. Motion: The section is 230vh tall and its stage stays fixed while a grid of square cells lights up with the scroll, nearest the phone number first.
- **What the neighbours say** (reviews): eight short reviews in two rows that scroll past in opposite directions. Motion: The eight cards become two single rows that slide across in opposite directions as the section scrolls past.
- **Book a visit** (contact): a visit form and contact details on a sheet over an aerial photo of terraced houses. Motion: The heading rises line by line and the contact details wipe in; sending the form only shows a thank-you line.
- **Ohmstead Electrical** (footer): dark footer with the large wordmark, company line, links, phone, email and the copyright with the Design: 8B credit. Motion: The wordmark rises line by line and the three columns wipe in.
## Good for
- home electrician or electrical contractor
- plumber, heating engineer or other fixed-price trade
- car charger, solar or smart-home installer
- small service firm with an emergency line and landlord or compliance work
## Questions
**Is this one of the free electrician website templates I can use for client sites?** Yes. It is a single index.html, [every service on one page](https://8b.com/templates/one-page/), under the MIT license, so you can build electrical company websites for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and the 14 Unsplash photos and the Host Grotesk font are credited in CREDITS.md.
**Can I use this design with other AI tools?** Yes. The electrician website design prompt on this page works without the template in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, and [a Replit button](https://8b.com/templates/for-replit/) fills it in. With the template, download index.html and AGENTS.md into an empty folder, open it in your agent, paste the short prompt; AGENTS.md says what to keep and which facts to ask for.
**What must I keep when I edit it?** Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the selectors AGENTS.md lists for each animation. Keep one photo per room in the same order, both badges in every landlord row, and update the footer wordmark's --len when you rename the business.
**Does the visit form send anything?** No. The script checks that name and phone are filled in, shows a thank-you line and clears the fields. To receive requests, point the form at Formspree or Netlify Forms, or at your own CRM form, and then drop the thank-you script.
**What happens with reduced motion or without JavaScript?** With reduced motion the entrance and scroll animations and smooth scrolling are off and the page still reads in full, though the navigation bar still hides on scroll and button hovers still animate. Without JavaScript the wide-screen links, FAQ and prices work, but the phone Menu button cannot open its overlay and the night grid stays empty.
**Can I get a site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) lets you describe the business in a sentence and designs a new site of its own, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly, and it also runs inside Claude and ChatGPT.
## Before publishing
Replace: social preview image, favicon, phone number, contact form (sends nothing yet) and email address, plus the invented demo facts (prices, dates, addresses).
- Book a visit buttons (navigation bar, menu overlay, opening, footer link) lead to #contact now; point them to keep them on the visit form, or point them to your booking calendar.
- See fixed prices link in the opening lead to #prices now; point them to keep it, or change it if you rename or remove the price list.
- Get a charger quote button in the charger section lead to #contact now; point them to keep it on the form, or point it to a charger quote page.
- Book a landlord check button in the landlord section lead to #contact now; point them to keep it on the form, or point it to a landlord booking page.
- Phone links (navigation, menu, FAQ, contact, footer) and the out-of-hours number link in the night section lead to tel: links to two placeholder numbers now; point them to your office phone and your out-of-hours phone in tel: form (+44...).
- Email links in the contact details and the footer lead to mailto: links to a placeholder address now; point them to your office email.
- Request a visit button of the form lead to a script that checks name and phone, shows a thank-you line and clears the form; nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your CRM form, and drop the thank-you script.
- The night section is 230vh tall and the rooms frame is sticky; check both on short laptop screens, where the rooms frame can crowd the list.
- The reviews turn into two clipped sliding rows only when the script runs; with reduced motion they stay a wrapped grid, as do the other scenes.
- GSAP, ScrollTrigger and SplitText load from the jsDelivr CDN at the end of the body, so the effects depend on that request succeeding.
## License
Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).