Web Pages Easy

Legal / Law Firm

A professional law firm website with serif typography, trust signals, practice area cards, attorney profiles, and a consultation booking CTA. Clean, authoritative, confident.

Open in Lab

css vanilla-js lenis

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --navy: #0a1628;
  --gold: #b8963e;
  --warm: #f8f7f4;
  --text: #1e293b;
  --muted: #64748b;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--warm);
  color: var(--text);
}

/* NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3rem;
  background: var(--warm);
  border-bottom: 1px solid #e2ddd5;
  gap: 2rem;
}
.nav-brand {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.nav-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
}
.nav-est {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover {
  color: var(--navy);
}
.nav-cta {
  background: var(--navy) !important;
  color: var(--warm) !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 0.375rem;
  font-weight: 600 !important;
}
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
}

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 4rem 3rem 4rem 4rem;
}
.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--navy);
}
.hero-title em {
  font-style: italic;
  color: var(--gold);
}
.hero-sub {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 400px;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--navy);
  color: var(--warm);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn-primary:hover {
  opacity: 0.85;
}
.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid #ddd8cf;
  border-radius: 0.375rem;
  transition: background 0.15s;
}
.btn-phone:hover {
  background: #f0ece4;
}
.hero-image {
  position: relative;
  background: linear-gradient(160deg, #1a2744, #0a1628);
  overflow: hidden;
}
.hero-img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(184, 150, 62, 0.1), transparent 60%);
}
.hero-badge {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  background: var(--warm);
  border-radius: 0.625rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.badge-val {
  font-family: "Playfair Display", serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.badge-label {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}

/* TRUST BAR */
.trust-bar {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 2rem;
  flex-wrap: wrap;
}
.trust-item {
  font-size: 0.8rem;
  color: rgba(248, 247, 244, 0.7);
}
.trust-item strong {
  color: var(--warm);
  font-weight: 700;
}
.trust-sep {
  color: rgba(184, 150, 62, 0.4);
}

/* SECTIONS */
.section {
  padding: 5rem 4rem;
}
.section--dark {
  background: var(--navy);
}
.section--warm {
  background: #f0ece4;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
}
.container--narrow {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.section-title--light {
  color: var(--warm);
}
.section-sub {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 2.5rem;
  line-height: 1.65;
}

/* PRACTICE GRID */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.practice-card {
  background: var(--warm);
  border: 1px solid #e2ddd5;
  border-radius: 0.625rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s;
}
.practice-card:hover {
  box-shadow: 0 4px 20px rgba(10, 22, 40, 0.1);
}
.pc-icon {
  font-size: 1.5rem;
}
.practice-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.practice-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}
.pc-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  margin-top: auto;
}

/* ATTORNEYS */
.attorneys-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.attorney-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.attorney-photo {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a2744, #0a1628);
  border: 3px solid rgba(184, 150, 62, 0.3);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.attorney-card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--warm);
}
.attorney-title {
  font-size: 0.8rem;
  color: rgba(248, 247, 244, 0.6);
}
.attorney-bar {
  font-size: 0.72rem;
  color: var(--gold);
}

/* RESULTS */
.results-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
  border-top: 1px solid #e2ddd5;
}
.result-row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid #e2ddd5;
}
.result-amount {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 7rem;
}
.result-desc {
  flex: 1;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
.result-year {
  font-size: 0.8rem;
  color: #94a3b8;
  min-width: 3rem;
  text-align: right;
}
.results-disclaimer {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 1rem;
}

/* TESTIMONIALS */
.testimonial {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
}
.testimonial-quote {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.7;
}
.testimonial-attr {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.75rem;
}

/* CONTACT */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
}
.contact-sub {
  font-size: 0.9rem;
  color: rgba(248, 247, 244, 0.6);
  margin: 0.5rem 0 2rem;
  line-height: 1.65;
}
.office-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(248, 247, 244, 0.6);
  line-height: 1.6;
}
.office-info strong {
  color: var(--gold);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-group label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(248, 247, 244, 0.7);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--warm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
}
.form-group select option {
  background: var(--navy);
}
.btn-submit {
  padding: 0.875rem 2rem;
  background: var(--gold);
  border: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: inherit;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: flex-start;
}
.btn-submit:hover {
  opacity: 0.85;
}
.form-legal {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.5;
}

