Footer: link columns

What you receive in Webflow

• 21 native elements and 8 classes.
• Breakpoints: mobile landscape (767px).
• States: hover.
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<footer class="foot1">
  <div class="foot1-inner">
    <div class="foot1-brand"><a href="#" class="foot1-logo">Acme</a><p class="foot1-text">Build beautiful websites, faster.</p></div>
    <div class="foot1-col"><h4 class="foot1-head">Product</h4><a href="#" class="foot1-link">Features</a><a href="#" class="foot1-link">Pricing</a><a href="#" class="foot1-link">Changelog</a></div>
    <div class="foot1-col"><h4 class="foot1-head">Company</h4><a href="#" class="foot1-link">About</a><a href="#" class="foot1-link">Careers</a><a href="#" class="foot1-link">Blog</a></div>
    <div class="foot1-col"><h4 class="foot1-head">Legal</h4><a href="#" class="foot1-link">Privacy</a><a href="#" class="foot1-link">Terms</a><a href="#" class="foot1-link">Cookies</a></div>
  </div>
  <div class="foot1-bottom">© 2026 Acme Ltd. All rights reserved.</div>
</footer>
<style>
.foot1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#0b1020; color:#aab2d5; padding:64px 24px 32px; }
.foot1-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.foot1-logo { font-size:22px; font-weight:700; color:#fff; text-decoration:none; }
.foot1-text { font-size:15px; margin:12px 0 0; }
.foot1-col { display:flex; flex-direction:column; gap:10px; }
.foot1-head { color:#fff; font-size:14px; margin:0 0 6px; }
.foot1-link { color:#aab2d5; text-decoration:none; font-size:15px; }
.foot1-link:hover { color:#fff; }
.foot1-bottom { max-width:1200px; margin:48px auto 0; padding-top:24px; border-top:1px solid #1f2747; font-size:14px; }
@media (max-width:767px) { .foot1-inner { grid-template-columns:1fr 1fr; } }
</style>