Open demo

CSS code

HTML 
<footer class="fnl">
  <div class="news">
    <div>
      <h2>One good email, every Sunday.</h2>
      <p>Design finds, studio notes, and things worth reading — curated by hand, sent once a week.</p>
    </div>
    <div>
      <form data-subscribe>
        <label class="sr-only" for="fnl-email">Email address</label>
        <input id="fnl-email" type="email" name="email" placeholder="[email protected]" autocomplete="email" required>
        <button type="submit">Subscribe</button>
      </form>
      <p class="note">6,200 readers · unsubscribe anytime · no spam, ever</p>
      <p class="sr-only" role="status"></p>
    </div>
  </div>
  <div class="base">
    <p>© The Sunday Print</p>
    <nav aria-label="Footer"><ul><li><a href="#">Archive</a></li><li><a href="#">About</a></li><li><a href="#">Privacy</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Newsletter-first footer: a serif pitch beside a joined email field and button, then a slim link row. */
.fnl{--fnl-text:#27211a;--fnl-muted:#7a6f5d;--fnl-soft:#807462;--fnl-accent:#b45309;--fnl-field:#a08c70;
  background:#fff;border-top:1px solid #ece5d8;color:var(--fnl-text);line-height:normal}
.fnl,.fnl *{box-sizing:border-box}
.fnl h2,.fnl p,.fnl ul,.fnl form{margin:0;padding:0}
.fnl a{text-decoration:none;border-radius:4px}
.fnl a:focus-visible,.fnl button:focus-visible{outline:2px solid var(--fnl-text);outline-offset:2px}
.fnl .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fnl .news{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center;max-width:960px;margin:0 auto;padding:48px 32px;border-bottom:1px dashed #e7ddcc}
.fnl h2{font-family:Georgia,"Times New Roman",serif;font-size:1.7rem;font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.fnl .news p{font-size:.88rem;color:var(--fnl-muted);line-height:1.6}
.fnl form{display:flex}
.fnl input{flex:1;min-width:0;padding:14px 16px;border:1.5px solid var(--fnl-field);border-right:0;border-radius:12px 0 0 12px;
  font:inherit;font-size:.92rem;color:var(--fnl-text);background:#fdfcf9}
.fnl input::placeholder{color:#8a7e6b}
.fnl input:focus{outline:none;border-color:var(--fnl-accent);box-shadow:0 0 0 3px rgba(180,83,9,.25)}
.fnl button{border:0;background:var(--fnl-accent);color:#fff;font:inherit;font-weight:800;font-size:.9rem;padding:0 24px;border-radius:0 12px 12px 0;cursor:pointer;transition:filter .15s}
.fnl button:hover{filter:brightness(1.1)}
.fnl .news .note{font-size:.72rem;color:var(--fnl-soft);margin-top:10px}
.fnl .base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;max-width:960px;margin:0 auto;padding:22px 32px;font-size:.82rem;color:var(--fnl-soft)}
.fnl .base ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px}
.fnl .base a{color:#6e6454;font-weight:600}
.fnl .base a:hover{color:var(--fnl-text)}
@media (max-width:767.98px){.fnl .news{grid-template-columns:1fr;gap:24px;padding:40px 20px}.fnl .base{padding:22px 20px}}
@media (prefers-reduced-motion:reduce){.fnl *{transition:none!important}}
JavaScript 
// Front end only: nothing is sent. Point the form's action at your mailing-list provider, or post it with fetch() here.
document.querySelectorAll('form[data-subscribe]').forEach(function (form) {
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    form.querySelector('button').textContent = '✓ Subscribed';
    form.parentElement.querySelector('[role="status"]').textContent = 'Subscribed. Thanks for signing up.';
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fnl">
  <div class="news">
    <div class="row align-items-center">
      <div class="col-12 col-md-7">
        <h2>One good email, every Sunday.</h2>
        <p>Design finds, studio notes, and things worth reading — curated by hand, sent once a week.</p>
      </div>
      <div class="col-12 col-md-5">
        <form data-subscribe>
          <label class="visually-hidden" for="fnl-email">Email address</label>
          <div class="input-group">
            <input class="form-control" id="fnl-email" type="email" name="email" placeholder="[email protected]" autocomplete="email" required>
            <button class="btn" type="submit">Subscribe</button>
          </div>
        </form>
        <p class="note">6,200 readers · unsubscribe anytime · no spam, ever</p>
        <p class="visually-hidden" role="status"></p>
      </div>
    </div>
  </div>
  <div class="base d-flex flex-wrap align-items-center justify-content-between">
    <p class="mb-0">© The Sunday Print</p>
    <nav aria-label="Footer"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Archive</a></li><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Bootstrap .row for the two halves, an .input-group with .form-control and .btn for the form, a .nav for the links. */
.fnl{--fnl-text:#27211a;--fnl-muted:#7a6f5d;--fnl-soft:#807462;--fnl-accent:#b45309;--fnl-field:#a08c70;
  background:#fff;border-top:1px solid #ece5d8;color:var(--fnl-text);line-height:normal}
.fnl .news{max-width:960px;margin:0 auto;padding:48px 32px;border-bottom:1px dashed #e7ddcc}
.fnl .news>.row{--bs-gutter-x:34px;--bs-gutter-y:24px}
.fnl h2{font-family:Georgia,"Times New Roman",serif;font-size:1.7rem;font-weight:500;letter-spacing:-.01em;line-height:normal;margin-bottom:8px}
.fnl .news p{font-size:.88rem;color:var(--fnl-muted);line-height:1.6;margin:0}
.fnl .form-control{--bs-border-width:1.5px;padding:14px 16px;border-color:var(--fnl-field);border-right:0;border-radius:12px 0 0 12px;font-size:.92rem;color:var(--fnl-text);background:#fdfcf9;line-height:normal}
.fnl .form-control::placeholder{color:#8a7e6b}
.fnl .form-control:focus{border-color:var(--fnl-accent);box-shadow:0 0 0 3px rgba(180,83,9,.25)}
.fnl .btn{--bs-btn-padding-x:24px;--bs-btn-font-size:.9rem;--bs-btn-font-weight:800;--bs-btn-border-width:0;
  --bs-btn-bg:var(--fnl-accent);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--fnl-accent);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--fnl-accent);--bs-btn-active-color:#fff;
  border-radius:0 12px 12px 0!important;transition:filter .15s}
.fnl .btn:hover{filter:brightness(1.1)}
.fnl .news .note{font-size:.72rem;color:var(--fnl-soft);line-height:normal;margin-top:10px}
.fnl .base{gap:10px;max-width:960px;margin:0 auto;padding:22px 32px;font-size:.82rem;color:var(--fnl-soft)}
.fnl .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.82rem;--bs-nav-link-font-weight:600;--bs-nav-link-color:#6e6454;--bs-nav-link-hover-color:var(--fnl-text);gap:8px 20px}
.fnl .nav-link{border-radius:4px}
.fnl a:focus-visible,.fnl .btn:focus-visible{outline:2px solid var(--fnl-text);outline-offset:2px;box-shadow:none}
@media (max-width:767.98px){.fnl .news{padding:40px 20px}.fnl .base{padding:22px 20px}}
@media (prefers-reduced-motion:reduce){.fnl *{transition:none!important}}
JavaScript 
// Front end only: nothing is sent. Point the form's action at your mailing-list provider, or post it with fetch() here.
document.querySelectorAll('form[data-subscribe]').forEach(function (form) {
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    form.querySelector('button').textContent = '✓ Subscribed';
    form.parentElement.querySelector('[role="status"]').textContent = 'Subscribed. Thanks for signing up.';
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t border-[#ece5d8] bg-white leading-[normal] text-[#27211a]">
  <div class="mx-auto grid max-w-[960px] items-center gap-6 border-b border-dashed border-[#e7ddcc] px-5 py-10 md:grid-cols-[1.2fr_1fr] md:gap-[34px] md:px-8 md:py-12">
    <div>
      <h2 class="mb-2 font-[Georgia,'Times_New_Roman',serif] text-[1.7rem] font-medium tracking-[-.01em]">One good email, every Sunday.</h2>
      <p class="text-[.88rem] leading-[1.6] text-[#7a6f5d]">Design finds, studio notes, and things worth reading — curated by hand, sent once a week.</p>
    </div>
    <div>
      <form class="flex" data-subscribe>
        <label class="sr-only" for="fnl-email">Email address</label>
        <input class="min-w-0 flex-1 rounded-l-xl border-[1.5px] border-r-0 border-[#a08c70] bg-[#fdfcf9] px-4 py-3.5 text-[.92rem] text-[#27211a] placeholder:text-[#8a7e6b] focus:border-[#b45309] focus:shadow-[0_0_0_3px_rgba(180,83,9,.25)] focus:outline-none" id="fnl-email" type="email" name="email" placeholder="[email protected]" autocomplete="email" required>
        <button class="cursor-pointer rounded-r-xl bg-[#b45309] px-6 text-[.9rem] font-extrabold text-white transition-[filter] duration-150 hover:brightness-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#27211a] motion-reduce:transition-none" type="submit">Subscribe</button>
      </form>
      <p class="mt-2.5 text-[.72rem] text-[#807462]">6,200 readers · unsubscribe anytime · no spam, ever</p>
      <p class="sr-only" role="status"></p>
    </div>
  </div>
  <div class="mx-auto flex max-w-[960px] flex-wrap items-center justify-between gap-2.5 px-5 py-[22px] text-[.82rem] text-[#807462] md:px-8">
    <p>© The Sunday Print</p>
    <nav aria-label="Footer"><ul class="flex flex-wrap gap-x-5 gap-y-2 [&_a]:rounded [&_a]:font-semibold [&_a]:text-[#6e6454] [&_a:hover]:text-[#27211a] [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[#27211a]"><li><a href="#">Archive</a></li><li><a href="#">About</a></li><li><a href="#">Privacy</a></li></ul></nav>
  </div>
</footer>
JavaScript 
// Front end only: nothing is sent. Point the form's action at your mailing-list provider, or post it with fetch() here.
document.querySelectorAll('form[data-subscribe]').forEach(function (form) {
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    form.querySelector('button').textContent = '✓ Subscribed';
    form.parentElement.querySelector('[role="status"]').textContent = 'Subscribed. Thanks for signing up.';
  });
});

About this set

A newsletter-first footer in warm paper tones. The top band pairs a serif headline, One good email, every Sunday., and a short description with an email field joined to an amber Subscribe button, plus a small line of reassurance underneath. A dashed divider separates it from a slim bottom row with the publication name and three links. On screens under 768px the pitch and the form stack, and the field shrinks rather than pushing the button off screen. The form uses a real email input with a visually hidden label, autocomplete set to email and native required validation, so browsers can autofill it and reject malformed addresses before anything runs. A few lines of JavaScript stop the demo from submitting, change the button to Subscribed and announce the result through a status region; nothing is sent, so point the form action at your mailing-list provider or post it with fetch. Use it on blogs, publications and studio sites where the newsletter is the main call to action. The Bootstrap version uses a .row, an .input-group with .form-control and .btn, and a .nav.

What’s included

  • Email field and button joined into one control
  • Visually hidden label, autocomplete="email" and native validation
  • Polite status message after signing up
  • Stacks into one column below 768px
  • Front end only, ready to point at any mailing-list provider

Accessibility

The email field has a visually hidden label, Email address, and autocomplete="email"; the confirmation is announced through a role="status" region. The field draws an amber border and ring on focus, and the button and links show a dark 2px outline. The field border was darkened to reach 3:1, all small text reaches 4.5:1, and the button hover transition is off under prefers-reduced-motion.

Customise it

Change --fnl-accent, --fnl-field, --fnl-muted and --fnl-soft on .fnl in the plain CSS and Bootstrap versions; Bootstrap also reads --bs-btn-bg there. In Tailwind edit bg-[#b45309], border-[#a08c70] and the grey text utilities.