/* FOOTER */
.footer {
  background: #040c1a;
  padding: 1.5rem 4rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-brand {
  font-family: "Playfair Display", serif;
  font-size: 0.9rem;
  color: rgba(248, 247, 244, 0.4);
}
.footer-legal {
  font-size: 0.72rem;
  color: rgba(248, 247, 244, 0.3);
}

@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-image {
    display: none;
  }
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 3rem 1.5rem;
  }
  .nav-links {
    display: none;
  }
  .nav-mobile-toggle {
    display: block;
  }
}

(function () {
  "use strict";

  // ── Mobile nav toggle ─────────────────────────────────────────────
  const toggle = document.querySelector(".nav-mobile-toggle");
  const links = document.querySelector(".nav-links");

  if (toggle && links) {
    links.style.cssText =
      "display:none;position:absolute;top:100%;left:0;right:0;background:var(--warm);border-bottom:1px solid #e2ddd5;padding:1rem 3rem;flex-direction:column;gap:1rem;";
    let open = false;
    toggle.addEventListener("click", () => {
      open = !open;
      links.style.display = open ? "flex" : "none";
      toggle.setAttribute("aria-expanded", open);
    });
    // Close on link click
    links.querySelectorAll("a").forEach((a) => {
      a.addEventListener("click", () => {
        open = false;
        links.style.display = "none";
      });
    });
  }

  // ── Contact form validation ───────────────────────────────────────
  const form = document.getElementById("contact-form");
  if (!form) return;

  function showError(input, msg) {
    let err = input.nextElementSibling;
    if (!err || !err.classList.contains("field-error")) {
      err = document.createElement("span");
      err.className = "field-error";
      err.style.cssText = "font-size:0.72rem;color:#ef4444;margin-top:0.25rem;display:block;";
      input.parentNode.appendChild(err);
    }
    err.textContent = msg;
    input.style.borderColor = "#ef4444";
  }

  function clearError(input) {
    const err = input.parentNode.querySelector(".field-error");
    if (err) err.textContent = "";
    input.style.borderColor = "";
  }

  form.querySelectorAll("input, textarea").forEach((el) => {
    el.addEventListener("input", () => clearError(el));
  });

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    let valid = true;

    const name = document.getElementById("cf-name");
    const email = document.getElementById("cf-email");
    const message = document.getElementById("cf-message");

    if (!name.value.trim()) {
      showError(name, "Please enter your full name.");
      valid = false;
    }
    if (!email.value.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
      showError(email, "Please enter a valid email address.");
      valid = false;
    }
    if (!message.value.trim()) {
      showError(message, "Please briefly describe your matter.");
      valid = false;
    }

    if (!valid) return;

    // Success state
    const btn = form.querySelector(".btn-submit");
    btn.textContent = "Request Submitted ✓";
    btn.disabled = true;
    btn.style.background = "#22c55e";
    btn.style.cursor = "default";
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harmon &amp; Associates — Legal Counsel</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- NAV -->
  <nav class="nav">
    <a href="#" class="nav-brand">
      <span class="nav-name">Harmon &amp; Associates</span>
      <span class="nav-est">Est. 1978</span>
    </a>
    <ul class="nav-links">
      <li><a href="#practice">Practice Areas</a></li>
      <li><a href="#attorneys">Attorneys</a></li>
      <li><a href="#results">Results</a></li>
      <li><a href="#contact" class="nav-cta">Free Consultation</a></li>
    </ul>
    <button class="nav-mobile-toggle" aria-label="Menu">☰</button>
  </nav>

  <!-- HERO -->
  <section class="hero" id="hero">
    <div class="hero-content">
      <p class="hero-eyebrow">50 Years of Trusted Legal Counsel</p>
      <h1 class="hero-title">When the stakes<br>are highest, <em>experience</em><br>is everything.</h1>
      <p class="hero-sub">Harmon &amp; Associates has represented clients in complex litigation, corporate matters, and real estate transactions across 22 states.</p>
      <div class="hero-ctas">
        <a href="#contact" class="btn-primary">Schedule Free Consultation</a>
        <a href="tel:+18005550100" class="btn-phone">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13 19.79 19.79 0 0 1 1.61 4.44 2 2 0 0 1 3.6 2.23h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.07 6.07l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21.91 17z"/></svg>
          1-800-555-0100
        </a>
      </div>
    </div>
    <div class="hero-image">
      <div class="hero-img-placeholder" aria-hidden="true"></div>
      <div class="hero-badge">
        <span class="badge-val">AV®</span>
        <span class="badge-label">Martindale-Hubbell<br>Preeminent Rating</span>
      </div>
    </div>
  </section>

  <!-- TRUST BAR -->
  <div class="trust-bar">
    <div class="trust-item"><strong>50+</strong> Years of practice</div>
    <div class="trust-sep" aria-hidden="true">·</div>
    <div class="trust-item"><strong>2,400+</strong> Cases won</div>
    <div class="trust-sep" aria-hidden="true">·</div>
    <div class="trust-item"><strong>$1.2B+</strong> Recovered for clients</div>
    <div class="trust-sep" aria-hidden="true">·</div>
    <div class="trust-item"><strong>AV® Rated</strong> Martindale-Hubbell</div>
  </div>

  <!-- PRACTICE AREAS -->
  <section class="section" id="practice">
    <div class="container">
      <h2 class="section-title">Practice Areas</h2>
      <p class="section-sub">Comprehensive legal representation across the areas that matter most to businesses and individuals.</p>
      <div class="practice-grid">
        <div class="practice-card">
          <div class="pc-icon">⚖</div>
          <h3>Corporate Litigation</h3>
          <p>Shareholder disputes, breach of contract, business torts, and commercial arbitration.</p>
          <a href="#contact" class="pc-link">Learn more →</a>
        </div>
        <div class="practice-card">
          <div class="pc-icon">🏛</div>
          <h3>Mergers &amp; Acquisitions</h3>
          <p>Due diligence, deal structuring, regulatory compliance, and post-merger integration.</p>
          <a href="#contact" class="pc-link">Learn more →</a>
        </div>
        <div class="practice-card">
          <div class="pc-icon">🏢</div>
          <h3>Real Estate</h3>
          <p>Commercial transactions, development agreements, title disputes, and zoning matters.</p>
          <a href="#contact" class="pc-link">Learn more →</a>
        </div>
        <div class="practice-card">
          <div class="pc-icon">👥</div>
          <h3>Employment Law</h3>
          <p>Wrongful termination, discrimination, WARN Act compliance, and executive severance.</p>
          <a href="#contact" class="pc-link">Learn more →</a>
        </div>
        <div class="practice-card">
          <div class="pc-icon">💡</div>
          <h3>Intellectual Property</h3>
          <p>Patent litigation, trademark registration, trade secret protection, and licensing.</p>
          <a href="#contact" class="pc-link">Learn more →</a>
        </div>
        <div class="practice-card">
          <div class="pc-icon">🌐</div>
          <h3>International Law</h3>
          <p>Cross-border transactions, foreign arbitration, and multi-jurisdictional compliance.</p>
          <a href="#contact" class="pc-link">Learn more →</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ATTORNEYS -->
  <section class="section section--dark" id="attorneys">
    <div class="container">
      <h2 class="section-title section-title--light">Our Attorneys</h2>
      <div class="attorneys-grid">
        <div class="attorney-card">
          <div class="attorney-photo" aria-hidden="true">JH</div>
          <h3>James R. Harmon</h3>
          <p class="attorney-title">Senior Partner · Litigation</p>
          <p class="attorney-bar">NY · CA · DC Bar · Harvard Law '74</p>
        </div>
        <div class="attorney-card">
          <div class="attorney-photo" aria-hidden="true">ME</div>
          <h3>Margaret E. Chen</h3>
          <p class="attorney-title">Partner · Corporate &amp; M&amp;A</p>
          <p class="attorney-bar">NY · DE Bar · Columbia Law '89</p>
        </div>
        <div class="attorney-card">
          <div class="attorney-photo" aria-hidden="true">DS</div>
          <h3>David S. Okafor</h3>
          <p class="attorney-title">Partner · Real Estate</p>
          <p class="attorney-bar">NY · NJ Bar · NYU Law '95</p>
        </div>
        <div class="attorney-card">
          <div class="attorney-photo" aria-hidden="true">SR</div>
          <h3>Sofia R. Alvarez</h3>
          <p class="attorney-title">Associate · Employment Law</p>
          <p class="attorney-bar">NY · CT Bar · Georgetown Law '18</p>
        </div>
      </div>
    </div>
  </section>

  <!-- RESULTS -->
  <section class="section" id="results">
    <div class="container">
      <h2 class="section-title">Notable Results</h2>
      <div class="results-list">
        <div class="result-row">
          <span class="result-amount">$47M</span>
          <span class="result-desc">Jury verdict for corporate client in breach-of-fiduciary-duty case against former executives</span>
          <span class="result-year">2024</span>
        </div>
        <div class="result-row">
          <span class="result-amount">$12.5M</span>
          <span class="result-desc">Settlement in wrongful termination class action representing 340 former employees</span>
          <span class="result-year">2023</span>
        </div>
        <div class="result-row">
          <span class="result-amount">$230M</span>
          <span class="result-desc">Closed acquisition of regional manufacturing group across 7 states</span>
          <span class="result-year">2023</span>
        </div>
        <div class="result-row">
          <span class="result-amount">Dismissed</span>
          <span class="result-desc">Patent infringement claims against tech client — all 14 counts dismissed pre-trial</span>
          <span class="result-year">2022</span>
        </div>
      </div>
      <p class="results-disclaimer">Past results do not guarantee similar outcomes. Results depend on the facts and law of each case.</p>
    </div>
  </section>

  <!-- TESTIMONIALS -->
  <section class="section section--warm" id="testimonials">
    <div class="container container--narrow">
      <div class="testimonial">
        <blockquote class="testimonial-quote">"Harmon &amp; Associates handled our acquisition with extraordinary precision. They identified risks we'd never have found and structured a deal that saved us $4M."</blockquote>
        <p class="testimonial-attr">— CFO, Regional Healthcare System</p>
      </div>
      <div class="testimonial">
        <blockquote class="testimonial-quote">"When our company faced a hostile shareholder action, James Harmon's courtroom experience made all the difference. Verdict in our favor."</blockquote>
        <p class="testimonial-attr">— CEO, NYSE-listed manufacturer</p>
      </div>
    </div>
  </section>

  <!-- CONTACT -->
  <section class="section section--dark" id="contact">
    <div class="container contact-layout">
      <div class="contact-info">
        <h2 class="section-title section-title--light">Free Consultation</h2>
        <p class="contact-sub">Our attorneys review every inquiry personally. We typically respond within 4 business hours.</p>
        <div class="office-info">
          <p><strong>New York</strong><br>200 Park Avenue, Suite 4400<br>New York, NY 10166</p>
          <p><strong>Los Angeles</strong><br>2000 Avenue of the Stars, Suite 300<br>Century City, CA 90067</p>
          <p><strong>Phone:</strong> 1-800-555-0100</p>
          <p><strong>Email:</strong> counsel@harmon-law.com</p>
        </div>
      </div>
      <form class="contact-form" id="contact-form" novalidate>
        <div class="form-row">
          <div class="form-group">
            <label for="cf-name">Full Name *</label>
            <input type="text" id="cf-name" required />
          </div>
          <div class="form-group">
            <label for="cf-email">Email *</label>
            <input type="email" id="cf-email" required />
          </div>
        </div>
        <div class="form-group">
          <label for="cf-practice">Practice Area</label>
          <select id="cf-practice">
            <option value="">Select area of need</option>
            <option>Corporate Litigation</option>
            <option>Mergers &amp; Acquisitions</option>
            <option>Real Estate</option>
            <option>Employment Law</option>
            <option>Intellectual Property</option>
            <option>International Law</option>
            <option>Other</option>
          </select>
        </div>
        <div class="form-group">
          <label for="cf-message">Brief description of your matter *</label>
          <textarea id="cf-message" rows="4" required></textarea>
        </div>
        <button type="submit" class="btn-submit">Request Consultation →</button>
        <p class="form-legal">Attorney-client privilege does not attach until an engagement letter is signed. Confidential information should not be shared in this form.</p>
      </form>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="footer">
    <div class="container footer-inner">
      <span class="footer-brand">Harmon &amp; Associates</span>
      <p class="footer-legal">© 2026 Harmon &amp; Associates LLP. All rights reserved. Attorney Advertising.</p>
    </div>
  </footer>

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

Legal / Law Firm

An authoritative, trust-first law firm website. Serif headings, restrained color palette (navy + gold), crisp layout, and copy that communicates confidence without flash.

Sections

Nav — Firm name + est. year, practice areas dropdown, phone number CTA
Hero — Split layout: headline + “Free Consultation” form left, full-height image right
Trust bar — “50 Years of Practice · 2,000+ Cases Won · Martindale Rated AV”
Practice Areas — Clean card grid: Corporate, Litigation, Real Estate, Employment, IP
Attorneys — Profile cards with headshot placeholder, name, speciality, bar admissions
Results — Case outcome highlights with amount won
Testimonials — Text-only quotes, large serif
Contact — Full-width form + office address map placeholder

Design language

Fonts: Playfair Display (headings) + Inter (body)
Colors: #0a1628 navy, #b8963e gold, #f8f7f4 warm white
No animations — professional restraint is the point