Open demo

CSS code

HTML 
<footer class="fb">
  <div class="fb-in">
    <div class="fb-top">
      <div class="fb-brand"><b>Northwind</b><p>Boards, reviews and release notes. No nonsense.</p></div>
      <a class="fb-cta" href="#">Start free <span aria-hidden="true">→</span></a>
    </div>
    <nav class="fb-cols" aria-label="Footer">
      <div class="fb-col"><h2>Product</h2><ul><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
      <div class="fb-col"><h2>Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
      <div class="fb-col"><h2>Resources</h2><ul><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
    </nav>
    <div class="fb-base">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Neobrutalist footer: flat yellow, 3–4px black borders and solid offset shadows with no blur. */
.fb{background:#ffd93d;border-top:4px solid #111;color:#111;padding:38px 30px 24px}
.fb,.fb *{box-sizing:border-box}
:where(.fb) a{color:inherit;text-decoration:none}
:where(.fb) ul{list-style:none;margin:0;padding:0}
:where(.fb) :is(p,h2){margin:0}
.fb a:focus-visible{outline:3px solid #111;outline-offset:3px}
.fb-in{max-width:1020px;margin:0 auto}
.fb-top{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.fb-brand b{display:block;font-size:1.7rem;font-weight:900;letter-spacing:-.04em;text-transform:uppercase}
.fb-brand p{font-size:.88rem;font-weight:600;margin-top:8px;max-width:32ch;line-height:1.55}
.fb .fb-cta{display:inline-block;background:#111;color:#ffd93d;border:3px solid #111;padding:13px 24px;
  font-size:.92rem;font-weight:900;text-transform:uppercase;box-shadow:5px 5px 0 #fff;transition:transform .1s,box-shadow .1s}
.fb .fb-cta:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #fff}
.fb-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.fb-col{background:#fff;border:3px solid #111;padding:16px;box-shadow:5px 5px 0 #111}
.fb h2{font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px}
.fb-col ul{display:flex;flex-direction:column;gap:8px;font-size:.86rem;font-weight:600}
.fb-col a:hover,.fb-base a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.fb-base{margin-top:28px;padding-top:16px;border-top:3px solid #111;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:.8rem;font-weight:700;text-transform:uppercase}
.fb-base ul{display:flex;gap:16px}
@media (max-width:680px){.fb-cols{grid-template-columns:1fr}}
@media (max-width:560px){.fb{padding:34px 20px 24px}}
@media (prefers-reduced-motion:reduce){.fb .fb-cta{transition:none}.fb .fb-cta:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fb">
  <div class="fb-in">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-4">
      <div class="fb-brand"><b>Northwind</b><p class="mt-2 mb-0">Boards, reviews and release notes. No nonsense.</p></div>
      <a class="btn fb-cta" href="#">Start free <span aria-hidden="true">→</span></a>
    </div>
    <nav class="mt-4 pt-2" aria-label="Footer">
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col"><div class="card h-100"><div class="card-body"><h2>Product</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Overview</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Changelog</a></li></ul></div></div></div>
        <div class="col"><div class="card h-100"><div class="card-body"><h2>Company</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul></div></div></div>
        <div class="col"><div class="card h-100"><div class="card-body"><h2>Resources</h2><ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">Status</a></li><li class="nav-item"><a class="nav-link" href="#">Support</a></li></ul></div></div></div>
      </div>
    </nav>
    <div class="fb-base d-flex flex-wrap justify-content-between gap-3 mt-4 pt-3">
      <p class="mb-0">© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>
CSS 
/* Bootstrap .btn, .card and .nav.flex-column with the radius set to 0, 3px black borders and
   solid offset shadows. */
.fb{background:#ffd93d;border-top:4px solid #111;color:#111;padding:38px 30px 24px}
.fb a{text-decoration:none}
.fb a:focus-visible{outline:3px solid #111;outline-offset:3px}
.fb-in{max-width:1020px;margin:0 auto}
.fb-brand b{display:block;font-size:1.7rem;font-weight:900;letter-spacing:-.04em;text-transform:uppercase}
.fb-brand p{font-size:.88rem;font-weight:600;max-width:32ch;line-height:1.55}
.fb-cta{--bs-btn-bg:#111;--bs-btn-color:#ffd93d;--bs-btn-border-color:#111;--bs-btn-border-width:3px;--bs-btn-border-radius:0;
  --bs-btn-hover-bg:#111;--bs-btn-hover-color:#ffd93d;--bs-btn-hover-border-color:#111;--bs-btn-active-bg:#111;
  --bs-btn-active-color:#ffd93d;--bs-btn-active-border-color:#111;--bs-btn-padding-x:24px;--bs-btn-padding-y:13px;
  --bs-btn-font-size:.92rem;--bs-btn-font-weight:900;--bs-btn-line-height:normal;text-transform:uppercase;
  box-shadow:5px 5px 0 #fff;transition:transform .1s,box-shadow .1s}
.fb-cta:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #fff}
.fb-cta:focus-visible{box-shadow:5px 5px 0 #fff}
.fb .card{--bs-card-border-width:3px;--bs-card-border-color:#111;--bs-card-border-radius:0;--bs-card-inner-border-radius:0;
  --bs-card-spacer-x:16px;--bs-card-spacer-y:16px;--bs-card-color:#111;box-shadow:5px 5px 0 #111}
.fb h2{font-size:.76rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px;line-height:normal}
.fb .nav{--bs-nav-link-color:#111;--bs-nav-link-hover-color:#111;--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;
  --bs-nav-link-font-size:.86rem;--bs-nav-link-font-weight:600;gap:8px}
.fb .nav-link:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.fb-base{border-top:3px solid #111;font-size:.8rem;font-weight:700;text-transform:uppercase}
.fb-base .nav{--bs-nav-link-font-size:.8rem;--bs-nav-link-font-weight:700;gap:16px}
@media (max-width:575.98px){.fb{padding:34px 20px 24px}}
@media (prefers-reduced-motion:reduce){.fb-cta{transition:none}.fb-cta:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="border-t-4 border-[#111] bg-[#ffd93d] px-5 pt-[34px] pb-6 text-[#111] min-[561px]:px-[30px] min-[561px]:pt-[38px]">
  <div class="mx-auto max-w-[1020px]">
    <div class="flex flex-wrap items-start justify-between gap-[26px]">
      <div><b class="block text-[1.7rem] font-black tracking-[-.04em] uppercase">Northwind</b><p class="mt-2 max-w-[32ch] text-[.88rem] leading-[1.55] font-semibold">Boards, reviews and release notes. No nonsense.</p></div>
      <a class="inline-block border-3 border-[#111] bg-[#111] px-6 py-[13px] text-[.92rem] font-black text-[#ffd93d] uppercase shadow-[5px_5px_0_#fff] transition-[transform,box-shadow] duration-100 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-[3px_3px_0_#fff] focus-visible:outline-3 focus-visible:outline-offset-[3px] focus-visible:outline-[#111] motion-reduce:transition-none motion-reduce:hover:translate-0" href="#">Start free <span aria-hidden="true">→</span></a>
    </div>
    <nav class="mt-8 grid grid-cols-1 gap-[22px] min-[681px]:grid-cols-3 [&_a]:hover:underline [&_a]:hover:decoration-2 [&_a]:hover:underline-offset-[3px] [&_a]:focus-visible:outline-3 [&_a]:focus-visible:outline-offset-[3px] [&_a]:focus-visible:outline-[#111]" aria-label="Footer">
      <div class="border-3 border-[#111] bg-white p-4 shadow-[5px_5px_0_#111]"><h2 class="mb-[11px] text-[.76rem] font-black tracking-[.08em] uppercase">Product</h2><ul class="flex flex-col gap-2 text-[.86rem] font-semibold"><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul></div>
      <div class="border-3 border-[#111] bg-white p-4 shadow-[5px_5px_0_#111]"><h2 class="mb-[11px] text-[.76rem] font-black tracking-[.08em] uppercase">Company</h2><ul class="flex flex-col gap-2 text-[.86rem] font-semibold"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></div>
      <div class="border-3 border-[#111] bg-white p-4 shadow-[5px_5px_0_#111]"><h2 class="mb-[11px] text-[.76rem] font-black tracking-[.08em] uppercase">Resources</h2><ul class="flex flex-col gap-2 text-[.86rem] font-semibold"><li><a href="#">Docs</a></li><li><a href="#">Status</a></li><li><a href="#">Support</a></li></ul></div>
    </nav>
    <div class="mt-7 flex flex-wrap justify-between gap-3.5 border-t-3 border-[#111] pt-4 text-[.8rem] font-bold uppercase">
      <p>© Northwind Ltd.</p>
      <nav aria-label="Legal"><ul class="flex gap-4 [&_a]:hover:underline [&_a]:hover:decoration-2 [&_a]:hover:underline-offset-[3px] [&_a]:focus-visible:outline-3 [&_a]:focus-visible:outline-offset-[3px] [&_a]:focus-visible:outline-[#111]"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul></nav>
    </div>
  </div>
</footer>

About this set

A loud yellow footer in the neobrutalist style: thick black borders, square corners and solid offset shadows with no blur anywhere. The top row sets the brand in heavy uppercase beside a black call-to-action button with a white offset shadow; on hover the button shifts two pixels down and right and its shadow shrinks, so it looks pressed. Below, the three link columns (Product, Company, Resources) are white boxes with a 3px border and a 5px black shadow, and a legal bar sits under a 3px rule. Use it on a playful product, an indie tool or a portfolio where the rest of the site already uses flat colour and hard shadows. The uppercase styling comes from text-transform, so the source text stays in normal case and screen readers read words rather than spelling out capitals. The link boxes stack into one column on phones. In the Bootstrap version the button is a .btn and the boxes are .card elements with their radius set to zero through Bootstrap variables.

What’s included

  • Solid offset shadows and 3px borders, no blur or rounded corners
  • Call-to-action link that presses in on hover
  • Uppercase set with text-transform, source text in normal case
  • Press effect disabled under prefers-reduced-motion
  • Bootstrap version built from .btn and .card with --bs-*-border-radius set to 0

Accessibility

Link columns sit in a nav labelled Footer under h2 headings, and the legal links in a nav labelled Legal. The arrow in the button is aria-hidden, so its name is Start free. Keyboard focus draws a 3px black outline offset by 3px, and black on yellow reaches 13.7:1. The hover movement is removed under prefers-reduced-motion.

Customise it

Change #ffd93d (background) and #111 (ink, borders and shadows) in the .fb rules, and the 5px 5px shadow offsets. In Bootstrap the button colours are --bs-btn-* on .fb-cta and the box borders --bs-card-* on .fb .card; in Tailwind edit bg-[#ffd93d], border-3 and shadow-[5px_5px_0_#111].