Pages Hard
Law Firm — Personal Injury Landing
A results-forward personal injury law firm landing with a recovered-amount hero, no-fee-unless-we-win promise, recovery stat band, case-type cards, a step-by-step claim process, client testimonials, a free case evaluation form, and an authoritative navy and gold footer.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--navy: #1b2a4a;
--navy-d: #101b33;
--gold: #b08d57;
--gold-d: #98763f;
--gold-soft: #efe3cf;
--ink: #1a1f2b;
--muted: #5b6577;
--bg: #f5f3ee;
--white: #ffffff;
--line: #e3ded2;
--shadow: 0 14px 40px rgba(16, 27, 51, 0.12);
--serif: "Georgia", "Times New Roman", serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--radius: 14px;
--maxw: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 100;
background: var(--gold); color: var(--navy-d); padding: 10px 16px;
font-weight: 600; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
border: 1px solid transparent; border-radius: 10px;
padding: 11px 20px; cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-gold { background: var(--gold); color: var(--navy-d); box-shadow: 0 6px 18px rgba(176, 141, 87, 0.35); }
.btn-gold:hover { background: var(--gold-d); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.eyebrow {
text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem;
font-weight: 700; color: var(--gold-d); margin-bottom: 14px;
}
.eyebrow.center { text-align: center; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--navy); text-align: center; }
.section-lead { text-align: center; color: var(--muted); max-width: 620px; margin: 14px auto 0; }
/* ===== Header ===== */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--navy-d); color: var(--white);
border-bottom: 2px solid var(--gold);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); }
.brand-mark {
display: inline-grid; place-items: center; width: 40px; height: 40px;
background: var(--gold); color: var(--navy-d); border-radius: 8px;
font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
}
.brand-name { font-size: 1.15rem; font-weight: 700; }
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a { font-size: 0.92rem; color: rgba(255,255,255,0.82); font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.main-nav a:hover { color: var(--white); border-color: var(--gold); }
.header-cta { display: flex; align-items: center; gap: 18px; }
.phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--gold-soft); }
.phone-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,0.25); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s, opacity .25s; }
/* ===== Hero ===== */
.hero {
background:
radial-gradient(900px 400px at 85% -10%, rgba(176,141,87,0.18), transparent 60%),
linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%);
color: var(--white); padding: 72px 0 84px;
}
.hero-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 48px; align-items: center; }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.01em; }
.hero h1 .hl { color: var(--gold); }
.hero-sub { margin-top: 20px; font-size: 1.1rem; color: rgba(255,255,255,0.85); max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; padding: 0; margin: 32px 0 0; }
.hero-trust li { font-size: 0.9rem; color: rgba(255,255,255,0.78); padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.2); }
.hero-trust strong { color: var(--gold-soft); }
.hero-card {
background: var(--white); color: var(--ink); border-radius: var(--radius);
padding: 28px; box-shadow: var(--shadow); border-top: 4px solid var(--gold);
}
.card-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--gold-d); }
.card-amount { font-family: var(--serif); font-size: 3rem; font-weight: 700; color: var(--navy); line-height: 1; margin: 6px 0 10px; }
.card-desc { color: var(--muted); font-size: 0.95rem; }
.rule { border: 0; border-top: 1px solid var(--gold-soft); margin: 22px 0; }
.card-line { font-size: 0.98rem; margin-top: 6px; }
.card-line strong { color: var(--gold-d); }
/* ===== Stats ===== */
.stats { background: var(--navy-d); color: var(--white); padding: 0; }
.stat-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
border-left: 1px solid rgba(255,255,255,0.08);
}
.stat { text-align: center; padding: 38px 16px; border-right: 1px solid rgba(255,255,255,0.08); position: relative; }
.stat::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: var(--gold); border-radius: 3px; }
.stat-num { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--gold); }
.stat-label { display: block; margin-top: 8px; font-size: 0.85rem; color: rgba(255,255,255,0.78); letter-spacing: 0.02em; }
/* ===== Cases ===== */
.cases { padding: 80px 0; }
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }
.case-card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 28px 24px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold); }
.case-ico { font-size: 1.8rem; display: inline-grid; place-items: center; width: 54px; height: 54px; background: var(--gold-soft); border-radius: 12px; margin-bottom: 16px; }
.case-card h3 { font-size: 1.2rem; color: var(--navy); }
.case-card p { color: var(--muted); font-size: 0.93rem; margin-top: 10px; }
.case-link { display: inline-block; margin-top: 16px; color: var(--gold-d); font-weight: 600; font-size: 0.9rem; }
.case-link:hover { text-decoration: underline; }
/* ===== Process ===== */
.process { padding: 80px 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 0; margin: 48px 0 0; counter-reset: step; }
.step { position: relative; padding: 30px 22px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--line); }
.step-num {
display: inline-grid; place-items: center; width: 46px; height: 46px;
background: var(--navy); color: var(--gold); font-family: var(--serif);
font-size: 1.3rem; font-weight: 700; border-radius: 50%; margin-bottom: 16px;
border: 2px solid var(--gold);
}
.step h3 { font-size: 1.12rem; color: var(--navy); }
.step p { color: var(--muted); font-size: 0.92rem; margin-top: 8px; }
/* ===== Testimonials ===== */
.testimonials { padding: 80px 0; }
.tst-rotator { position: relative; max-width: 760px; margin: 44px auto 0; min-height: 220px; }
.tst {
position: absolute; inset: 0; margin: 0; text-align: center;
background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold);
border-radius: var(--radius); padding: 38px 40px; box-shadow: var(--shadow);
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.tst.active { opacity: 1; visibility: visible; transform: translateY(0); position: relative; }
.tst-stars { color: var(--gold); letter-spacing: 3px; font-size: 1.1rem; }
.tst blockquote { margin: 16px 0; font-family: var(--serif); font-size: 1.25rem; color: var(--navy); line-height: 1.4; }
.tst figcaption { color: var(--muted); font-size: 0.9rem; }
.tst figcaption strong { color: var(--ink); }
.tst-dots { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.tst-dots button { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--gold-d); background: transparent; cursor: pointer; padding: 0; transition: background .2s; }
.tst-dots button[aria-selected="true"] { background: var(--gold); }
.tst-dots button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* ===== Evaluation ===== */
.evaluation { padding: 80px 0; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%); color: var(--white); }
.eval-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.eval-copy .eyebrow { color: var(--gold-soft); }
.eval-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--white); }
.eval-copy > p { margin-top: 16px; color: rgba(255,255,255,0.85); }
.eval-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.eval-list li { padding-left: 30px; position: relative; color: rgba(255,255,255,0.9); }
.eval-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--navy-d); background: var(--gold); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; }
.eval-form { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form-label-group { font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; color: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip {
font-family: var(--sans); font-size: 0.85rem; font-weight: 500;
padding: 8px 14px; border: 1px solid var(--line); background: var(--bg);
border-radius: 999px; cursor: pointer; transition: all .18s ease; color: var(--ink);
}
.chip:hover { border-color: var(--gold); }
.chip.selected { background: var(--navy); color: var(--white); border-color: var(--navy); }
.chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input, .field textarea {
width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
transition: border-color .18s, box-shadow .18s; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,87,0.22); background: var(--white); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #c0392b; }
.err { display: block; color: #c0392b; font-size: 0.78rem; font-weight: 600; margin-top: 5px; min-height: 1em; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.82rem; color: var(--muted); margin: 4px 0 6px; cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--gold-d); }
.form-fine { text-align: center; font-size: 0.78rem; color: var(--muted); margin-top: 12px; }
.form-success { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 16px; background: var(--gold-soft); border-radius: 10px; border-left: 4px solid var(--gold-d); }
.form-success .check { display: grid; place-items: center; width: 30px; height: 30px; flex: none; background: var(--navy); color: var(--gold); border-radius: 50%; font-weight: 700; }
.form-success p { font-size: 0.9rem; color: var(--navy-d); }
/* ===== Footer ===== */
.site-footer { background: var(--navy-d); color: rgba(255,255,255,0.78); padding: 56px 0 28px; border-top: 2px solid var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
.foot-brand .brand-mark { margin-bottom: 14px; }
.foot-name { font-family: var(--serif); font-size: 1.1rem; color: var(--white); font-weight: 700; }
.foot-tag { font-size: 0.88rem; margin-top: 6px; }
.foot-col h4 { font-family: var(--sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-soft); margin-bottom: 14px; }
.foot-col a { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.78); padding: 4px 0; transition: color .2s; }
.foot-col a:hover { color: var(--gold-soft); }
.foot-addr { font-size: 0.86rem; margin-top: 8px; }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; }
.footer-bottom p { margin-top: 4px; }
.foot-illus { color: rgba(255,255,255,0.5); font-style: italic; }
/* ===== Responsive ===== */
@media (max-width: 900px) {
.hero-grid, .eval-grid { grid-template-columns: 1fr; }
.case-grid, .steps { grid-template-columns: repeat(2, 1fr); }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.wrap { padding: 0 18px; }
.main-nav, .header-cta .btn, .header-cta .phone { display: none; }
.nav-toggle { display: flex; margin-left: auto; }
.main-nav.open {
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 72px; left: 0; right: 0;
background: var(--navy-d); border-bottom: 2px solid var(--gold); padding: 8px 24px 16px;
}
.main-nav.open a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hero { padding: 48px 0 56px; }
.hero-trust li { border-left: 0; padding-left: 0; }
.cases, .process, .testimonials, .evaluation { padding: 56px 0; }
.case-grid, .steps, .stat-grid, .footer-grid { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.eval-form { padding: 22px; }
.tst { padding: 28px 22px; }
.tst blockquote { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto; transition: none !important; }
}(function () {
"use strict";
/* ---- Mobile nav toggle ---- */
var toggle = document.getElementById("navToggle");
var nav = document.getElementById("main-nav");
if (toggle && nav) {
toggle.addEventListener("click", function () {
var open = nav.classList.toggle("open");
toggle.setAttribute("aria-expanded", String(open));
toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
nav.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
nav.classList.remove("open");
toggle.setAttribute("aria-expanded", "false");
}
});
}
/* ---- Counting animation on stat band ---- */
var stats = document.querySelectorAll(".stat-num");
var counted = false;
function formatNum(n) {
return Math.round(n).toLocaleString("en-US");
}
function runCount(el) {
var target = parseFloat(el.getAttribute("data-count")) || 0;
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
var duration = 1400;
var start = null;
function tick(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / duration, 1);
var eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
el.textContent = prefix + formatNum(target * eased) + suffix;
if (p < 1) requestAnimationFrame(tick);
else el.textContent = prefix + formatNum(target) + suffix;
}
requestAnimationFrame(tick);
}
function triggerCounts() {
if (counted) return;
counted = true;
stats.forEach(runCount);
}
var statBand = document.querySelector(".stats");
if (statBand && "IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
triggerCounts();
io.disconnect();
}
});
},
{ threshold: 0.4 }
);
io.observe(statBand);
} else {
triggerCounts();
}
/* ---- Testimonial rotator ---- */
var slides = Array.prototype.slice.call(document.querySelectorAll(".tst"));
var dotsWrap = document.getElementById("rotatorDots");
var current = 0;
var timer = null;
if (slides.length && dotsWrap) {
slides.forEach(function (_, i) {
var b = document.createElement("button");
b.setAttribute("role", "tab");
b.setAttribute("aria-label", "Show review " + (i + 1));
b.setAttribute("aria-selected", i === 0 ? "true" : "false");
b.addEventListener("click", function () {
show(i);
restart();
});
dotsWrap.appendChild(b);
});
var dots = Array.prototype.slice.call(dotsWrap.children);
function show(i) {
current = (i + slides.length) % slides.length;
slides.forEach(function (s, idx) {
s.classList.toggle("active", idx === current);
});
dots.forEach(function (d, idx) {
d.setAttribute("aria-selected", idx === current ? "true" : "false");
});
}
function next() { show(current + 1); }
function restart() {
if (timer) clearInterval(timer);
timer = setInterval(next, 5500);
}
restart();
}
/* ---- Case-type chips ---- */
var chips = document.querySelectorAll(".chip");
var caseTypeInput = document.getElementById("caseType");
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) { c.classList.remove("selected"); });
chip.classList.add("selected");
if (caseTypeInput) {
var tmp = document.createElement("textarea");
tmp.innerHTML = chip.getAttribute("data-value") || "";
caseTypeInput.value = tmp.value;
}
});
});
/* ---- Form validation + submit ---- */
var form = document.getElementById("evalForm");
var success = document.getElementById("formSuccess");
function setError(name, msg) {
var field = form.querySelector("#" + name);
var err = form.querySelector('.err[data-for="' + name + '"]');
if (err) err.textContent = msg || "";
if (field) {
if (msg) field.setAttribute("aria-invalid", "true");
else field.removeAttribute("aria-invalid");
}
}
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var ok = true;
var name = form.name.value.trim();
if (name.length < 2) { setError("name", "Please enter your full name."); ok = false; }
else setError("name", "");
var phone = form.phone.value.trim();
var phoneDigits = phone.replace(/\D/g, "");
if (phoneDigits.length < 10) { setError("phone", "Enter a valid phone number."); ok = false; }
else setError("phone", "");
var email = form.email.value.trim();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setError("email", "Enter a valid email."); ok = false; }
else setError("email", "");
if (!form.consent.checked) { setError("consent", "Please agree to be contacted."); ok = false; }
else setError("consent", "");
if (!ok) {
var firstErr = form.querySelector('[aria-invalid="true"]');
if (firstErr) firstErr.focus();
return;
}
// Simulated success (no network)
var fields = form.querySelectorAll("input, textarea, button, .chip");
fields.forEach(function (f) { if (f.type !== "hidden") f.setAttribute("disabled", "true"); });
if (success) {
success.hidden = false;
success.scrollIntoView({ behavior: "smooth", block: "center" });
}
});
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hargrove & Stein — Personal Injury Attorneys</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&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#evaluation">Skip to free case evaluation</a>
<!-- ===== Header ===== -->
<header class="site-header" id="top">
<div class="wrap header-inner">
<a class="brand" href="#top" aria-label="Hargrove and Stein home">
<span class="brand-mark" aria-hidden="true">H&S</span>
<span class="brand-name">Hargrove & Stein</span>
</a>
<nav class="main-nav" id="main-nav" aria-label="Primary">
<a href="#cases">Practice Areas</a>
<a href="#process">How It Works</a>
<a href="#results">Results</a>
<a href="#testimonials">Reviews</a>
</nav>
<div class="header-cta">
<a class="phone" href="tel:+18005550147" aria-label="Call us 24 7">
<span class="phone-dot" aria-hidden="true"></span>
(800) 555-0147
</a>
<a class="btn btn-gold" href="#evaluation">Free Case Review</a>
</div>
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="main-nav" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main>
<!-- ===== Hero ===== -->
<section class="hero" aria-labelledby="hero-title">
<div class="wrap hero-grid">
<div class="hero-copy">
<p class="eyebrow">Injured? You pay nothing unless we win.</p>
<h1 id="hero-title">We've recovered over <span class="hl">$480 Million</span> for injured clients.</h1>
<p class="hero-sub">
Award-winning trial attorneys fighting insurance companies across the state.
Free, confidential consultation — available 24/7, in English and Spanish.
</p>
<div class="hero-actions">
<a class="btn btn-gold btn-lg" href="#evaluation">Get My Free Case Review</a>
<a class="btn btn-ghost btn-lg" href="tel:+18005550147">Call (800) 555-0147</a>
</div>
<ul class="hero-trust">
<li><strong>No fee</strong> unless we win</li>
<li><strong>24/7</strong> live answering</li>
<li><strong>4.9★</strong> from 1,280+ reviews</li>
</ul>
</div>
<aside class="hero-card" aria-label="Recent verdict">
<p class="card-kicker">Recent result</p>
<p class="card-amount">$6.2M</p>
<p class="card-desc">Truck collision settlement for a delivery driver with spinal injuries.</p>
<hr class="rule" />
<p class="card-kicker">No upfront cost</p>
<p class="card-line">You owe us <strong>$0</strong> unless we recover money for you.</p>
</aside>
</div>
</section>
<!-- ===== Stat band ===== -->
<section class="stats" id="results" aria-label="Firm results">
<div class="wrap stat-grid">
<div class="stat">
<span class="stat-num" data-count="480" data-prefix="$" data-suffix="M+">$0</span>
<span class="stat-label">Recovered for clients</span>
</div>
<div class="stat">
<span class="stat-num" data-count="9500" data-suffix="+">0</span>
<span class="stat-label">Cases won</span>
</div>
<div class="stat">
<span class="stat-num" data-count="38" data-suffix=" yrs">0</span>
<span class="stat-label">Years in practice</span>
</div>
<div class="stat">
<span class="stat-num" data-count="98" data-suffix="%">0</span>
<span class="stat-label">Success rate</span>
</div>
</div>
</section>
<!-- ===== Case types ===== -->
<section class="cases" id="cases" aria-labelledby="cases-title">
<div class="wrap">
<p class="eyebrow center">Practice areas</p>
<h2 id="cases-title" class="section-title">We handle the cases that change lives.</h2>
<p class="section-lead">Decades of courtroom experience across every major category of injury claim.</p>
<div class="case-grid">
<article class="case-card">
<span class="case-ico" aria-hidden="true">🚗</span>
<h3>Auto & Truck Accidents</h3>
<p>Car, motorcycle, rideshare and commercial truck collisions. We deal with the insurers so you can heal.</p>
<a class="case-link" href="#evaluation">Start my claim →</a>
</article>
<article class="case-card">
<span class="case-ico" aria-hidden="true">⚠</span>
<h3>Slip & Fall</h3>
<p>Unsafe premises, wet floors and negligent property owners. Hold them accountable for your fall.</p>
<a class="case-link" href="#evaluation">Start my claim →</a>
</article>
<article class="case-card">
<span class="case-ico" aria-hidden="true">🏥</span>
<h3>Medical Malpractice</h3>
<p>Misdiagnosis, surgical errors and birth injuries. Complex cases backed by top medical experts.</p>
<a class="case-link" href="#evaluation">Start my claim →</a>
</article>
<article class="case-card">
<span class="case-ico" aria-hidden="true">🛠</span>
<h3>Workplace Injury</h3>
<p>Construction falls, equipment failures and repetitive-strain claims. Recover lost wages and care.</p>
<a class="case-link" href="#evaluation">Start my claim →</a>
</article>
</div>
</div>
</section>
<!-- ===== Process ===== -->
<section class="process" id="process" aria-labelledby="process-title">
<div class="wrap">
<p class="eyebrow center">How it works</p>
<h2 id="process-title" class="section-title">Your path to compensation, in four steps.</h2>
<ol class="steps">
<li class="step">
<span class="step-num" aria-hidden="true">1</span>
<h3>Free consultation</h3>
<p>Tell us what happened. We review your case at no cost and explain your options in plain language.</p>
</li>
<li class="step">
<span class="step-num" aria-hidden="true">2</span>
<h3>Investigation</h3>
<p>We gather evidence, medical records and witness statements while you focus on recovery.</p>
</li>
<li class="step">
<span class="step-num" aria-hidden="true">3</span>
<h3>We negotiate</h3>
<p>Our trial attorneys demand full value from the insurers — and we're ready to go to court.</p>
</li>
<li class="step">
<span class="step-num" aria-hidden="true">4</span>
<h3>You get paid</h3>
<p>We secure your settlement or verdict. You pay nothing unless we win your case.</p>
</li>
</ol>
</div>
</section>
<!-- ===== Testimonials ===== -->
<section class="testimonials" id="testimonials" aria-labelledby="tst-title">
<div class="wrap">
<p class="eyebrow center">Client reviews</p>
<h2 id="tst-title" class="section-title">Real clients. Real results.</h2>
<div class="tst-rotator" id="rotator">
<figure class="tst active">
<div class="tst-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>They recovered far more than the insurance company first offered. I never set foot in a courtroom — they handled everything.</blockquote>
<figcaption><strong>Marisol Reyes</strong> · Auto accident · $410,000 recovered</figcaption>
</figure>
<figure class="tst">
<div class="tst-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>After my fall at a grocery store, I felt powerless. Hargrove & Stein took it on with zero upfront cost and won.</blockquote>
<figcaption><strong>Darnell Whitfield</strong> · Slip & fall · $185,000 recovered</figcaption>
</figure>
<figure class="tst">
<div class="tst-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Professional, responsive and genuinely on my side. They explained every step and kept their promise — no win, no fee.</blockquote>
<figcaption><strong>Priya Nair</strong> · Medical malpractice · $1.2M recovered</figcaption>
</figure>
</div>
<div class="tst-dots" id="rotatorDots" role="tablist" aria-label="Testimonials"></div>
</div>
</section>
<!-- ===== Free case evaluation ===== -->
<section class="evaluation" id="evaluation" aria-labelledby="eval-title">
<div class="wrap eval-grid">
<div class="eval-copy">
<p class="eyebrow">Free & confidential</p>
<h2 id="eval-title">Get your free case evaluation.</h2>
<p>Speak with a licensed attorney today — no obligation, no upfront fees. Tell us what happened and we'll tell you what your case may be worth.</p>
<ul class="eval-list">
<li>Response within 1 business hour</li>
<li>Available 24/7, including weekends</li>
<li>You pay nothing unless we win</li>
</ul>
</div>
<form class="eval-form" id="evalForm" novalidate>
<p class="form-label-group" id="caseTypeLabel">What type of injury?</p>
<div class="chips" role="group" aria-labelledby="caseTypeLabel">
<button type="button" class="chip" data-value="Auto & Truck">Auto & Truck</button>
<button type="button" class="chip" data-value="Slip & Fall">Slip & Fall</button>
<button type="button" class="chip" data-value="Medical">Medical</button>
<button type="button" class="chip" data-value="Workplace">Workplace</button>
<button type="button" class="chip" data-value="Other">Other</button>
</div>
<input type="hidden" name="caseType" id="caseType" value="" />
<div class="field">
<label for="name">Full name</label>
<input type="text" id="name" name="name" autocomplete="name" placeholder="Jordan Alvarez" required />
<span class="err" data-for="name"></span>
</div>
<div class="field-row">
<div class="field">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" autocomplete="tel" placeholder="(555) 123-4567" required />
<span class="err" data-for="phone"></span>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="[email protected]" required />
<span class="err" data-for="email"></span>
</div>
</div>
<div class="field">
<label for="details">Briefly, what happened?</label>
<textarea id="details" name="details" rows="3" placeholder="On May 3rd I was rear-ended at a stoplight..."></textarea>
</div>
<label class="consent">
<input type="checkbox" id="consent" name="consent" required />
<span>I agree to be contacted about my case. This does not create an attorney-client relationship.</span>
</label>
<span class="err" data-for="consent"></span>
<button type="submit" class="btn btn-gold btn-block btn-lg">Request My Free Review</button>
<p class="form-fine">No fee unless we win · Your information stays confidential.</p>
<div class="form-success" id="formSuccess" hidden role="status">
<span class="check" aria-hidden="true">✓</span>
<p><strong>Thank you, your request is in.</strong> An attorney will reach out within one business hour.</p>
</div>
</form>
</div>
</section>
</main>
<!-- ===== Footer ===== -->
<footer class="site-footer">
<div class="wrap footer-grid">
<div class="foot-brand">
<span class="brand-mark" aria-hidden="true">H&S</span>
<p class="foot-name">Hargrove & Stein, LLP</p>
<p class="foot-tag">Trial attorneys for the injured since 1988.</p>
</div>
<nav class="foot-col" aria-label="Practice areas">
<h4>Practice Areas</h4>
<a href="#cases">Auto & Truck</a>
<a href="#cases">Slip & Fall</a>
<a href="#cases">Medical Malpractice</a>
<a href="#cases">Workplace Injury</a>
</nav>
<nav class="foot-col" aria-label="Firm">
<h4>Firm</h4>
<a href="#process">How It Works</a>
<a href="#results">Results</a>
<a href="#testimonials">Reviews</a>
<a href="#evaluation">Free Review</a>
</nav>
<div class="foot-col">
<h4>Contact</h4>
<a href="tel:+18005550147">(800) 555-0147</a>
<a href="mailto:[email protected]">[email protected]</a>
<p class="foot-addr">1400 Meridian Ave, Suite 900<br />Northgate, ST 00219</p>
</div>
</div>
<div class="wrap footer-bottom">
<p>© 2026 Hargrove & Stein, LLP. Attorney advertising. Prior results do not guarantee a similar outcome.</p>
<p class="foot-illus">Illustrative UI only — not a real law firm and not legal advice.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>Personal Injury Landing
A confident, trust-first landing page for a personal injury firm. The hero leads with the headline recovery figure and a no fee unless we win promise, a free case evaluation call-to-action and a 24/7 availability line. A gold-ruled stat band reinforces results — millions recovered, cases won, years of practice and the average settlement.
Below the fold, four case-type cards (auto accidents, slip & fall, medical malpractice and workplace injury) lead into a four-step claim process, social-proof testimonials, and a free case evaluation form. The form validates inline and produces a confirmation state; the case-type chips let a visitor pre-select their matter. Built with the navy-and-gold authoritative palette, serif headings and Inter body copy.
Vanilla JS handles the mobile nav toggle, a counting animation on the stat band when it scrolls into view, the testimonial rotator, the case-type chip selection and the form validation and submit flow.
Illustrative UI only — not legal advice and not a real law firm.