Components

Footer

The full site footer — a five-column grid of brand copy, link lists, contact address and a newsletter signup, plus a bottom legal bar.

Markup

<footer class="on-dark" id="foot">
  <div class="fgrid">
    <div class="brand">
      <span class="logo">Ironhouse<em>.</em></span>
      <p>Second-generation mechanical contractors…</p>
    </div>
    <div>
      <p class="fhead">TRADES</p>
      <ul><li><a href="services.html#t-plumbing">Plumbing</a></li></ul>
    </div>
    <div>
      <p class="fhead">CONTACT</p>
      <address>
        214 FOUNDRY ROW, WINSLOW, OH<br>
        <a href="tel:+12165550181">(216) 555-0181</a> &mdash; NIGHT LINE 24/7
      </address>
    </div>
    <div class="news">
      <p class="fhead">THE CHECKLIST</p>
      <p>One email per season…</p>
      <form class="newsform" novalidate>
        <label class="visually-hidden" for="f-news">Email address</label>
        <input type="email" id="f-news" name="email" placeholder="you@example.com">
        <button class="btn" type="submit">Send me the checklist</button>
      </form>
      <span class="done" role="status" aria-live="polite">Done. The next one lands October 1.</span>
    </div>
  </div>
  <div class="botbar">
    <span>&copy; 2026 IRONHOUSE MECHANICAL CO.</span>
    <span><a href="privacy.html">PRIVACY</a> / <a href="terms.html">TERMS</a></span>
  </div>
</footer>

Five-column grid

.fgrid lays out brand copy, two link-list columns, a contact <address>, and the newsletter block across five unequal-width columns, collapsing responsively at narrower widths (see Responsive). Every long value (a full email address, a long link label) gets overflow-wrap: anywhere so it wraps cleanly instead of overflowing its column.

Promo variant

Add .promo alongside .news to use the same newsletter block as a full paper-skinned section rather than a footer column — used on the blog index page as a standalone checklist-signup band partway down the page.

Bottom legal bar

.botbar is the thin closing row of copyright, license/insurance facts, coordinates and legal page links — a wrapped flex row with generous gaps so it degrades cleanly to multiple lines on narrow screens.

Javascript

The newsletter form uses the same submit-intercept-then-swap pattern as the Closer Form (without the phone validation): submitting adds .form-done to the parent .news element, which hides the form and paragraph and reveals the .done confirmation line. As with the quote form, wiring the <form> to a real email-capture service is required before this actually sends anything — see FAQ.