Neo-Brutalist Footer – CSS Snippet

Go back

<footer class="footer">

  <div class="footer-container">

    <!-- Brand -->
    <div class="footer-brand">
      <div class="brand-title">
        <div class="brand-icon">⚡</div>
        <span>POP<span class="pink">BLAST</span></span>
      </div>

      <p>
        NO BORING WEB DESIGNS ALLOWED. WE BUILD LOUD,
        UNAPOLOGETIC DIGITAL EXPERIENCES.
      </p>
    </div>


    <!-- Links -->
    <div class="footer-links">

      <div class="link-box">
        <h4 class="pink">DROP-IN</h4>

        <ul>
          <li><a href="#">Manifesto</a></li>
          <li><a href="#">Merch Drop</a></li>
        </ul>
      </div>


      <div class="link-box">
        <h4 class="indigo">CONNECT</h4>

        <ul>
          <li><a href="#">Discord</a></li>
          <li><a href="#">Twitter/X</a></li>
        </ul>
      </div>

    </div>


    <!-- Newsletter -->
    <div class="newsletter">

      <h4>>> GET THE ZINE</h4>

      <form>
        <input
          type="email"
          placeholder="YOUR EMAIL..."
        >

        <button type="submit">
          JOIN CREW
        </button>
      </form>

    </div>

  </div>


  <!-- Bottom -->
  <div class="footer-bottom">

    <p>© 2026 POPBLAST STUDIOS.</p>

    <p>DESIGN: MAXIMUM IMPACT</p>

  </div>

</footer>