Pages Hard

Law Firm — Criminal Defense Landing

An urgent criminal-defense law firm landing page with a 24/7 available-now hero and phone CTA, defense practice areas, case results, attorney trust signals, client testimonials, and a free confidential case review form wired with vanilla JS validation.

Open in Lab

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;
  --urgent: #c0392b;
  --line: rgba(176, 141, 87, 0.35);
  --shadow: 0 12px 32px rgba(16, 27, 51, 0.12);
  --serif: "Georgia", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 12px;
}

* { 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: 700;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--navy);
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  letter-spacing: 0.01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--navy-d); box-shadow: 0 6px 18px rgba(176, 141, 87, 0.4); }
.btn-gold:hover { background: #c29c63; }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-d); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 1.02rem; }
.btn-block { width: 100%; justify-content: center; }

/* Alert bar */
.alert-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  background: var(--urgent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  text-align: center;
}
.alert-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulse 1.8s infinite;
}
.alert-call { font-weight: 700; text-decoration: underline; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  border: 1px solid var(--gold);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-family: var(--serif); color: var(--navy); font-size: 1.05rem; }
.brand-text small { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.site-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-bottom: 2px;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.2s ease;
}
.site-nav a:hover::after { width: 100%; }
.header-call { font-size: 0.88rem; padding: 0.55rem 1rem; }

/* Hero */
.hero {
  background:
    linear-gradient(180deg, rgba(16, 27, 51, 0.92), rgba(27, 42, 74, 0.96)),
    radial-gradient(circle at 80% 0%, rgba(176, 141, 87, 0.25), transparent 55%);
  background-color: var(--navy-d);
  color: #eef1f7;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 3rem);
}
.hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(176, 141, 87, 0.15);
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #57c97b;
  box-shadow: 0 0 0 0 rgba(87, 201, 123, 0.7);
  animation: pulse 1.8s infinite;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin-bottom: 0.6em;
}
.hero-lead {
  font-size: clamp(1rem, 2vw, 1.18rem);
  color: #cdd5e4;
  max-width: 620px;
  margin: 0 auto 2rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.hero-trust {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 5vw, 3rem);
  flex-wrap: wrap;
  margin: 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid rgba(176, 141, 87, 0.3);
}
.hero-trust li { font-size: 0.85rem; color: #aeb8cc; }
.hero-trust strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold);
}

/* Generic sections */
.section { padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem); }
.section-head { max-width: 640px; margin: 0 auto 2.6rem; text-align: center; }
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}
.eyebrow-gold { color: var(--gold); }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.section-head h2::after {
  content: "";
  display: block;
  width: 64px; height: 2px;
  background: var(--gold);
  margin: 0.8rem auto 0;
}
.section-sub { color: var(--muted); margin: 0; }
.section-sub-light { color: #b3bccc; }

/* Areas */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.4rem;
  max-width: 1100px;
  margin: 0 auto;
}
.area-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.area-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.area-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--gold-soft);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.area-card h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.area-card p { color: var(--muted); font-size: 0.92rem; margin: 0 0 1rem; }
.area-link { color: var(--navy); font-weight: 600; font-size: 0.9rem; }
.area-link:hover { color: var(--gold); }

