Pages Medium
Law Firm — Family Law Landing
An empathetic family-law firm landing page with a warm serif hero, four-service grid for divorce custody mediation and adoption, a calming four-step process timeline, gentle client testimonials, a collapsible FAQ, a free consultation form and footer, with scroll reveals and a mobile nav.
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: #e3ddd0;
--radius: 14px;
--shadow: 0 18px 48px -28px rgba(16, 27, 51, 0.45);
--serif: "Georgia", "Times New Roman", serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
}
* { 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 { font-family: var(--serif); line-height: 1.2; margin: 0; color: var(--navy); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
.wrap--narrow { width: min(760px, 92vw); }
.skip-link {
position: absolute; left: -999px; top: 0;
background: var(--navy); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.eyebrow {
text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600;
color: var(--gold); margin-bottom: .7rem;
}
.eyebrow--light { color: var(--gold-soft); }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: .95rem; padding: .82rem 1.45rem; border-radius: 999px;
border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: #fff; box-shadow: 0 10px 24px -12px rgba(176, 141, 87, .8); }
.btn--gold:hover { background: #9c7a47; }
.btn--ghost { border-color: var(--gold); color: var(--navy); background: var(--gold-soft); }
.btn--ghost:hover { background: var(--gold); color: #fff; }
.btn--quiet { color: var(--navy); border-color: var(--line); background: var(--white); }
.btn--quiet:hover { border-color: var(--gold); }
.btn--block { width: 100%; }
/* Nav */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(245, 243, 238, .9); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; }
.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand__mark {
display: grid; place-items: center; width: 42px; height: 42px;
background: var(--navy); color: var(--gold-soft); font-family: var(--serif); font-weight: 700;
border-radius: 10px; letter-spacing: -.02em;
}
.brand__name { font-family: var(--serif); font-weight: 700; color: var(--navy); line-height: 1.05; display: flex; flex-direction: column; }
.brand__name small { font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; }
.nav__links a { font-weight: 500; color: var(--ink); font-size: .95rem; }
.nav__links a:not(.btn):hover { color: var(--gold); }
.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(--navy); border-radius: 2px; transition: .25s; }
/* Hero */
.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0; }
.hero__grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.01em; }
.lede { color: var(--muted); font-size: 1.1rem; margin-top: 1.1rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1.8rem; padding: 0; margin: 2.2rem 0 0; }
.hero__trust li { color: var(--muted); font-size: .9rem; }
.hero__trust strong { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--navy); }
.hero__card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.8rem; box-shadow: var(--shadow); position: relative;
}
.hero__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--gold); border-radius: var(--radius) var(--radius) 0 0; }
.hero__card h2 { font-size: 1.35rem; }
.hero__card p { color: var(--muted); margin-top: .5rem; }
.hero__steps { margin: 1.2rem 0 0; padding-left: 1.1rem; color: var(--ink); }
.hero__steps li { margin: .45rem 0; }
.hero__card-note { font-size: .85rem; color: var(--gold); font-weight: 600; margin-top: 1.1rem; }
/* Sections */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--paper { background: var(--white); border-block: 1px solid var(--line); }
.section__head { max-width: 620px; margin-bottom: 2.6rem; }
.section__title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section__sub { color: var(--muted); margin-top: .8rem; font-size: 1.05rem; }
/* Service cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
padding: 1.7rem 1.5rem; transition: transform .2s, box-shadow .25s, border-color .2s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; font-size: 1.5rem; background: var(--gold-soft); border-radius: 12px; margin-bottom: 1rem; }
.card h3 { font-size: 1.22rem; }
.card p { color: var(--muted); margin-top: .6rem; font-size: .96rem; }
.card__link { display: inline-block; margin-top: 1.1rem; color: var(--gold); font-weight: 600; font-size: .9rem; }
.card__link:hover { color: var(--navy); }
/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; max-width: 760px; }
.timeline__item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; position: relative; }
.timeline__item:not(:last-child)::before {
content: ""; position: absolute; left: 25px; top: 56px; bottom: -1.4rem; width: 2px;
background: linear-gradient(var(--gold), var(--gold-soft));
}
.timeline__num {
display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
background: var(--navy); color: var(--gold-soft); font-family: var(--serif); font-size: 1.3rem; font-weight: 700; z-index: 1;
}
.timeline__item h3 { font-size: 1.2rem; }
.timeline__item p { color: var(--muted); margin-top: .35rem; }
/* Quotes */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.quote {
background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold);
border-radius: var(--radius); padding: 1.8rem; margin: 0; box-shadow: var(--shadow);
}
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.18rem; color: var(--navy); line-height: 1.45; }
.quote figcaption { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; }
.quote__avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-soft); color: var(--navy); font-weight: 700; font-size: .85rem; }
.quote figcaption span small { display: block; color: var(--muted); font-size: .82rem; }
/* FAQ */
.faq { display: grid; gap: .8rem; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq__q {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--navy);
padding: 1.1rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__chev { width: 12px; height: 12px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform .25s; flex: none; }
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(-135deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq__a p { padding: 0 1.3rem 1.2rem; color: var(--muted); }
/* Consult */
.consult { background: var(--navy); color: #e9edf5; }
.consult__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.consult h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.consult__copy p { color: #c4cde0; margin-top: .9rem; }
.consult__list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; }
.consult__list li { position: relative; padding-left: 1.7rem; color: #d7ddea; }
.consult__list li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.consult__form { background: var(--white); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.field input, .field select, .field textarea {
width: 100%; padding: .72rem .85rem; border: 1px solid var(--line); border-radius: 10px;
font: inherit; color: var(--ink); background: var(--bg); transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,141,87,.18); outline: none; background: #fff; }
.field textarea { resize: vertical; }
.field--invalid input { border-color: #c0473b; }
.field__err { display: block; color: #c0473b; font-size: .76rem; margin-top: .3rem; min-height: 1em; }
.consult__ok { margin-top: 1rem; color: #2f7a4f; font-weight: 600; text-align: center; }
/* Footer */
.footer { background: var(--navy-d); color: #aeb8cc; padding: 3rem 0 1.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand--footer .brand__name { color: #fff; }
.brand--footer .brand__mark { background: var(--gold); color: var(--navy-d); }
.footer__blurb { margin-top: 1rem; max-width: 32ch; font-size: .92rem; }
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: .9rem; }
.footer nav a { display: block; padding: .25rem 0; color: #aeb8cc; font-size: .92rem; }
.footer nav a:hover { color: var(--gold); }
.footer__addr { font-style: normal; font-size: .92rem; line-height: 1.7; }
.footer__addr a:hover { color: var(--gold); }
.footer__base { padding-top: 1.4rem; font-size: .82rem; color: #7f8aa3; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .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: 900px) {
.cards { grid-template-columns: 1fr 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
.nav__links {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: .4rem;
background: var(--bg); border-bottom: 1px solid var(--line);
padding: 1rem; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .22s;
}
.nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nav__links a { padding: .7rem .4rem; }
.nav__toggle { display: flex; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hero__grid, .consult__grid, .quotes { grid-template-columns: 1fr; }
.cards { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr; gap: 1.4rem; }
.hero__trust { gap: 1.2rem; }
}(function () {
"use strict";
/* --- Mobile nav toggle --- */
var toggle = document.getElementById("navToggle");
var menu = document.getElementById("menu");
if (toggle && menu) {
toggle.addEventListener("click", function () {
var open = menu.classList.toggle("is-open");
toggle.classList.toggle("is-open", open);
toggle.setAttribute("aria-expanded", String(open));
toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
menu.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
menu.classList.remove("is-open");
toggle.classList.remove("is-open");
toggle.setAttribute("aria-expanded", "false");
}
});
}
/* --- Scroll reveal --- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.14, rootMargin: "0px 0px -40px 0px" }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("is-in"); });
}
/* --- FAQ accordion --- */
var faq = document.getElementById("faqList");
if (faq) {
faq.addEventListener("click", function (e) {
var btn = e.target.closest(".faq__q");
if (!btn) return;
var panel = btn.nextElementSibling;
var isOpen = btn.getAttribute("aria-expanded") === "true";
// close all
faq.querySelectorAll(".faq__q").forEach(function (q) {
q.setAttribute("aria-expanded", "false");
if (q.nextElementSibling) q.nextElementSibling.style.maxHeight = null;
});
if (!isOpen) {
btn.setAttribute("aria-expanded", "true");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/* --- Consultation form validation --- */
var form = document.getElementById("consultForm");
if (form) {
var ok = document.getElementById("consultOk");
function setErr(name, msg) {
var input = form.elements[name];
var slot = form.querySelector('.field__err[data-for="' + name + '"]');
if (input) input.closest(".field").classList.toggle("field--invalid", !!msg);
if (slot) slot.textContent = msg || "";
return !msg;
}
function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = form.elements.name.value.trim();
var email = form.elements.email.value.trim();
var a = setErr("name", name ? "" : "Please tell us your name.");
var b = setErr("email", !email ? "Please add an email." : validEmail(email) ? "" : "That email looks off.");
if (a && b) {
form.querySelectorAll("input, select, textarea, button").forEach(function (el) { el.disabled = true; });
if (ok) ok.hidden = false;
}
});
["name", "email"].forEach(function (n) {
var el = form.elements[n];
if (el) el.addEventListener("input", function () { setErr(n, ""); });
});
}
})();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Harlow & Reyes — Family Law</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="nav" id="top">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Harlow and Reyes home">
<span class="brand__mark" aria-hidden="true">H&R</span>
<span class="brand__name">Harlow & Reyes<small>Family Law</small></span>
</a>
<nav class="nav__links" id="menu" aria-label="Primary">
<a href="#services">Services</a>
<a href="#process">How we help</a>
<a href="#testimonials">Families</a>
<a href="#faq">FAQ</a>
<a class="btn btn--ghost" href="#consult">Free consultation</a>
</nav>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="menu" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy reveal">
<p class="eyebrow">Compassionate family law since 1998</p>
<h1>Steady guidance through life's hardest decisions.</h1>
<p class="lede">
Divorce, custody and adoption are never just legal matters — they are personal.
We listen first, protect what matters most, and help your family move forward
with dignity.
</p>
<div class="hero__cta">
<a class="btn btn--gold" href="#consult">Book a free consultation</a>
<a class="btn btn--quiet" href="#process">See how we help</a>
</div>
<ul class="hero__trust">
<li><strong>25+</strong> years of practice</li>
<li><strong>3,400</strong> families served</li>
<li><strong>4.9</strong>★ client rating</li>
</ul>
</div>
<aside class="hero__card reveal" aria-label="What to expect">
<h2>Your first call</h2>
<p>A free, confidential 30-minute conversation. No pressure, no jargon.</p>
<ol class="hero__steps">
<li>Tell us what's happening</li>
<li>We outline your options</li>
<li>You decide the next step</li>
</ol>
<p class="hero__card-note">Available evenings & weekends.</p>
</aside>
</div>
</section>
<!-- SERVICES -->
<section class="section" id="services">
<div class="wrap">
<header class="section__head reveal">
<p class="eyebrow">How we can help</p>
<h2 class="section__title">Family law, handled with care</h2>
<p class="section__sub">Focused practice areas, each led by an attorney who has guided hundreds of families like yours.</p>
</header>
<div class="cards">
<article class="card reveal">
<span class="card__icon" aria-hidden="true">⚖️</span>
<h3>Divorce & Separation</h3>
<p>Uncontested and contested divorce, asset division and spousal support — resolved with clarity and minimal conflict.</p>
<a class="card__link" href="#consult">Talk it through →</a>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">🧸</span>
<h3>Child Custody & Support</h3>
<p>Parenting plans, custody modifications and fair support arrangements that keep your children's needs first.</p>
<a class="card__link" href="#consult">Protect your kids →</a>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">🕊️</span>
<h3>Mediation</h3>
<p>A calmer, lower-cost path. We help both sides reach lasting agreements outside the courtroom.</p>
<a class="card__link" href="#consult">Find common ground →</a>
</article>
<article class="card reveal">
<span class="card__icon" aria-hidden="true">🏡</span>
<h3>Adoption</h3>
<p>Stepparent, agency and foster-to-adopt journeys, guided start to finish so you can focus on welcoming family.</p>
<a class="card__link" href="#consult">Grow your family →</a>
</article>
</div>
</div>
</section>
<!-- PROCESS -->
<section class="section section--paper" id="process">
<div class="wrap">
<header class="section__head reveal">
<p class="eyebrow">A calmer path forward</p>
<h2 class="section__title">What working with us looks like</h2>
<p class="section__sub">Four clear steps — so you always know where you stand.</p>
</header>
<ol class="timeline">
<li class="timeline__item reveal">
<span class="timeline__num">1</span>
<div>
<h3>Listen</h3>
<p>A free consultation where you tell us your story. We answer questions and explain your rights in plain language.</p>
</div>
</li>
<li class="timeline__item reveal">
<span class="timeline__num">2</span>
<div>
<h3>Plan</h3>
<p>We build a strategy around your goals — your children, your finances and your peace of mind — and share it in writing.</p>
</div>
</li>
<li class="timeline__item reveal">
<span class="timeline__num">3</span>
<div>
<h3>Resolve</h3>
<p>Through negotiation, mediation or court when needed, we pursue the outcome that protects your family.</p>
</div>
</li>
<li class="timeline__item reveal">
<span class="timeline__num">4</span>
<div>
<h3>Move forward</h3>
<p>Final agreements, filings and follow-up support so you can close this chapter and begin the next with confidence.</p>
</div>
</li>
</ol>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section" id="testimonials">
<div class="wrap">
<header class="section__head reveal">
<p class="eyebrow">In their words</p>
<h2 class="section__title">Families who found steadier ground</h2>
</header>
<div class="quotes">
<figure class="quote reveal">
<blockquote>"They made the hardest year of my life feel survivable. My custody plan was fair, and my kids never felt caught in the middle."</blockquote>
<figcaption>
<span class="quote__avatar" aria-hidden="true">DM</span>
<span><strong>Danielle M.</strong><small>Custody & support</small></span>
</figcaption>
</figure>
<figure class="quote reveal">
<blockquote>"Mediation saved us thousands and a lot of bitterness. Calm, patient, and genuinely on our side the whole way."</blockquote>
<figcaption>
<span class="quote__avatar" aria-hidden="true">RT</span>
<span><strong>Raj & Tomás</strong><small>Mediated divorce</small></span>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section section--paper" id="faq">
<div class="wrap wrap--narrow">
<header class="section__head reveal">
<p class="eyebrow">Good to know</p>
<h2 class="section__title">Common questions</h2>
</header>
<div class="faq" id="faqList">
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">
Is the first consultation really free?
<span class="faq__chev" aria-hidden="true"></span>
</button>
<div class="faq__a"><p>Yes. Your first 30-minute consultation is free and completely confidential, in person or by video. There's no obligation to hire us afterward.</p></div>
</div>
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">
Do we have to go to court?
<span class="faq__chev" aria-hidden="true"></span>
</button>
<div class="faq__a"><p>Most of our cases settle through negotiation or mediation. We only go to court when it's truly in your family's best interest, and we'll always tell you honestly which path fits.</p></div>
</div>
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">
How are your fees structured?
<span class="faq__chev" aria-hidden="true"></span>
</button>
<div class="faq__a"><p>We offer flat-fee mediation packages and transparent hourly rates for litigation. After your consultation you'll receive a written estimate so there are no surprises.</p></div>
</div>
<div class="faq__item reveal">
<button class="faq__q" aria-expanded="false">
How long does a divorce take?
<span class="faq__chev" aria-hidden="true"></span>
</button>
<div class="faq__a"><p>An uncontested divorce can finalize in a few months; contested matters take longer. We'll give you a realistic timeline based on your specific situation during your first call.</p></div>
</div>
</div>
</div>
</section>
<!-- CONSULT CTA -->
<section class="section consult" id="consult">
<div class="wrap consult__grid">
<div class="consult__copy reveal">
<p class="eyebrow eyebrow--light">Take the first step</p>
<h2>Request your free consultation</h2>
<p>Tell us a little about your situation and we'll reach out within one business day. Everything you share stays confidential.</p>
<ul class="consult__list">
<li>Confidential & judgment-free</li>
<li>Evening & weekend appointments</li>
<li>In person or by secure video</li>
</ul>
</div>
<form class="consult__form reveal" id="consultForm" novalidate>
<div class="field">
<label for="name">Full name</label>
<input id="name" name="name" type="text" autocomplete="name" required />
<small class="field__err" data-for="name"></small>
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required />
<small class="field__err" data-for="email"></small>
</div>
<div class="field">
<label for="topic">How can we help?</label>
<select id="topic" name="topic">
<option value="divorce">Divorce & separation</option>
<option value="custody">Child custody & support</option>
<option value="mediation">Mediation</option>
<option value="adoption">Adoption</option>
<option value="other">Something else</option>
</select>
</div>
<div class="field">
<label for="message">A few details (optional)</label>
<textarea id="message" name="message" rows="3" placeholder="Share whatever feels comfortable."></textarea>
</div>
<button class="btn btn--gold btn--block" type="submit">Request consultation</button>
<p class="consult__ok" id="consultOk" role="status" hidden>Thank you — we'll be in touch within one business day.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer__grid">
<div>
<span class="brand brand--footer">
<span class="brand__mark" aria-hidden="true">H&R</span>
<span class="brand__name">Harlow & Reyes</span>
</span>
<p class="footer__blurb">Family law, handled with care. Serving families across the Cedar Valley region.</p>
</div>
<nav aria-label="Services">
<h3>Services</h3>
<a href="#services">Divorce</a>
<a href="#services">Custody</a>
<a href="#services">Mediation</a>
<a href="#services">Adoption</a>
</nav>
<nav aria-label="Firm">
<h3>Firm</h3>
<a href="#process">How we help</a>
<a href="#testimonials">Testimonials</a>
<a href="#faq">FAQ</a>
</nav>
<div>
<h3>Visit</h3>
<address class="footer__addr">
218 Linden Court, Suite 4<br />
Cedar Valley, OR 97401<br />
<a href="tel:+15415550148">(541) 555-0148</a>
</address>
</div>
</div>
<div class="wrap footer__base">
<p>© 1998–2026 Harlow & Reyes LLP. Illustrative demo — not a real firm and not legal advice.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>Family Law Landing
A warmer, more reassuring marketing page for a family-law practice. The tone softens the firm palette into muted navy and warm gold over a warm-paper background, pairing a Georgia serif for headings with Inter body copy. A sticky nav sits above an empathetic hero that leads with a free-consultation call, then the page walks a prospective client through four core services — divorce, child custody, mediation and adoption — a calming four-step process timeline, two gentle testimonials, a collapsible FAQ, and a final consultation form before a structured footer.
Generous whitespace and thin gold rules keep the layout calm and trust-first. Vanilla JS handles
the mobile nav toggle, scroll-reveal animations via IntersectionObserver, an accessible FAQ
accordion, and inline validation on the consultation form — no libraries.
Illustrative UI only — not legal advice and not a real law firm.