Pages Medium
Construction — Electrician Landing
A rugged landing page for a licensed electrician with a safety-first hero and quote CTA, a six-card services grid, licensed and certified trust badges, customer reviews, a financing teaser, a booking form with inline validation, and a sturdy steel footer.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--hv: #f5c518; /* hi-vis yellow */
--steel: #2b3440; /* steel */
--steel-d: #1b222b; /* dark steel */
--bg: #eceae6; /* concrete */
--ink: #1a1d22; /* ink */
--muted: #666c75; /* muted text */
--orange: #e8642a; /* safety orange */
--white: #ffffff;
--card: #ffffff;
--line: #d6d3cc;
--radius: 6px;
--shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 8px 24px rgba(27, 34, 43, .08);
--font: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -.02em; }
h1 { font-weight: 900; }
h2 { font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible {
outline: 3px solid var(--orange);
outline-offset: 2px;
border-radius: 3px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 800;
font-size: .95rem;
padding: .8rem 1.3rem;
border-radius: var(--radius);
border: 2px solid transparent;
cursor: pointer;
text-transform: uppercase;
letter-spacing: .04em;
transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--hv);
color: var(--ink);
box-shadow: 0 4px 0 #c79e07;
}
.btn-primary:hover { background: #ffd633; }
.btn-ghost {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, .35);
}
.btn-ghost:hover { border-color: var(--hv); color: var(--hv); }
.btn-call {
background: var(--steel);
color: var(--white);
font-size: .85rem;
padding: .6rem 1rem;
}
.btn-call:hover { background: var(--steel-d); }
.btn-block { width: 100%; justify-content: center; }
/* Header */
.site-head {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 1.5rem;
padding: .85rem clamp(1rem, 4vw, 3rem);
background: var(--white);
border-bottom: 3px solid var(--steel);
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
background: var(--hv);
color: var(--steel-d);
font-size: 1.3rem;
border-radius: var(--radius);
border: 2px solid var(--steel);
}
.brand-name {
display: flex;
flex-direction: column;
font-weight: 900;
font-size: 1.15rem;
letter-spacing: -.01em;
}
.brand-name small {
font-weight: 700;
font-size: .56rem;
letter-spacing: .18em;
color: var(--muted);
}
.nav { display: flex; gap: 1.4rem; margin-left: auto; }
.nav a {
font-weight: 700;
font-size: .9rem;
color: var(--steel);
position: relative;
padding: .2rem 0;
}
.nav a::after {
content: "";
position: absolute;
left: 0; bottom: -2px;
width: 0; height: 3px;
background: var(--hv);
transition: width .18s ease;
}
.nav a:hover::after { width: 100%; }
/* Hero */
.hero {
position: relative;
overflow: hidden;
background:
linear-gradient(155deg, var(--steel) 0%, var(--steel-d) 100%);
color: var(--white);
padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent 0 22px,
rgba(245, 197, 24, .06) 22px 44px
);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
top: 0; right: 0;
width: 14px; height: 100%;
background: repeating-linear-gradient(
-45deg,
var(--hv) 0 14px,
var(--steel-d) 14px 28px
);
}
.hero-inner { position: relative; max-width: 720px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 800;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--hv);
margin-bottom: 1rem;
}
.eyebrow-dark { color: var(--steel-d); }
.dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--orange);
box-shadow: 0 0 0 4px rgba(232, 100, 42, .25);
}
.hero h1 {
font-size: clamp(2.1rem, 6vw, 3.6rem);
margin-bottom: 1rem;
}
.hero h1 .hl { color: var(--hv); }
.hero-sub {
font-size: 1.1rem;
color: rgba(255, 255, 255, .8);
max-width: 560px;
margin-bottom: 1.8rem;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.hero-strip {
display: flex;
flex-wrap: wrap;
gap: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid rgba(255, 255, 255, .15);
}
.hero-strip li {
font-size: .85rem;
color: rgba(255, 255, 255, .75);
}
.hero-strip strong {
display: block;
color: var(--white);
font-size: 1.05rem;
font-weight: 800;
}
/* Sections */
.section { padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 3rem); max-width: 1140px; margin: 0 auto; }
.section-head { max-width: 620px; margin: 0 auto 2.4rem; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: .6rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.grid { display: grid; gap: 1.1rem; }
.services { grid-template-columns: repeat(3, 1fr); }
.badges { grid-template-columns: repeat(4, 1fr); }
.reviews { grid-template-columns: repeat(3, 1fr); }
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* Service cards */
.svc {
padding: 1.5rem;
border-top: 4px solid var(--steel);
transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.svc:hover {
transform: translateY(-3px);
border-top-color: var(--hv);
box-shadow: 0 12px 30px rgba(27, 34, 43, .14);
}
.svc-ico {
display: grid;
place-items: center;
width: 44px; height: 44px;
background: var(--bg);
border: 2px solid var(--steel);
border-radius: var(--radius);
font-size: 1.3rem;
font-weight: 800;
color: var(--orange);
margin-bottom: 1rem;
}
.svc h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: .4rem; }
.svc p { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; }
.from {
display: inline-block;
font-weight: 800;
font-size: .8rem;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--steel);
background: var(--hv);
padding: .3rem .6rem;
border-radius: 4px;
}
/* Trust / badges */
.trust { background: var(--steel); color: var(--white); max-width: none; }
.trust .section-head h2 { color: var(--white); }
.trust .section-head p { color: rgba(255, 255, 255, .65); }
.trust .grid { max-width: 1140px; margin: 0 auto; }
.badge {
background: var(--steel-d);
border: 1px solid rgba(255, 255, 255, .1);
padding: 1.4rem;
text-align: center;
box-shadow: none;
}
.badge-tag {
display: inline-block;
font-size: .68rem;
font-weight: 800;
letter-spacing: .14em;
color: var(--steel-d);
background: var(--hv);
padding: .25rem .55rem;
border-radius: 3px;
margin-bottom: .9rem;
}
.badge h3 { color: var(--white); font-size: 1.25rem; font-weight: 800; margin-bottom: .4rem; }
.badge p { color: rgba(255, 255, 255, .65); font-size: .85rem; }
/* Reviews */
.review { padding: 1.5rem; display: flex; flex-direction: column; }
.stars { color: var(--hv); font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .8rem; }
.review p { font-size: .95rem; color: var(--ink); margin-bottom: 1.1rem; }
.review footer { margin-top: auto; }
.review footer strong { display: block; font-weight: 800; }
.review footer span { font-size: .82rem; color: var(--muted); }
/* Financing teaser */
.finance {
background: var(--hv);
color: var(--steel-d);
padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1rem, 4vw, 3rem);
position: relative;
overflow: hidden;
}
.finance::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg, transparent 0 26px, rgba(27, 34, 43, .05) 26px 52px
);
pointer-events: none;
}
.finance-inner {
position: relative;
max-width: 1140px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
justify-content: space-between;
}
.finance-inner > div { max-width: 640px; }
.finance h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: .5rem; }
.finance p:not(.eyebrow) { font-weight: 500; }
.finance .btn-primary {
background: var(--steel-d);
color: var(--white);
box-shadow: 0 4px 0 #0c1117;
}
.finance .btn-primary:hover { background: var(--steel); }
/* Booking */
.book-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 2.5rem;
align-items: start;
}
.book-copy h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: .7rem; }
.book-copy > p { color: var(--muted); margin-bottom: 1.4rem; }
.book-points { display: grid; gap: .7rem; }
.book-points li {
position: relative;
padding-left: 1.8rem;
font-weight: 600;
}
.book-points li::before {
content: "✓";
position: absolute;
left: 0; top: -1px;
width: 22px; height: 22px;
display: grid; place-items: center;
background: var(--hv);
color: var(--steel-d);
font-weight: 900;
border-radius: 4px;
font-size: .8rem;
}
.booking-form { padding: 1.8rem; border-top: 4px solid var(--hv); }
.field { margin-bottom: 1.1rem; }
.field label {
display: block;
font-weight: 700;
font-size: .85rem;
margin-bottom: .4rem;
}
.field input,
.field select {
width: 100%;
font: inherit;
padding: .7rem .8rem;
border: 2px solid var(--line);
border-radius: var(--radius);
background: var(--white);
color: var(--ink);
transition: border-color .15s ease;
}
.field input:focus,
.field select:focus { border-color: var(--steel); outline: none; }
.field.invalid input,
.field.invalid select { border-color: var(--orange); }
.err {
display: block;
color: var(--orange);
font-size: .8rem;
font-weight: 600;
margin-top: .35rem;
min-height: 1em;
}
.form-status {
background: #e6f4ea;
color: #1f6b39;
border: 1px solid #b6dec2;
border-radius: var(--radius);
padding: .8rem 1rem;
font-weight: 700;
font-size: .9rem;
margin-bottom: 1.2rem;
display: none;
}
.form-status.show { display: block; }
.form-fine { font-size: .76rem; color: var(--muted); text-align: center; margin-top: .9rem; }
/* Footer */
.site-foot {
background: var(--steel-d);
color: rgba(255, 255, 255, .72);
padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) 2rem;
border-top: 4px solid var(--hv);
}
.foot-grid {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 2rem;
}
.foot-brand { color: var(--white); margin-bottom: .8rem; }
.foot-brand small { color: rgba(255, 255, 255, .45); }
.site-foot h4 {
color: var(--white);
font-size: .9rem;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: .7rem;
}
.site-foot p { font-size: .9rem; margin-bottom: .35rem; }
.site-foot a:hover { color: var(--hv); }
.foot-legal {
max-width: 1140px;
margin: 2rem auto 0;
padding-top: 1.4rem;
border-top: 1px solid rgba(255, 255, 255, .1);
font-size: .8rem;
color: rgba(255, 255, 255, .5);
}
/* Responsive */
@media (max-width: 900px) {
.services, .reviews { grid-template-columns: repeat(2, 1fr); }
.badges { grid-template-columns: repeat(2, 1fr); }
.book-grid { grid-template-columns: 1fr; }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.site-head { flex-wrap: wrap; gap: .8rem; padding: .7rem 1rem; }
.nav { display: none; }
.btn-call { margin-left: auto; }
.services, .reviews, .badges { grid-template-columns: 1fr; }
.hero-strip { gap: 1.1rem; }
.finance-inner { flex-direction: column; align-items: flex-start; }
.finance .btn { width: 100%; justify-content: center; }
.foot-grid { grid-template-columns: 1fr; }
.booking-form { padding: 1.3rem; }
}// Bolt & Sons Electric — booking form validation + small UI niceties (vanilla JS)
(function () {
"use strict";
var form = document.getElementById("booking-form");
if (!form) return;
var status = document.getElementById("form-status");
var validators = {
name: function (v) {
return v.trim().length >= 2 ? "" : "Please enter your name.";
},
phone: function (v) {
var digits = v.replace(/\D/g, "");
return digits.length >= 10 ? "" : "Enter a 10-digit phone number.";
},
service: function (v) {
return v ? "" : "Pick the service you need.";
},
time: function (v) {
return v ? "" : "Pick a preferred time.";
},
};
function fieldEls(name) {
var input = form.elements[name];
return {
input: input,
wrap: input.closest(".field"),
err: form.querySelector('.err[data-for="' + name + '"]'),
};
}
function validateField(name) {
var f = fieldEls(name);
var msg = validators[name](f.input.value);
if (msg) {
f.wrap.classList.add("invalid");
f.err.textContent = msg;
f.input.setAttribute("aria-invalid", "true");
return false;
}
f.wrap.classList.remove("invalid");
f.err.textContent = "";
f.input.removeAttribute("aria-invalid");
return true;
}
// Live re-validation once a field has been touched and was invalid.
Object.keys(validators).forEach(function (name) {
var f = fieldEls(name);
var ev = f.input.tagName === "SELECT" ? "change" : "input";
f.input.addEventListener(ev, function () {
if (f.wrap.classList.contains("invalid")) validateField(name);
});
});
// Light phone formatting as the user types.
var phone = form.elements.phone;
phone.addEventListener("input", function () {
var d = phone.value.replace(/\D/g, "").slice(0, 10);
var out = d;
if (d.length > 6) out = "(" + d.slice(0, 3) + ") " + d.slice(3, 6) + "-" + d.slice(6);
else if (d.length > 3) out = "(" + d.slice(0, 3) + ") " + d.slice(3);
else if (d.length > 0) out = "(" + d;
phone.value = out;
});
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = Object.keys(validators)
.map(validateField)
.every(Boolean);
if (!ok) {
status.classList.remove("show");
var firstBad = form.querySelector(".field.invalid input, .field.invalid select");
if (firstBad) firstBad.focus();
return;
}
var name = form.elements.name.value.trim().split(" ")[0];
var service = form.elements.service.value;
status.textContent =
"Thanks, " + name + "! Your " + service.toLowerCase() +
" request is in — a coordinator will text you shortly.";
status.classList.add("show");
status.scrollIntoView({ behavior: "smooth", block: "center" });
form.reset();
});
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bolt & Sons Electric — Licensed Electricians</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header -->
<header class="site-head">
<a class="brand" href="#top" aria-label="Bolt and Sons Electric home">
<span class="brand-mark" aria-hidden="true">⚡</span>
<span class="brand-name">Bolt & Sons<small>ELECTRIC · EST. 1998</small></span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#services">Services</a>
<a href="#trust">Why us</a>
<a href="#reviews">Reviews</a>
<a href="#book">Book</a>
</nav>
<a class="btn btn-call" href="tel:+15035550148">
<span aria-hidden="true">☎</span> (503) 555-0148
</a>
</header>
<main id="top">
<!-- Hero -->
<section class="hero" aria-labelledby="hero-title">
<div class="hero-inner">
<p class="eyebrow"><span class="dot"></span> 24/7 emergency service · Portland metro</p>
<h1 id="hero-title">Power you can trust. <span class="hl">Work you can verify.</span></h1>
<p class="hero-sub">
Master-licensed electricians for panel upgrades, rewiring, EV chargers and
whole-home generators. Up-front pricing, code-compliant work, every job inspected.
</p>
<div class="hero-cta">
<a class="btn btn-primary" href="#book">Get a free quote</a>
<a class="btn btn-ghost" href="#services">See services</a>
</div>
<ul class="hero-strip" aria-label="Credentials">
<li><strong>OR Lic. #EC-44821</strong> Licensed & bonded</li>
<li><strong>$2M</strong> liability insured</li>
<li><strong>4.9 ★</strong> 612 reviews</li>
</ul>
</div>
</section>
<!-- Services -->
<section class="section" id="services" aria-labelledby="services-title">
<div class="section-head">
<h2 id="services-title">What we wire</h2>
<p>Residential and light-commercial electrical, done to code the first time.</p>
</div>
<ul class="grid services">
<li class="card svc">
<span class="svc-ico" aria-hidden="true">▦</span>
<h3>Panel upgrades</h3>
<p>100A to 200A service upgrades, sub-panels and breaker replacements.</p>
<span class="from">from $1,850</span>
</li>
<li class="card svc">
<span class="svc-ico" aria-hidden="true">〰</span>
<h3>Rewiring</h3>
<p>Knob-and-tube removal, whole-home rewires and dedicated circuits.</p>
<span class="from">from $95/hr</span>
</li>
<li class="card svc">
<span class="svc-ico" aria-hidden="true">◎</span>
<h3>Lighting & fixtures</h3>
<p>Recessed LED, under-cabinet, outdoor and smart switch installs.</p>
<span class="from">from $180</span>
</li>
<li class="card svc">
<span class="svc-ico" aria-hidden="true">⚡</span>
<h3>EV chargers</h3>
<p>Level 2 home chargers, 240V circuits and Tesla wall connectors.</p>
<span class="from">from $620</span>
</li>
<li class="card svc">
<span class="svc-ico" aria-hidden="true">⊞</span>
<h3>Generators</h3>
<p>Standby generator install, transfer switches and load management.</p>
<span class="from">from $3,400</span>
</li>
<li class="card svc">
<span class="svc-ico" aria-hidden="true">!</span>
<h3>Emergency calls</h3>
<p>No power, sparking outlets, tripped mains — same-day response.</p>
<span class="from">$149 dispatch</span>
</li>
</ul>
</section>
<!-- Trust / badges -->
<section class="section trust" id="trust" aria-labelledby="trust-title">
<div class="section-head">
<h2 id="trust-title">Licensed, certified, accountable</h2>
<p>Every tech is background-checked, drug-tested and pulls a real permit.</p>
</div>
<ul class="grid badges">
<li class="card badge">
<span class="badge-tag">LICENSE</span>
<h3>OR #EC-44821</h3>
<p>Master electrician license, verifiable with the state CCB.</p>
</li>
<li class="card badge">
<span class="badge-tag">INSURED</span>
<h3>$2M coverage</h3>
<p>General liability plus workers' comp on every crew member.</p>
</li>
<li class="card badge">
<span class="badge-tag">CERTIFIED</span>
<h3>NECA member</h3>
<p>Trained to the 2023 National Electrical Code and continuing-ed current.</p>
</li>
<li class="card badge">
<span class="badge-tag">WARRANTY</span>
<h3>5-year workmanship</h3>
<p>Parts and labor guaranteed. If it fails, we make it right.</p>
</li>
</ul>
</section>
<!-- Reviews -->
<section class="section" id="reviews" aria-labelledby="reviews-title">
<div class="section-head">
<h2 id="reviews-title">What homeowners say</h2>
<p>Rated 4.9 across Google and the BBB.</p>
</div>
<ul class="grid reviews">
<li class="card review">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>"Diagnosed a dead circuit my last electrician missed, fixed it in an hour and showed me the panel before and after. Cleaned up too."</p>
<footer><strong>Marisol Vega</strong><span>Beaverton · Panel repair</span></footer>
</li>
<li class="card review">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>"Installed our Level 2 EV charger and walked me through the breaker load. Quote was exactly what I paid — no surprises."</p>
<footer><strong>Derek Ohno</strong><span>SE Portland · EV charger</span></footer>
</li>
<li class="card review">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<p>"Whole-house rewire on a 1924 craftsman. They pulled permits, scheduled the inspection and finished a day early. Pros."</p>
<footer><strong>Tanya Brooks</strong><span>Sellwood · Rewire</span></footer>
</li>
</ul>
</section>
<!-- Financing teaser -->
<section class="finance" aria-labelledby="finance-title">
<div class="finance-inner">
<div>
<p class="eyebrow eyebrow-dark"><span class="dot"></span> Financing available</p>
<h2 id="finance-title">0% APR for 18 months on jobs over $1,500</h2>
<p>Spread out a panel upgrade or generator with approved credit. Soft-pull pre-qualification in under two minutes — won't affect your score.</p>
</div>
<a class="btn btn-primary" href="#book">Check my rate</a>
</div>
</section>
<!-- Booking form -->
<section class="section book" id="book" aria-labelledby="book-title">
<div class="book-grid">
<div class="book-copy">
<h2 id="book-title">Book a free estimate</h2>
<p>Tell us what's going on and a coordinator will text you back within the hour during business hours, 7am–7pm.</p>
<ul class="book-points">
<li>Up-front, written quotes</li>
<li>Licensed techs in marked trucks</li>
<li>No charge to diagnose if we do the work</li>
</ul>
</div>
<form class="card booking-form" id="booking-form" novalidate>
<p class="form-status" id="form-status" role="status" aria-live="polite"></p>
<div class="field">
<label for="name">Full name</label>
<input id="name" name="name" type="text" autocomplete="name" placeholder="Jordan Alvarez" required />
<span class="err" data-for="name"></span>
</div>
<div class="field">
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" placeholder="(503) 555-0148" required />
<span class="err" data-for="phone"></span>
</div>
<div class="field">
<label for="service">Service needed</label>
<select id="service" name="service" required>
<option value="">Choose a service…</option>
<option>Panel upgrade</option>
<option>Rewiring</option>
<option>Lighting & fixtures</option>
<option>EV charger</option>
<option>Generator</option>
<option>Emergency / no power</option>
</select>
<span class="err" data-for="service"></span>
</div>
<div class="field">
<label for="time">Preferred time</label>
<select id="time" name="time" required>
<option value="">Choose a window…</option>
<option>Today — ASAP</option>
<option>Tomorrow morning</option>
<option>Tomorrow afternoon</option>
<option>This week, flexible</option>
</select>
<span class="err" data-for="time"></span>
</div>
<button class="btn btn-primary btn-block" type="submit">Request my quote</button>
<p class="form-fine">By submitting you agree to be contacted about your request.</p>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-foot">
<div class="foot-grid">
<div>
<span class="brand-name foot-brand">Bolt & Sons<small>ELECTRIC · EST. 1998</small></span>
<p>Licensed, bonded & insured electricians serving the Portland metro area.</p>
</div>
<div>
<h4>Contact</h4>
<p><a href="tel:+15035550148">(503) 555-0148</a></p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p>2240 NW Industrial St, Portland, OR</p>
</div>
<div>
<h4>Hours</h4>
<p>Mon–Fri 7am–7pm</p>
<p>Sat 8am–4pm</p>
<p><strong>24/7 emergency line</strong></p>
</div>
</div>
<p class="foot-legal">OR CCB #EC-44821 · © 2026 Bolt & Sons Electric. Illustrative demo only.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Electrician Landing
A hi-vis, contractor-grade landing page for Bolt & Sons Electric. The hero leads with a safety-first headline, a licensed/insured strip and a get-a-quote CTA over a dark steel backdrop with a diagonal hazard accent. Below it, a services grid covers panel upgrades, rewiring, lighting, EV chargers, generators and emergency calls — each with a sturdy bordered card and a price-from line.
Trust badges call out the master-license number, bonding and insurance, and a workmanship warranty. Real-sounding reviews build proof, a financing teaser pitches 0% for 18 months, and a booking form captures name, phone, service type and a preferred time with inline vanilla-JS validation that confirms the request live. The yellow + dark steel palette keeps the trades look throughout.
Illustrative UI only — not a real electrical contractor and not for booking real service.