Pages Hard
Law Firm — Corporate Law Landing
An authoritative corporate law-firm landing page with a sticky navy nav, prestige serif hero over a gold stat band, practice areas grid, client logo strip, attorney previews, notable results, testimonials, a consultation CTA and footer, with scroll reveals and a counting stat animation.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--navy: #1b2a4a;
--navy-d: #101b33;
--gold: #b08d57;
--gold-soft: #efe3cf;
--ink: #1a1f2b;
--muted: #5b6577;
--bg: #f5f3ee;
--white: #ffffff;
--line: rgba(27, 42, 74, 0.12);
--serif: "Georgia", "Times New Roman", serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--shadow: 0 18px 48px -28px rgba(16, 27, 51, 0.45);
--radius: 10px;
--wrap: 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); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }
.skip-link {
position: absolute; left: -999px; top: 0;
background: var(--gold); color: var(--navy-d); padding: 0.6rem 1rem;
font-weight: 600; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
/* ===== Buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
padding: 0.85rem 1.5rem; border-radius: 8px; border: 1px solid transparent;
cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn--gold {
background: var(--gold); color: var(--navy-d);
box-shadow: 0 10px 24px -14px rgba(176, 141, 87, 0.9);
}
.btn--gold:hover { transform: translateY(-2px); background: #c39c63; }
.btn--ghost {
background: transparent; color: var(--gold-soft);
border-color: rgba(239, 227, 207, 0.45);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--white); transform: translateY(-2px); }
/* ===== Nav ===== */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(16, 27, 51, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(176, 141, 87, 0.28);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--white); }
.brand__mark {
font-family: var(--serif); font-weight: 700; font-size: 0.95rem;
width: 40px; height: 40px; display: grid; place-items: center;
border: 1px solid var(--gold); color: var(--gold); border-radius: 6px;
letter-spacing: -0.02em;
}
.brand__name { font-family: var(--serif); font-size: 1.18rem; color: var(--white); letter-spacing: 0.01em; }
.brand__name em { font-style: normal; color: var(--gold); font-size: 0.72em; letter-spacing: 0.1em; }
.brand__amp { color: var(--gold); }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links > a:not(.btn) {
color: rgba(239, 227, 207, 0.82); font-size: 0.93rem; font-weight: 500;
position: relative; padding: 0.3rem 0;
}
.nav__links > a:not(.btn)::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
background: var(--gold); transition: width 0.25s ease;
}
.nav__links > a:not(.btn):hover { color: var(--white); }
.nav__links > a:not(.btn):hover::after { width: 100%; }
.nav__cta { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.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(--gold-soft); transition: 0.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== Hero ===== */
.hero {
background:
radial-gradient(120% 90% at 80% -10%, rgba(176, 141, 87, 0.22), transparent 55%),
linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%);
color: var(--white);
padding-top: 5.5rem;
}
.hero__inner { padding-bottom: 4.5rem; max-width: 780px; }
.eyebrow {
font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em;
font-size: 0.74rem; font-weight: 600; color: var(--gold);
margin-bottom: 1.4rem;
}
.eyebrow--dark { color: var(--gold); }
.eyebrow--gold { color: var(--gold); }
.hero__title { font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1.08; margin-bottom: 1.5rem; }
.hero__lede {
font-size: 1.18rem; color: rgba(239, 227, 207, 0.86); max-width: 56ch;
margin-bottom: 2.2rem;
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
/* stat band */
.statband {
background: rgba(16, 27, 51, 0.6);
border-top: 1px solid rgba(176, 141, 87, 0.4);
}
.statband__inner {
display: grid; grid-template-columns: repeat(4, 1fr);
padding: 2rem 0;
}
.stat { text-align: center; position: relative; padding: 0.4rem 1rem; }
.stat + .stat::before {
content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px;
background: rgba(176, 141, 87, 0.35);
}
.stat__num {
display: block; font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.3rem);
color: var(--gold); font-weight: 600;
}
.stat__label {
display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
color: rgba(239, 227, 207, 0.7); margin-top: 0.4rem;
}
/* ===== Sections ===== */
.section { padding: 5rem 0; }
.section--paper { background: var(--white); }
.section--navy { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-d) 100%); color: var(--white); }
.sec-head { max-width: 620px; margin: 0 auto 3rem; text-align: center; }
.sec-head--light .sec-title { color: var(--white); }
.sec-title { font-size: clamp(1.9rem, 3.8vw, 2.6rem); margin-bottom: 0.7rem; }
.sec-sub { color: var(--muted); font-size: 1.05rem; }
.section--navy .sec-sub { color: rgba(239, 227, 207, 0.78); }
.sec-head::after {
content: ""; display: block; width: 56px; height: 2px; background: var(--gold);
margin: 1.1rem auto 0;
}
.grid { display: grid; gap: 1.6rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
/* practice cards */
.card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 2rem 1.8rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
border-top: 3px solid transparent;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--gold); }
.card__icon {
display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px;
background: var(--gold-soft); color: var(--navy); font-family: var(--serif);
font-size: 1.5rem; margin-bottom: 1.1rem;
}
.card__title { font-size: 1.22rem; margin-bottom: 0.5rem; color: var(--navy); }
.card__body { color: var(--muted); font-size: 0.96rem; }
/* logos */
.logos { background: var(--navy-d); padding: 2.6rem 0; }
.logos__label {
text-align: center; text-transform: uppercase; letter-spacing: 0.2em;
font-size: 0.74rem; color: rgba(239, 227, 207, 0.6); margin-bottom: 1.4rem;
}
.logos__row {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 1rem 3rem;
}
.logos__row li {
font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.06em;
color: rgba(239, 227, 207, 0.78); transition: color 0.2s ease;
}
.logos__row li:hover { color: var(--gold); }
/* attorneys */
.atty {
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
padding: 2rem 1.8rem; text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.atty:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.atty__photo {
width: 84px; height: 84px; margin: 0 auto 1.1rem; border-radius: 50%;
background: linear-gradient(150deg, var(--navy), var(--navy-d));
color: var(--gold); display: grid; place-items: center;
font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
border: 2px solid var(--gold);
}
.atty__name { font-size: 1.25rem; color: var(--navy); }
.atty__role {
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--gold); font-weight: 600; margin: 0.35rem 0 0.8rem;
}
.atty__bio { color: var(--muted); font-size: 0.94rem; margin-bottom: 1.1rem; }
.atty__link { color: var(--navy); font-weight: 600; font-size: 0.92rem; }
.atty__link span { transition: transform 0.2s ease; display: inline-block; }
.atty__link:hover span { transform: translateX(4px); }
/* results */
.result { padding: 2rem 1.8rem; border-left: 3px solid var(--gold); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow); }
.result__num { font-family: var(--serif); font-size: 2rem; color: var(--gold); font-weight: 600; margin-bottom: 0.3rem; }
.result__title { font-size: 1.15rem; color: var(--navy); margin-bottom: 0.5rem; }
.result__body { color: var(--muted); font-size: 0.95rem; }
/* testimonials */
.quote {
margin: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(176, 141, 87, 0.3);
border-radius: var(--radius); padding: 2.2rem 2rem; position: relative;
}
.quote::before {
content: "\201C"; font-family: var(--serif); font-size: 4rem; color: var(--gold);
position: absolute; top: 0.2rem; left: 1.2rem; opacity: 0.4; line-height: 1;
}
.quote blockquote {
margin: 0 0 1.3rem; font-family: var(--serif); font-size: 1.18rem; line-height: 1.6;
color: var(--gold-soft);
}
.quote figcaption { display: flex; flex-direction: column; }
.quote__name { font-weight: 600; color: var(--white); }
.quote__title { font-size: 0.85rem; color: rgba(239, 227, 207, 0.65); }
/* CTA */
.cta { background: var(--gold-soft); padding: 4.5rem 0; }
.cta__inner {
display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center;
}
.cta__title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color: var(--navy); margin-bottom: 0.7rem; }
.cta__sub { color: var(--muted); font-size: 1.05rem; }
.cta__form {
background: var(--white); border: 1px solid var(--line); border-radius: 14px;
padding: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--navy); }
.field input, .field textarea {
font-family: var(--sans); font-size: 0.95rem; padding: 0.7rem 0.85rem;
border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink);
resize: vertical; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field textarea:focus {
outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.18);
}
.cta__form .btn { grid-column: 1 / -1; }
.cta__note { grid-column: 1 / -1; margin: 0; font-size: 0.88rem; color: var(--navy); min-height: 1.1em; }
.cta__note.is-ok { color: #2f6b3a; font-weight: 600; }
.cta__note.is-err { color: #a23a2e; font-weight: 600; }
/* footer */
.footer { background: var(--navy-d); color: rgba(239, 227, 207, 0.78); padding: 3.5rem 0 1.6rem; }
.footer__inner {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem;
padding-bottom: 2.5rem; border-bottom: 1px solid rgba(176, 141, 87, 0.25);
}
.brand__name--foot { color: var(--white); font-size: 1.3rem; display: inline-block; margin-bottom: 0.8rem; }
.footer__addr { font-size: 0.92rem; line-height: 1.7; }
.footer__col h4 {
font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase;
letter-spacing: 0.14em; color: var(--gold); margin-bottom: 1rem;
}
.footer__col a { display: block; font-size: 0.93rem; padding: 0.28rem 0; color: rgba(239, 227, 207, 0.78); transition: color 0.18s ease; }
.footer__col a:hover { color: var(--gold); }
.footer__legal {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
padding-top: 1.4rem; font-size: 0.82rem; color: rgba(239, 227, 207, 0.55);
}
.footer__legal p { margin: 0; }
/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ===== Responsive ===== */
@media (max-width: 920px) {
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.cta__inner { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.wrap { width: min(var(--wrap), 100% - 2rem); }
.nav__toggle { display: flex; }
.nav__links {
position: absolute; top: 72px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--navy-d); border-bottom: 1px solid rgba(176, 141, 87, 0.3);
padding: 0.5rem 1rem 1.2rem; box-shadow: var(--shadow);
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nav__links > a:not(.btn) { padding: 0.85rem 0.3rem; border-bottom: 1px solid rgba(176, 141, 87, 0.15); }
.nav__cta { margin-top: 0.8rem; }
.statband__inner { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
.stat:nth-child(2)::before, .stat:nth-child(4)::before { display: none; }
.grid--3, .grid--2 { grid-template-columns: 1fr; }
.cta__form { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr; }
.footer__legal { flex-direction: column; }
.section { padding: 3.5rem 0; }
}(function () {
"use strict";
/* ---- Mobile nav toggle ---- */
var toggle = document.getElementById("navToggle");
var links = document.getElementById("navlinks");
if (toggle && links) {
toggle.addEventListener("click", function () {
var open = links.classList.toggle("is-open");
toggle.setAttribute("aria-expanded", String(open));
toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
// Close the menu when a link is tapped (mobile)
links.addEventListener("click", function (e) {
if (e.target.closest("a") && links.classList.contains("is-open")) {
links.classList.remove("is-open");
toggle.setAttribute("aria-expanded", "false");
toggle.setAttribute("aria-label", "Open menu");
}
});
}
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---- Scroll reveal ---- */
var revealables = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
if (reduceMotion || !("IntersectionObserver" in window)) {
revealables.forEach(function (el) { el.classList.add("is-in"); });
} else {
var io = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
obs.unobserve(entry.target);
}
});
}, { threshold: 0.15, rootMargin: "0px 0px -40px 0px" });
revealables.forEach(function (el) { io.observe(el); });
}
/* ---- Animated stat counters ---- */
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count")) || 0;
var decimals = parseInt(el.getAttribute("data-decimals") || "0", 10);
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
if (reduceMotion) {
el.textContent = prefix + target.toFixed(decimals) + suffix;
return;
}
var duration = 1400;
var start = null;
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / duration, 1);
var eased = 1 - Math.pow(1 - p, 3); // easeOutCubic
var val = target * eased;
el.textContent = prefix + val.toFixed(decimals) + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = prefix + target.toFixed(decimals) + suffix;
}
requestAnimationFrame(step);
}
var stats = Array.prototype.slice.call(document.querySelectorAll(".stat__num"));
if (stats.length) {
if (!("IntersectionObserver" in window)) {
stats.forEach(animateCount);
} else {
var statObs = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateCount(entry.target);
obs.unobserve(entry.target);
}
});
}, { threshold: 0.5 });
stats.forEach(function (el) { statObs.observe(el); });
}
}
/* ---- Consultation form (demo only) ---- */
var form = document.getElementById("consultForm");
var note = document.getElementById("formNote");
if (form && note) {
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = form.elements.name.value.trim();
var email = form.elements.email.value.trim();
var validEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
if (!name || !validEmail) {
note.textContent = "Please enter your name and a valid work email.";
note.className = "cta__note is-err";
return;
}
note.textContent = "Thank you, " + name.split(" ")[0] + ". A partner will be in touch within one business day. (Demo — nothing was sent.)";
note.className = "cta__note is-ok";
form.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hartwell & Crane LLP — Corporate Law</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<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="#main">Skip to content</a>
<!-- ===== Nav ===== -->
<header class="nav" id="top">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Hartwell and Crane LLP home">
<span class="brand__mark">H&C</span>
<span class="brand__name">Hartwell <span class="brand__amp">&</span> Crane <em>LLP</em></span>
</a>
<nav class="nav__links" id="navlinks" aria-label="Primary">
<a href="#practice">Practice Areas</a>
<a href="#attorneys">Attorneys</a>
<a href="#results">Results</a>
<a href="#testimonials">Clients</a>
<a class="btn btn--gold nav__cta" href="#consult">Request Consultation</a>
</nav>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="navlinks" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<!-- ===== Hero ===== -->
<section class="hero">
<div class="wrap hero__inner">
<p class="eyebrow">Corporate & Business Law · Est. 1987</p>
<h1 class="hero__title">Counsel that moves<br />the boardroom forward.</h1>
<p class="hero__lede">
We advise founders, boards and global enterprises through mergers, financings and
high-stakes disputes — with the discretion and precision your business demands.
</p>
<div class="hero__actions">
<a class="btn btn--gold" href="#consult">Request a Consultation</a>
<a class="btn btn--ghost" href="#practice">Explore Practice Areas</a>
</div>
</div>
<div class="statband" aria-label="Firm at a glance">
<div class="wrap statband__inner">
<div class="stat">
<span class="stat__num" data-count="37" data-suffix="">0</span>
<span class="stat__label">Years of practice</span>
</div>
<div class="stat">
<span class="stat__num" data-count="2.4" data-suffix="B" data-decimals="1" data-prefix="$">0</span>
<span class="stat__label">In deals closed</span>
</div>
<div class="stat">
<span class="stat__num" data-count="68" data-suffix="">0</span>
<span class="stat__label">Attorneys firm-wide</span>
</div>
<div class="stat">
<span class="stat__num" data-count="94" data-suffix="%">0</span>
<span class="stat__label">Client retention</span>
</div>
</div>
</div>
</section>
<!-- ===== Practice Areas ===== -->
<section class="section" id="practice">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow eyebrow--dark">What we do</p>
<h2 class="sec-title">Practice areas</h2>
<p class="sec-sub">Full-service corporate counsel across the life of your company.</p>
</header>
<div class="grid grid--3">
<article class="card reveal">
<span class="card__icon" aria-hidden="true">§</span>
<h3 class="card__title">Mergers & Acquisitions</h3>
<p class="card__body">Buy-side and sell-side deals, carve-outs and joint ventures — from term sheet to closing.</p>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">◈</span>
<h3 class="card__title">Corporate Governance</h3>
<p class="card__body">Board advisory, fiduciary duties, securities compliance and shareholder relations.</p>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">⚖</span>
<h3 class="card__title">Complex Litigation</h3>
<p class="card__body">Commercial disputes, breach-of-contract and shareholder claims in state and federal court.</p>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">$</span>
<h3 class="card__title">Finance & Capital Markets</h3>
<p class="card__body">Debt and equity financings, venture rounds, IPOs and credit facilities.</p>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">©</span>
<h3 class="card__title">Intellectual Property</h3>
<p class="card__body">Portfolio strategy, licensing, technology transfer and IP-driven transactions.</p>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">⌘</span>
<h3 class="card__title">Regulatory & Compliance</h3>
<p class="card__body">Antitrust, data privacy, ESG and cross-border regulatory navigation.</p>
</article>
</div>
</div>
</section>
<!-- ===== Client Logos ===== -->
<section class="logos">
<div class="wrap">
<p class="logos__label reveal">Trusted by leadership teams at</p>
<ul class="logos__row reveal" aria-label="Representative clients">
<li>NORTHGATE</li>
<li>Veridian</li>
<li>ATLAS PARTNERS</li>
<li>Lumen Bio</li>
<li>MERIDIAN</li>
<li>Cascade Capital</li>
</ul>
</div>
</section>
<!-- ===== Attorneys ===== -->
<section class="section section--paper" id="attorneys">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow eyebrow--dark">The firm</p>
<h2 class="sec-title">Senior counsel</h2>
<p class="sec-sub">Partners who lead the matters that define our practice.</p>
</header>
<div class="grid grid--3">
<article class="atty reveal">
<div class="atty__photo" aria-hidden="true">EH</div>
<h3 class="atty__name">Eleanor Hartwell</h3>
<p class="atty__role">Managing Partner · M&A</p>
<p class="atty__bio">Leads cross-border acquisitions for Fortune 500 boards. 30+ years at the deal table.</p>
<a class="atty__link" href="#consult">View profile <span aria-hidden="true">→</span></a>
</article>
<article class="atty reveal">
<div class="atty__photo" aria-hidden="true">MC</div>
<h3 class="atty__name">Marcus Crane</h3>
<p class="atty__role">Partner · Litigation</p>
<p class="atty__bio">First-chair trial lawyer in commercial and securities disputes nationwide.</p>
<a class="atty__link" href="#consult">View profile <span aria-hidden="true">→</span></a>
</article>
<article class="atty reveal">
<div class="atty__photo" aria-hidden="true">PV</div>
<h3 class="atty__name">Priya Venkataraman</h3>
<p class="atty__role">Partner · Capital Markets</p>
<p class="atty__bio">Counsel on public offerings and growth financings across tech and life sciences.</p>
<a class="atty__link" href="#consult">View profile <span aria-hidden="true">→</span></a>
</article>
</div>
</div>
</section>
<!-- ===== Results ===== -->
<section class="section" id="results">
<div class="wrap">
<header class="sec-head reveal">
<p class="eyebrow eyebrow--dark">Track record</p>
<h2 class="sec-title">Notable results</h2>
</header>
<div class="grid grid--3 results">
<article class="result reveal">
<p class="result__num">$840M</p>
<h3 class="result__title">Cross-border merger</h3>
<p class="result__body">Advised Veridian on its acquisition of a European competitor, clearing antitrust in four jurisdictions.</p>
</article>
<article class="result reveal">
<p class="result__num">Dismissed</p>
<h3 class="result__title">Shareholder class action</h3>
<p class="result__body">Secured full dismissal of a securities-fraud complaint on the pleadings for a public issuer.</p>
</article>
<article class="result reveal">
<p class="result__num">$210M</p>
<h3 class="result__title">Series D financing</h3>
<p class="result__body">Structured and closed a growth round for a climate-tech client in under nine weeks.</p>
</article>
</div>
</div>
</section>
<!-- ===== Testimonials ===== -->
<section class="section section--navy" id="testimonials">
<div class="wrap">
<header class="sec-head sec-head--light reveal">
<p class="eyebrow eyebrow--gold">In their words</p>
<h2 class="sec-title">What clients say</h2>
</header>
<div class="grid grid--2">
<figure class="quote reveal">
<blockquote>
"Hartwell & Crane navigated our acquisition with a steadiness that kept the board
calm and the deal on schedule. They are the first call when stakes are high."
</blockquote>
<figcaption>
<span class="quote__name">Dana Whitmore</span>
<span class="quote__title">CEO, Northgate Industries</span>
</figcaption>
</figure>
<figure class="quote reveal">
<blockquote>
"Their litigation team turned a bet-the-company case into a clean dismissal. Sharp,
prepared and relentlessly client-focused."
</blockquote>
<figcaption>
<span class="quote__name">Samuel Okafor</span>
<span class="quote__title">General Counsel, Lumen Bio</span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- ===== Consultation CTA ===== -->
<section class="cta" id="consult">
<div class="wrap cta__inner reveal">
<div class="cta__copy">
<h2 class="cta__title">Schedule a confidential consultation</h2>
<p class="cta__sub">Tell us about your matter. A partner will respond within one business day.</p>
</div>
<form class="cta__form" id="consultForm" novalidate>
<div class="field">
<label for="cName">Full name</label>
<input id="cName" name="name" type="text" autocomplete="name" required />
</div>
<div class="field">
<label for="cEmail">Work email</label>
<input id="cEmail" name="email" type="email" autocomplete="email" required />
</div>
<div class="field field--full">
<label for="cMatter">Briefly, how can we help?</label>
<textarea id="cMatter" name="matter" rows="3"></textarea>
</div>
<button class="btn btn--gold" type="submit">Request Consultation</button>
<p class="cta__note" id="formNote" role="status" aria-live="polite"></p>
</form>
</div>
</section>
</main>
<!-- ===== Footer ===== -->
<footer class="footer">
<div class="wrap footer__inner">
<div class="footer__brand">
<span class="brand__name brand__name--foot">Hartwell <span class="brand__amp">&</span> Crane <em>LLP</em></span>
<p class="footer__addr">200 Marquette Plaza, Suite 4100<br />Chicago, IL 60606</p>
</div>
<nav class="footer__col" aria-label="Practice">
<h4>Practice</h4>
<a href="#practice">Mergers & Acquisitions</a>
<a href="#practice">Litigation</a>
<a href="#practice">Capital Markets</a>
<a href="#practice">Intellectual Property</a>
</nav>
<nav class="footer__col" aria-label="Firm">
<h4>Firm</h4>
<a href="#attorneys">Attorneys</a>
<a href="#results">Results</a>
<a href="#testimonials">Clients</a>
<a href="#consult">Contact</a>
</nav>
<div class="footer__col">
<h4>Contact</h4>
<a href="tel:+13125550148">(312) 555-0148</a>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
<div class="wrap footer__legal">
<p>© 1987–2026 Hartwell & Crane LLP · Attorney Advertising</p>
<p>Illustrative demo — not a real law firm and not legal advice.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>Corporate Law Landing
A trust-first marketing page for a corporate and business law firm. A sticky navy navigation sits above a serif prestige hero with a primary consultation call and a gold-trimmed stat band that counts up on load. The page then walks a prospect through six practice areas, a strip of recognizable client text logos, a preview of three partners, three notable matters, two testimonials, and a final consultation CTA before a structured footer.
Built with navy, gold and a Georgia serif for headings against Inter body copy, the layout favors
generous whitespace and thin gold rules for an authoritative feel. Vanilla JS handles the mobile
nav toggle, scroll-reveal animations via IntersectionObserver, animated stat counters and a tiny
smooth-scroll for anchor links — no libraries.
Illustrative UI only — not legal advice and not a real law firm.