Pages Medium
Construction — Plumber Landing
An urgent 24/7 plumbing-company landing page with a call-now hero, emergency badge, service cards for repairs and drains and water heaters, an upfront-pricing promise, customer reviews, a savings coupon banner, a booking form and footer.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root {
/* trades palette */
--hv: #f5c518; /* hi-vis yellow — CTAs/accents only */
--steel: #2b3440;
--steel-d: #1b222b;
--bg: #eceae6; /* concrete */
--ink: #1a1d22;
--muted: #666c75;
--orange: #e8642a; /* safety orange */
--white: #ffffff;
/* trustworthy blue variant */
--blue: #1c6fb8;
--blue-d: #134e82;
--line: rgba(27, 34, 43, .12);
--shadow: 0 10px 30px rgba(27, 34, 43, .14);
--radius: 14px;
--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.08; letter-spacing: -.02em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
font-weight: 800;
font-size: .95rem;
padding: .8rem 1.3rem;
border-radius: 10px;
border: 0;
cursor: pointer;
letter-spacing: .01em;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:focus-visible { outline: 3px solid var(--hv); outline-offset: 3px; }
.btn--call { background: var(--hv); color: var(--steel-d); box-shadow: 0 4px 0 #c79c08; }
.btn--call:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #c79c08; }
.btn--call:active { transform: translateY(2px); box-shadow: 0 1px 0 #c79c08; }
.btn--ghost { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,.55); }
.btn--ghost:hover { border-color: var(--white); transform: translateY(-2px); }
.btn--big { font-size: 1.1rem; padding: 1rem 1.6rem; }
.btn--block { width: 100%; justify-content: center; }
.btn__icon { font-size: 1.2em; }
/* ---------- topbar ---------- */
.topbar {
background: var(--steel-d);
color: #c7ced6;
font-size: .82rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: .5rem 1.25rem;
}
.topbar__msg { display: flex; align-items: center; gap: .5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6a; box-shadow: 0 0 0 0 rgba(63,191,106,.6); animation: dotPulse 2s infinite; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(63,191,106,.5); } 70% { box-shadow: 0 0 0 7px rgba(63,191,106,0); } 100% { box-shadow: 0 0 0 0 rgba(63,191,106,0); } }
.topbar__phone { color: var(--hv); font-weight: 800; }
/* ---------- header ---------- */
.header {
position: sticky;
top: 0;
z-index: 40;
background: var(--steel);
display: flex;
align-items: center;
gap: 1.5rem;
padding: .85rem 1.25rem;
border-bottom: 3px solid var(--blue);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--white); font-weight: 900; font-size: 1.15rem; }
.brand em { font-style: normal; color: var(--hv); }
.brand__mark {
display: grid; place-items: center;
width: 38px; height: 38px;
background: var(--blue);
color: var(--white);
border-radius: 9px;
font-weight: 900; font-size: .95rem;
border: 2px solid rgba(255,255,255,.18);
}
.nav { margin-left: auto; display: flex; gap: 1.4rem; font-weight: 600; }
.nav a { color: #cfd6de; font-size: .95rem; }
.nav a:hover { color: var(--white); }
.header__cta { padding: .6rem 1.1rem; font-size: .9rem; }
/* ---------- hero ---------- */
.hero {
background:
linear-gradient(135deg, rgba(28,111,184,.30), transparent 60%),
repeating-linear-gradient(135deg, transparent 0 38px, rgba(245,197,24,.05) 38px 40px),
var(--steel-d);
color: var(--white);
position: relative;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px; height: 14px;
background: repeating-linear-gradient(45deg, var(--hv) 0 22px, var(--steel-d) 22px 44px);
}
.hero__inner { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem 5rem; text-align: center; }
.hero__title { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 900; margin: 1rem 0 .9rem; }
.hero__title span { color: var(--hv); }
.hero__lead { font-size: 1.12rem; color: #cdd5dd; max-width: 540px; margin: 0 auto 1.8rem; }
.hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.hero__trust {
list-style: none; margin: 2.2rem 0 0; padding: 0;
display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap;
color: #aeb7c1; font-size: .92rem;
}
.hero__trust strong { color: var(--white); font-weight: 800; display: block; font-size: 1.05rem; }
/* badges */
.badge {
display: inline-flex; align-items: center; gap: .5rem;
font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
padding: .42rem .9rem; border-radius: 999px;
}
.badge--emergency { background: rgba(232,100,42,.18); color: #ffb38f; border: 1px solid rgba(232,100,42,.5); }
.badge__pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: dotPulse 1.6s infinite; }
/* ---------- sections ---------- */
.section { max-width: 1080px; margin: 0 auto; padding: 4rem 1.5rem; }
.section--steel { background: var(--steel); color: var(--white); max-width: none; }
.section--steel .section__title { color: var(--white); }
.section__head { text-align: center; margin-bottom: 2.4rem; }
.section__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800; color: var(--blue); margin-bottom: .5rem; }
.eyebrow--hv { color: var(--hv); }
.grid { display: grid; gap: 1.2rem; }
.services { grid-template-columns: repeat(4, 1fr); }
.promise { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; }
.reviews { grid-template-columns: repeat(3, 1fr); }
.card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
}
/* services */
.service { border-top: 4px solid var(--blue); transition: transform .15s ease, box-shadow .15s ease; }
.service:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(27,34,43,.18); }
.service__icon { font-size: 1.9rem; margin-bottom: .6rem; }
.service h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.service p { color: var(--muted); font-size: .92rem; margin-bottom: .9rem; }
.chip {
display: inline-block; font-weight: 800; font-size: .78rem;
background: #eef4fb; color: var(--blue-d);
padding: .3rem .7rem; border-radius: 7px;
}
/* coupon */
.coupon {
background:
repeating-linear-gradient(45deg, var(--steel-d) 0 28px, var(--hv) 28px 32px);
padding: .4rem;
}
.coupon__inner {
max-width: 1080px; margin: 0 auto;
background: var(--orange);
color: var(--white);
border-radius: 10px;
padding: 1.4rem 1.8rem;
display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.coupon__kicker { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; opacity: .9; }
.coupon__deal { font-size: 1.35rem; font-weight: 700; }
.coupon__deal strong { font-size: 1.7rem; font-weight: 900; }
.coupon__code {
display: flex; flex-direction: column; align-items: flex-start;
background: var(--steel-d); color: var(--white);
border: 2px dashed var(--hv);
border-radius: 10px; padding: .7rem 1.2rem; cursor: pointer;
font-family: var(--font); transition: transform .12s ease;
}
.coupon__code:hover { transform: scale(1.03); }
.coupon__code:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.coupon__label { font-size: .72rem; letter-spacing: .05em; color: #c7ced6; text-transform: uppercase; }
.coupon__value { font-size: 1.4rem; font-weight: 900; color: var(--hv); letter-spacing: .08em; }
.coupon__code.copied .coupon__label { color: #7ee2a0; }
/* promise */
.promise__item { text-align: center; }
.promise__num {
display: grid; place-items: center;
width: 48px; height: 48px; margin: 0 auto .9rem;
background: var(--hv); color: var(--steel-d);
font-weight: 900; font-size: 1.3rem; border-radius: 12px;
}
.promise__item h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.promise__item p { color: #b6bec8; font-size: .94rem; }
/* reviews */
.review__stars { color: var(--hv); font-size: 1.05rem; letter-spacing: .1em; margin-bottom: .7rem; }
.review blockquote { margin: 0 0 1rem; font-size: .96rem; color: var(--ink); }
.review figcaption { color: var(--muted); font-size: .88rem; }
.review figcaption strong { color: var(--ink); }
/* ---------- booking ---------- */
.section--book {
background: linear-gradient(180deg, var(--bg), #e3e1dc);
max-width: none;
}
.book__wrap {
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: start;
}
.book__sub { color: var(--muted); margin: .8rem 0 1.4rem; }
.book__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: .85rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
font-family: var(--font); font-size: .95rem;
padding: .7rem .85rem;
border: 1.5px solid var(--line);
border-radius: 9px; background: var(--white); color: var(--ink);
transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(28,111,184,.18);
}
.field textarea { resize: vertical; }
.field.invalid input, .field.invalid select { border-color: var(--orange); }
.error { color: var(--orange); font-size: .78rem; font-weight: 600; min-height: 1em; }
.book__form .btn--block { grid-column: 1 / -1; }
.book__ok { grid-column: 1 / -1; color: var(--blue-d); font-weight: 700; background: #e6f0fa; padding: .7rem .9rem; border-radius: 9px; }
/* ---------- footer ---------- */
.footer { background: var(--steel-d); color: #aeb7c1; padding: 3rem 1.5rem 1.5rem; }
.footer__grid {
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem;
padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand--foot { color: var(--white); font-size: 1.1rem; margin-bottom: .6rem; }
.footer h4 { color: var(--white); font-size: .95rem; margin-bottom: .5rem; }
.footer__note { font-size: .88rem; }
.footer__copy { max-width: 1080px; margin: 1.2rem auto 0; font-size: .82rem; text-align: center; }
/* ---------- sticky mobile call bar ---------- */
.callbar {
display: none;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--hv); color: var(--steel-d);
font-weight: 900; text-align: center;
padding: 1rem; gap: .5rem;
box-shadow: 0 -4px 20px rgba(0,0,0,.25);
}
/* ---------- responsive ---------- */
@media (max-width: 920px) {
.services { grid-template-columns: repeat(2, 1fr); }
.reviews { grid-template-columns: 1fr; }
.promise { grid-template-columns: 1fr; gap: 1.6rem; }
.book__wrap { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.nav { display: none; }
.topbar { font-size: .74rem; padding: .45rem .9rem; }
.topbar__msg { display: none; }
.topbar { justify-content: center; }
.header { gap: .8rem; }
.header__cta { margin-left: auto; }
.services { grid-template-columns: 1fr; }
.book__form { grid-template-columns: 1fr; }
.coupon__inner { flex-direction: column; align-items: flex-start; text-align: left; }
.coupon__code { width: 100%; align-items: center; }
.hero__inner { padding: 2.6rem 1.2rem 3.6rem; }
.hero__actions .btn { width: 100%; justify-content: center; }
.callbar { display: flex; align-items: center; justify-content: center; }
body { padding-bottom: 60px; }
}// RedValve Plumbing landing — vanilla JS, no libraries.
(function () {
'use strict';
/* ---- Coupon: copy code to clipboard ---- */
var couponBtn = document.getElementById('couponBtn');
if (couponBtn) {
var label = couponBtn.querySelector('.coupon__label');
var defaultLabel = label ? label.textContent : '';
couponBtn.addEventListener('click', function () {
var code = 'PIPE50';
var done = function () {
couponBtn.classList.add('copied');
if (label) label.textContent = 'Copied!';
window.setTimeout(function () {
couponBtn.classList.remove('copied');
if (label) label.textContent = defaultLabel;
}, 1800);
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(code).then(done).catch(done);
} else {
done();
}
});
}
/* ---- Booking form: inline validation ---- */
var form = document.getElementById('bookForm');
if (!form) return;
var ok = document.getElementById('bookOk');
function setError(field, msg) {
var wrap = field.closest('.field');
var slot = form.querySelector('.error[data-for="' + field.name + '"]');
if (msg) {
wrap.classList.add('invalid');
field.setAttribute('aria-invalid', 'true');
if (slot) slot.textContent = msg;
} else {
wrap.classList.remove('invalid');
field.removeAttribute('aria-invalid');
if (slot) slot.textContent = '';
}
}
function validateField(field) {
var v = (field.value || '').trim();
if (field.name === 'name') {
if (v.length < 2) return setError(field, 'Please enter your name.'), false;
} else if (field.name === 'phone') {
var digits = v.replace(/\D/g, '');
if (digits.length < 10) return setError(field, 'Enter a 10-digit phone number.'), false;
} else if (field.required && !v) {
return setError(field, 'This field is required.'), false;
}
setError(field, '');
return true;
}
var fields = Array.prototype.slice.call(
form.querySelectorAll('input[required], select[required]')
);
fields.forEach(function (f) {
f.addEventListener('blur', function () { validateField(f); });
f.addEventListener('input', function () {
if (f.closest('.field').classList.contains('invalid')) validateField(f);
});
});
form.addEventListener('submit', function (e) {
e.preventDefault();
var allOk = true;
var firstBad = null;
fields.forEach(function (f) {
if (!validateField(f)) {
allOk = false;
if (!firstBad) firstBad = f;
}
});
if (!allOk) {
if (firstBad) firstBad.focus();
if (ok) ok.hidden = true;
return;
}
form.querySelector('button[type="submit"]').disabled = true;
if (ok) {
ok.hidden = false;
ok.focus && ok.focus();
}
});
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RedValve Plumbing — 24/7 Emergency Plumbers</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Top utility bar -->
<div class="topbar">
<p class="topbar__msg"><span class="dot" aria-hidden="true"></span> Now serving Greater Lakeside & surrounding suburbs — average arrival under 45 min</p>
<a class="topbar__phone" href="tel:+15095550147">(509) 555-0147</a>
</div>
<!-- Header -->
<header class="header">
<a class="brand" href="#top">
<span class="brand__mark" aria-hidden="true">RV</span>
<span class="brand__name">RedValve <em>Plumbing</em></span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#services">Services</a>
<a href="#pricing">Pricing</a>
<a href="#reviews">Reviews</a>
<a href="#book">Book</a>
</nav>
<a class="btn btn--call header__cta" href="tel:+15095550147">Call Now</a>
</header>
<!-- Hero -->
<main id="top">
<section class="hero">
<div class="hero__inner">
<p class="badge badge--emergency"><span class="badge__pulse" aria-hidden="true"></span> 24/7 Emergency Service</p>
<h1 class="hero__title">Burst pipe? Clogged drain?<br /><span>We're on the way.</span></h1>
<p class="hero__lead">Licensed, insured master plumbers across Lakeside County. Upfront flat-rate pricing, no overtime fees — even at 2 AM.</p>
<div class="hero__actions">
<a class="btn btn--call btn--big" href="tel:+15095550147">
<span class="btn__icon" aria-hidden="true">☎</span>
Call (509) 555-0147
</a>
<a class="btn btn--ghost btn--big" href="#book">Book Online</a>
</div>
<ul class="hero__trust">
<li><strong>4.9★</strong> 1,280+ reviews</li>
<li><strong>Lic.</strong> #PL-44827</li>
<li><strong>20yr</strong> in business</li>
</ul>
</div>
</section>
<!-- Services -->
<section id="services" class="section">
<header class="section__head">
<p class="eyebrow">What we fix</p>
<h2 class="section__title">Full-service plumbing repair</h2>
</header>
<div class="grid services">
<article class="card service">
<div class="service__icon" aria-hidden="true">🔧</div>
<h3>Emergency Repairs</h3>
<p>Burst pipes, failed shut-off valves and overflowing fixtures stopped fast, day or night.</p>
<span class="chip">From $89 diagnostic</span>
</article>
<article class="card service">
<div class="service__icon" aria-hidden="true">🌊</div>
<h3>Drain Cleaning</h3>
<p>Hydro-jetting and camera inspection to clear stubborn kitchen, bath and main-line clogs.</p>
<span class="chip">From $149 flat</span>
</article>
<article class="card service">
<div class="service__icon" aria-hidden="true">🔥</div>
<h3>Water Heaters</h3>
<p>Same-day repair and replacement for tank and tankless units, all major brands.</p>
<span class="chip">From $1,250 installed</span>
</article>
<article class="card service">
<div class="service__icon" aria-hidden="true">💧</div>
<h3>Leak Detection</h3>
<p>Acoustic and thermal leak location behind walls and under slabs — no needless demolition.</p>
<span class="chip">From $129 locate</span>
</article>
</div>
</section>
<!-- Coupon banner -->
<section class="coupon" aria-label="Current offer">
<div class="coupon__inner">
<div class="coupon__text">
<p class="coupon__kicker">First-time customers</p>
<p class="coupon__deal"><strong>$50 OFF</strong> any repair over $250</p>
</div>
<button class="coupon__code" id="couponBtn" type="button" aria-live="polite">
<span class="coupon__label">Tap to copy code</span>
<span class="coupon__value">PIPE50</span>
</button>
</div>
</section>
<!-- Pricing promise -->
<section id="pricing" class="section section--steel">
<header class="section__head">
<p class="eyebrow eyebrow--hv">Our promise</p>
<h2 class="section__title">Upfront pricing, every time</h2>
</header>
<div class="grid promise">
<div class="promise__item">
<span class="promise__num">1</span>
<h3>Quoted before we start</h3>
<p>You approve a flat price after the diagnostic. The number you hear is the number you pay.</p>
</div>
<div class="promise__item">
<span class="promise__num">2</span>
<h3>No overtime surcharge</h3>
<p>Nights, weekends and holidays cost the same as a Tuesday morning. No fine print.</p>
</div>
<div class="promise__item">
<span class="promise__num">3</span>
<h3>1-year workmanship warranty</h3>
<p>If a repair fails within twelve months, we come back and make it right at no charge.</p>
</div>
</div>
</section>
<!-- Reviews -->
<section id="reviews" class="section">
<header class="section__head">
<p class="eyebrow">From the neighborhood</p>
<h2 class="section__title">What customers say</h2>
</header>
<div class="grid reviews">
<figure class="card review">
<div class="review__stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Water heater died on a Sunday. Marcus was at the door in 40 minutes and had hot water back by lunch. Priced exactly what he quoted.</blockquote>
<figcaption><strong>Dana R.</strong> · Cedar Heights</figcaption>
</figure>
<figure class="card review">
<div class="review__stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Main line backed up into the basement. They jetted it, ran a camera and showed me the root intrusion on the screen. Honest crew.</blockquote>
<figcaption><strong>Anthony V.</strong> · Lakeside</figcaption>
</figure>
<figure class="card review">
<div class="review__stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Found a slab leak we'd been chasing for months without tearing up the whole floor. Fair, clean and on time.</blockquote>
<figcaption><strong>Priya S.</strong> · Millbrook</figcaption>
</figure>
</div>
</section>
<!-- Booking form -->
<section id="book" class="section section--book">
<div class="book__wrap">
<div class="book__pitch">
<p class="eyebrow eyebrow--hv">Schedule service</p>
<h2 class="section__title">Book a plumber</h2>
<p class="book__sub">Tell us what's going on and we'll confirm a window. For an active emergency, call us — it's faster.</p>
<a class="btn btn--call" href="tel:+15095550147">Emergency? Call (509) 555-0147</a>
</div>
<form class="card book__form" id="bookForm" novalidate>
<div class="field">
<label for="name">Full name</label>
<input id="name" name="name" type="text" autocomplete="name" placeholder="Jordan Mills" required />
<span class="error" data-for="name"></span>
</div>
<div class="field">
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" placeholder="(509) 555-0147" required />
<span class="error" data-for="phone"></span>
</div>
<div class="field">
<label for="service">Service needed</label>
<select id="service" name="service" required>
<option value="">Select a service…</option>
<option>Emergency repair</option>
<option>Drain cleaning</option>
<option>Water heater</option>
<option>Leak detection</option>
<option>Something else</option>
</select>
<span class="error" data-for="service"></span>
</div>
<div class="field">
<label for="window">Preferred window</label>
<select id="window" name="window" required>
<option value="">Select a time…</option>
<option>As soon as possible</option>
<option>This morning</option>
<option>This afternoon</option>
<option>Tomorrow</option>
<option>This weekend</option>
</select>
<span class="error" data-for="window"></span>
</div>
<div class="field field--full">
<label for="notes">Notes <span class="opt">(optional)</span></label>
<textarea id="notes" name="notes" rows="3" placeholder="Kitchen sink draining slowly, smells off…"></textarea>
</div>
<button class="btn btn--call btn--block" type="submit">Request my appointment</button>
<p class="book__ok" id="bookOk" hidden role="status">Thanks — we'll text a confirmation to your phone shortly.</p>
</form>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="footer__grid">
<div>
<p class="brand brand--foot"><span class="brand__mark" aria-hidden="true">RV</span> RedValve <em>Plumbing</em></p>
<p class="footer__note">Licensed & insured master plumbers · Lic. #PL-44827</p>
</div>
<div>
<h4>Service area</h4>
<p>Lakeside · Cedar Heights · Millbrook · Greenview</p>
</div>
<div>
<h4>Hours</h4>
<p>Emergency dispatch 24/7<br />Office Mon–Sat, 7 AM–7 PM</p>
</div>
</div>
<p class="footer__copy">© 2026 RedValve Plumbing. Illustrative demo — not a real company.</p>
</footer>
<!-- Sticky mobile call bar -->
<a class="callbar" href="tel:+15095550147">
<span class="callbar__icon" aria-hidden="true">☎</span> Call 24/7 — (509) 555-0147
</a>
<script src="script.js"></script>
</body>
</html>Plumber Landing
A rugged, trust-first landing page for a local plumbing company. The hero leads with a 24/7 emergency badge and a giant call-now button, backed by a steel-blue palette and a hi-vis yellow accent reserved for the calls to action. Below it sit four service cards (repairs, drain cleaning, water heaters, leak detection), an upfront-pricing promise strip, and a row of real-sounding customer reviews.
A diagonal hazard-striped coupon banner advertises a first-visit discount, and the booking form collects name, phone, service type and a preferred window with inline validation. A sticky call bar drops in on small screens so the phone number is always one tap away.
Everything is a single self-contained document — vanilla HTML, CSS custom properties for the trades palette, and a small script that handles form validation, the coupon copy-to-clipboard action and the mobile call bar.
Illustrative UI only — not a real plumbing service.