/* Results */
.section-dark {
  background: var(--navy);
  color: #eef1f7;
}
.section-dark h2 { color: var(--white); }
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.result-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(176, 141, 87, 0.3);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem;
  border-left: 3px solid var(--gold);
}
.result-verdict {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.result-desc { color: #d7deec; font-size: 0.92rem; margin: 0 0 0.8rem; }
.result-meta { color: #8a96ac; font-size: 0.78rem; margin: 0; letter-spacing: 0.03em; }

/* About */
.about {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}
.about-text h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.about-text p { color: var(--muted); }
.about-points { list-style: none; padding: 0; margin: 1.4rem 0; }
.about-points li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.7rem;
  color: var(--ink);
  font-weight: 500;
}
.about-points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* Testimonials */
.testimonials {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 2rem 1.8rem 1.5rem;
  box-shadow: var(--shadow);
  min-height: 220px;
  display: flex;
  flex-direction: column;
}
.quote { display: none; margin: 0; flex: 1; }
.quote.active { display: block; animation: fade 0.4s ease; }
.quote blockquote {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  margin: 0 0 1rem;
  line-height: 1.5;
}
.quote figcaption { color: var(--muted); font-size: 0.88rem; font-weight: 500; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.quote-dots { display: flex; gap: 0.5rem; margin-top: 1.2rem; }
.qdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--gold-soft);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.qdot:hover { transform: scale(1.2); }
.qdot.active { background: var(--gold); }

/* Review */
.review { background: var(--gold-soft); }
.review-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1050px;
  margin: 0 auto;
  align-items: start;
}
.review-copy h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.review-copy p { color: #6a5a44; }
.review-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
}
.review-phone:hover { color: var(--gold); }

.review-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.7rem 0.85rem;
  border: 1px solid #d6cfc1;
  border-radius: 8px;
  background: #fdfcfa;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.2);
}
.field.invalid input,
.field.invalid select {
  border-color: var(--urgent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.field-error {
  display: block;
  color: var(--urgent);
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 0.3rem;
  min-height: 1em;
}
.form-status {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0;
}
.form-status.show {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  background: #e6f4ea;
  color: #1d6b3a;
  border: 1px solid #b6e0c4;
}
.form-fine {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
}

/* Footer */
.site-footer {
  background: var(--navy-d);
  color: #c2cadb;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem) 6rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.footer-brand { display: flex; gap: 0.8rem; align-items: flex-start; }
.footer-brand p { margin: 0; line-height: 1.4; font-size: 0.9rem; }
.footer-brand strong { color: var(--white); font-family: var(--serif); }
.footer-col h4 {
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.9rem;
}
.footer-col a {
  display: block;
  color: #c2cadb;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--gold); }
.footer-addr { font-size: 0.85rem; color: #8a96ac; margin: 0.4rem 0 0; }
.footer-legal {
  max-width: 1100px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(176, 141, 87, 0.25);
  font-size: 0.78rem;
  color: #8a96ac;
  text-align: center;
}

/* Sticky mobile call */
.mobile-call {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--urgent);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

/* Responsive */
@media (max-width: 880px) {
  .about { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .site-nav { display: none; }
  .header-call { display: none; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: 1.4rem; }
  .section-head h2 { font-size: 1.6rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .footer-brand { justify-content: flex-start; }
  .mobile-call { display: flex; }
}

// Hale & Renner — Criminal Defense Landing
// Vanilla JS only: rotating testimonials + accessible form validation.

(function () {
  "use strict";

  /* ---------- Rotating testimonials ---------- */
  var quotes = Array.prototype.slice.call(document.querySelectorAll(".quote"));
  var dots = Array.prototype.slice.call(document.querySelectorAll(".qdot"));
  var current = 0;
  var timer = null;

  function showQuote(index) {
    current = (index + quotes.length) % quotes.length;
    quotes.forEach(function (q, i) {
      q.classList.toggle("active", i === current);
    });
    dots.forEach(function (d, i) {
      var on = i === current;
      d.classList.toggle("active", on);
      d.setAttribute("aria-selected", on ? "true" : "false");
    });
  }

  function startAuto() {
    stopAuto();
    timer = window.setInterval(function () {
      showQuote(current + 1);
    }, 6000);
  }
  function stopAuto() {
    if (timer) window.clearInterval(timer);
  }

  dots.forEach(function (dot) {
    dot.addEventListener("click", function () {
      var idx = parseInt(dot.getAttribute("data-dot"), 10);
      showQuote(idx);
      startAuto();
    });
  });

  if (quotes.length) startAuto();

  /* ---------- Free case review form ---------- */
  var form = document.getElementById("reviewForm");
  var status = document.getElementById("formStatus");

  function setError(field, message) {
    var wrap = field.closest(".field");
    var slot = wrap ? wrap.querySelector(".field-error") : null;
    if (wrap) wrap.classList.add("invalid");
    if (slot) slot.textContent = message;
    field.setAttribute("aria-invalid", "true");
  }

  function clearError(field) {
    var wrap = field.closest(".field");
    var slot = wrap ? wrap.querySelector(".field-error") : null;
    if (wrap) wrap.classList.remove("invalid");
    if (slot) slot.textContent = "";
    field.removeAttribute("aria-invalid");
  }

  function validPhone(value) {
    var digits = value.replace(/\D/g, "");
    return digits.length >= 10;
  }

  if (form) {
    var name = form.querySelector("#name");
    var phone = form.querySelector("#phone");
    var charge = form.querySelector("#charge");

    [name, phone, charge].forEach(function (f) {
      f.addEventListener("input", function () {
        clearError(f);
      });
      f.addEventListener("change", function () {
        clearError(f);
      });
    });

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      var ok = true;
      status.classList.remove("show");
      status.textContent = "";

      if (!name.value.trim()) {
        setError(name, "Please enter your name.");
        ok = false;
      }
      if (!phone.value.trim()) {
        setError(phone, "We need a phone number to reach you.");
        ok = false;
      } else if (!validPhone(phone.value)) {
        setError(phone, "Enter a valid 10-digit phone number.");
        ok = false;
      }
      if (!charge.value) {
        setError(charge, "Select the type of charge.");
        ok = false;
      }

      if (!ok) {
        var firstInvalid = form.querySelector(".field.invalid input, .field.invalid select");
        if (firstInvalid) firstInvalid.focus();
        return;
      }

      var firstName = name.value.trim().split(" ")[0];
      status.textContent =
        "Thank you, " + firstName + ". An attorney will call you shortly. (Demo — nothing was sent.)";
      status.classList.add("show");
      form.reset();
      status.focus && status.focus();
    });
  }
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hale &amp; Renner — Criminal Defense Attorneys</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Urgency strip -->
  <div class="alert-bar" role="region" aria-label="Emergency contact">
    <span class="alert-dot" aria-hidden="true"></span>
    <span>Arrested or under investigation? Call now — we answer 24/7.</span>
    <a class="alert-call" href="tel:+18005550148">(800) 555-0148</a>
  </div>

  <!-- Header -->
  <header class="site-header">
    <a class="brand" href="#top" aria-label="Hale and Renner, home">
      <span class="brand-mark" aria-hidden="true">H&amp;R</span>
      <span class="brand-text">
        <strong>Hale &amp; Renner</strong>
        <small>Criminal Defense Attorneys</small>
      </span>
    </a>
    <nav class="site-nav" aria-label="Primary">
      <a href="#areas">Defense Areas</a>
      <a href="#results">Results</a>
      <a href="#about">Our Firm</a>
      <a href="#review">Free Review</a>
    </nav>
    <a class="btn btn-gold header-call" href="tel:+18005550148">
      <span aria-hidden="true">&#9742;</span> (800) 555-0148
    </a>
  </header>

  <!-- Hero -->
  <main id="top">
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-inner">
        <span class="badge-live">
          <span class="live-dot" aria-hidden="true"></span> Attorney available now
        </span>
        <h1 id="hero-title">When your freedom is on the line, the first hour matters most.</h1>
        <p class="hero-lead">
          Aggressive, around-the-clock criminal defense across the state. Former prosecutors who know
          how the other side builds a case — and how to take it apart. Your first consultation is
          free and confidential.
        </p>
        <div class="hero-actions">
          <a class="btn btn-gold btn-lg" href="tel:+18005550148">
            <span aria-hidden="true">&#9742;</span> Call (800) 555-0148
          </a>
          <a class="btn btn-ghost btn-lg" href="#review">Request a free case review</a>
        </div>
        <ul class="hero-trust" aria-label="Firm highlights">
          <li><strong>32 yrs</strong> combined trial experience</li>
          <li><strong>1,400+</strong> cases defended</li>
          <li><strong>24/7</strong> jail &amp; emergency response</li>
        </ul>
      </div>
    </section>

    <!-- Defense areas -->
    <section id="areas" class="section" aria-labelledby="areas-title">
      <div class="section-head">
        <p class="eyebrow">What we defend</p>
        <h2 id="areas-title">Practice areas</h2>
        <p class="section-sub">Charged with any of these? Do not speak to investigators before you speak to us.</p>
      </div>
      <div class="areas-grid">
        <article class="area-card">
          <span class="area-icon" aria-hidden="true">&#128663;</span>
          <h3>DUI &amp; DWI</h3>
          <p>First offenses to felony DUI. We challenge stops, breathalyzer calibration and field sobriety procedure.</p>
          <a class="area-link" href="#review">Discuss my case &rarr;</a>
        </article>
        <article class="area-card">
          <span class="area-icon" aria-hidden="true">&#9888;</span>
          <h3>Assault &amp; Violent Crimes</h3>
          <p>Assault, battery and domestic charges. Self-defense, mistaken identity and over-charging are our focus.</p>
          <a class="area-link" href="#review">Discuss my case &rarr;</a>
        </article>
        <article class="area-card">
          <span class="area-icon" aria-hidden="true">&#128138;</span>
          <h3>Drug Charges</h3>
          <p>Possession, distribution and trafficking. Illegal searches and chain-of-custody errors get cases dismissed.</p>
          <a class="area-link" href="#review">Discuss my case &rarr;</a>
        </article>
        <article class="area-card">
          <span class="area-icon" aria-hidden="true">&#128188;</span>
          <h3>White-Collar Crime</h3>
          <p>Fraud, embezzlement and federal investigations. Discreet defense that protects your career and reputation.</p>
          <a class="area-link" href="#review">Discuss my case &rarr;</a>
        </article>
      </div>
    </section>

    <!-- Results -->
    <section id="results" class="section section-dark" aria-labelledby="results-title">
      <div class="section-head">
        <p class="eyebrow eyebrow-gold">Recent outcomes</p>
        <h2 id="results-title">Case results</h2>
        <p class="section-sub section-sub-light">Prior results do not guarantee a similar outcome. Every case is unique.</p>
      </div>
      <div class="results-grid">
        <div class="result-card">
          <p class="result-verdict">Dismissed</p>
          <p class="result-desc">Felony drug trafficking — evidence suppressed after unlawful traffic stop.</p>
          <p class="result-meta">State v. M.R. &middot; 2025</p>
        </div>
        <div class="result-card">
          <p class="result-verdict">Not Guilty</p>
          <p class="result-desc">Aggravated assault — acquitted at jury trial on self-defense.</p>
          <p class="result-meta">State v. D.K. &middot; 2024</p>
        </div>
        <div class="result-card">
          <p class="result-verdict">Reduced</p>
          <p class="result-desc">Felony DUI lowered to a non-jail misdemeanor with no license loss.</p>
          <p class="result-meta">State v. L.T. &middot; 2025</p>
        </div>
        <div class="result-card">
          <p class="result-verdict">No Charges</p>
          <p class="result-desc">Federal wire-fraud probe closed pre-indictment after early intervention.</p>
          <p class="result-meta">U.S. v. (sealed) &middot; 2024</p>
        </div>
      </div>
    </section>

    <!-- About / trust -->
    <section id="about" class="section about" aria-labelledby="about-title">
      <div class="about-text">
        <p class="eyebrow">Why clients trust us</p>
        <h2 id="about-title">Former prosecutors. Relentless advocates.</h2>
        <p>
          Hale &amp; Renner was built by attorneys who spent years inside the District Attorney&rsquo;s
          office. We know exactly how charges are filed, where cases are weak, and how to pressure the
          prosecution before trial ever begins.
        </p>
        <ul class="about-points">
          <li>Direct line to your attorney — not a call center</li>
          <li>Flat-fee and payment-plan options, explained up front</li>
          <li>Spanish-speaking staff and 24-hour jail response</li>
        </ul>
        <a class="btn btn-navy" href="#review">Start my free case review</a>
      </div>
      <aside class="testimonials" aria-label="Client testimonials">
        <figure class="quote active" data-quote="0">
          <blockquote>&ldquo;I was facing serious time. They got the whole thing dismissed before trial. I have my life back.&rdquo;</blockquote>
          <figcaption>&mdash; Marcus T., assault charge dismissed</figcaption>
        </figure>
        <figure class="quote" data-quote="1">
          <blockquote>&ldquo;Answered my call at 2 a.m. when my son was arrested. Calm, clear, and at the jail within the hour.&rdquo;</blockquote>
          <figcaption>&mdash; Deborah L., DUI defense</figcaption>
        </figure>
        <figure class="quote" data-quote="2">
          <blockquote>&ldquo;A federal investigation never became charges because they stepped in early. Worth every dollar.&rdquo;</blockquote>
          <figcaption>&mdash; Anonymous, white-collar matter</figcaption>
        </figure>
        <div class="quote-dots" role="tablist" aria-label="Choose testimonial">
          <button class="qdot active" data-dot="0" role="tab" aria-selected="true" aria-label="Testimonial 1"></button>
          <button class="qdot" data-dot="1" role="tab" aria-selected="false" aria-label="Testimonial 2"></button>
          <button class="qdot" data-dot="2" role="tab" aria-selected="false" aria-label="Testimonial 3"></button>
        </div>
      </aside>
    </section>

    <!-- Free case review -->
    <section id="review" class="section review" aria-labelledby="review-title">
      <div class="review-grid">
        <div class="review-copy">
          <p class="eyebrow eyebrow-gold">Free &amp; confidential</p>
          <h2 id="review-title">Request your free case review</h2>
          <p>Tell us what you&rsquo;re facing. An attorney will respond — usually within the hour. Submitting this form does not create an attorney-client relationship.</p>
          <a class="review-phone" href="tel:+18005550148">
            <span aria-hidden="true">&#9742;</span> Or call now: (800) 555-0148
          </a>
        </div>

        <form class="review-form" id="reviewForm" novalidate>
          <p class="form-status" id="formStatus" role="status" aria-live="polite"></p>

          <div class="field">
            <label for="name">Full name</label>
            <input type="text" id="name" name="name" autocomplete="name" placeholder="e.g. Jordan Avery" required />
            <span class="field-error" data-error-for="name"></span>
          </div>

          <div class="field">
            <label for="phone">Phone number</label>
            <input type="tel" id="phone" name="phone" autocomplete="tel" placeholder="(555) 010-2837" required />
            <span class="field-error" data-error-for="phone"></span>
          </div>

          <div class="field">
            <label for="charge">Type of charge</label>
            <select id="charge" name="charge" required>
              <option value="">Select a charge type</option>
              <option>DUI / DWI</option>
              <option>Assault / Violent crime</option>
              <option>Drug charge</option>
              <option>White-collar / Fraud</option>
              <option>Theft / Property crime</option>
              <option>Other / Not sure</option>
            </select>
            <span class="field-error" data-error-for="charge"></span>
          </div>

          <div class="field">
            <label for="details">Briefly, what happened?</label>
            <textarea id="details" name="details" rows="4" placeholder="Date of arrest, county, current status…"></textarea>
          </div>

          <button type="submit" class="btn btn-gold btn-block">Get my free review</button>
          <p class="form-fine">Confidential. No obligation. We never sell your information.</p>
        </form>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <div class="footer-inner">
      <div class="footer-brand">
        <span class="brand-mark" aria-hidden="true">H&amp;R</span>
        <p><strong>Hale &amp; Renner</strong><br />Criminal Defense Attorneys</p>
      </div>
      <div class="footer-col">
        <h4>Defense areas</h4>
        <a href="#areas">DUI &amp; DWI</a>
        <a href="#areas">Assault</a>
        <a href="#areas">Drug charges</a>
        <a href="#areas">White-collar</a>
      </div>
      <div class="footer-col">
        <h4>Firm</h4>
        <a href="#about">Our attorneys</a>
        <a href="#results">Case results</a>
        <a href="#review">Free review</a>
      </div>
      <div class="footer-col">
        <h4>24/7 contact</h4>
        <a href="tel:+18005550148">(800) 555-0148</a>
        <a href="mailto:[email protected]">[email protected]</a>
        <p class="footer-addr">410 Courthouse Sq, Suite 900</p>
      </div>
    </div>
    <p class="footer-legal">
      &copy; 2026 Hale &amp; Renner LLP. Attorney advertising. This site is illustrative UI only —
      not legal advice and not a real law firm.
    </p>
  </footer>

  <!-- Sticky mobile call bar -->
  <a class="mobile-call" href="tel:+18005550148">
    <span aria-hidden="true">&#9742;</span> Call 24/7 — Free Consultation
  </a>

  <script src="script.js"></script>
</body>
</html>

Criminal Defense Landing

An authoritative, trust-first landing page for a criminal-defense firm. A dark navy hero leads with a 24/7 available now badge, a bold serif headline and a tap-to-call CTA so an arrested client can reach an attorney immediately. Generous whitespace, thin gold rules and a Georgia serif keep the tone serious and credible.

Below the fold, four defense practice areas (DUI, assault & violent crimes, drug charges and white-collar) sit beside a case-results strip with real-sounding outcomes, an attorney trust block, and rotating client testimonials. A free, confidential case review form captures name, phone, charge type and details with inline vanilla-JS validation and a success confirmation.

Everything is plain HTML, CSS and vanilla JavaScript — no frameworks, no libraries. Swap the firm name, phone number and outcomes for your own.

Illustrative UI only — not legal advice and not affiliated with any real law firm.