Footer: kolommen en groot woordmerk
Dark footer with link columns, status row and giant NedDev wordmark at the bottom.
How to use it
- Paste the HTML where the page sections should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Footer: kolommen en groot woordmerk · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="ftr">
<div class="ftr__inner">
<div class="ftr__cols">
<div class="ftr__brand">
<span class="ftr__logo">NedDev<span>®</span></span>
<p class="ftr__tag">Digitale ankers voor merken die niet mogen verliezen.</p>
<span class="ftr__status"><i></i> Alle systemen operationeel</span>
</div>
<div class="ftr__nav"><h4>Diensten</h4><a href="#">Strategie & SEO</a><a href="#">Webdesign</a><a href="#">Engineering</a><a href="#">SaaS-platformen</a></div>
<div class="ftr__nav"><h4>Bureau</h4><a href="#">Werk</a><a href="#">Over ons</a><a href="#">Aanpak</a><a href="#">Contact</a></div>
<div class="ftr__nav"><h4>Contact</h4><a href="mailto:hallo@neddev.com">hallo@neddev.com</a><a href="#">+31 6 00 00 00 00</a><a href="#">Nederland</a></div>
</div>
</div>
<div class="ftr__wordmark" aria-hidden="true">NEDDEV</div>
<div class="ftr__bar"><span>© 2026 NedDev. Alle rechten voorbehouden.</span><span class="ftr__legal"><a href="#">Privacy</a><a href="#">Voorwaarden</a></span></div>
</section>
</div>/* Footer: kolommen en groot woordmerk · NedDev · eigen werk. */
.ftr{overflow:hidden;width:100%;box-sizing:border-box;background:#0a0a0a;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.ftr__inner{max-width:900px;margin:0 auto;padding:48px 28px 24px;width:100%;box-sizing:border-box}
.ftr__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.ftr__logo{font-family:'Boldonse',sans-serif;font-weight:400;font-size:26px;letter-spacing:-.02em}
.ftr__logo span{color:#F5480F;font-size:14px;vertical-align:super}
.ftr__tag{font-family:'Switzer',sans-serif;font-size:14px;line-height:1.5;color:rgba(255,255,255,.6);margin:14px 0 16px;max-width:30ch}
.ftr__status{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.7);display:inline-flex;align-items:center;gap:8px}
.ftr__status i{width:8px;height:8px;border-radius:50%;background:#7CFC9A;box-shadow:0 0 0 0 rgba(124,252,154,.5);animation:ftr-pulse 2s infinite}
@keyframes ftr-pulse{0%{box-shadow:0 0 0 0 rgba(124,252,154,.5)}70%{box-shadow:0 0 0 7px rgba(124,252,154,0)}100%{box-shadow:0 0 0 0 rgba(124,252,154,0)}}
.ftr__nav h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:#F5480F;text-transform:uppercase;margin:0 0 14px}
.ftr__nav a{display:block;font-family:'Switzer',sans-serif;font-size:14px;color:rgba(255,255,255,.7);text-decoration:none;padding:5px 0;transition:color .2s,padding-left .2s}
.ftr__nav a:hover{color:#fff;padding-left:5px}
.ftr__wordmark{font-family:'Boldonse',sans-serif;font-weight:400;font-size:clamp(60px,17vw,180px);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);text-stroke:1px rgba(255,255,255,.16);text-align:center;padding:10px 0 0;user-select:none;white-space:nowrap;overflow:hidden}
.ftr__bar{max-width:900px;margin:0 auto;width:100%;box-sizing:border-box;padding:18px 28px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.12);font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.5)}
.ftr__legal a{color:rgba(255,255,255,.5);text-decoration:none;margin-left:16px}
.ftr__legal a:hover{color:#F5480F}
@media(prefers-reduced-motion:reduce){.ftr__status i{animation:none}}
@media(max-width:720px){.ftr__cols{grid-template-columns:1fr 1fr;gap:24px}.ftr__brand{grid-column:1/-1}}More page sections
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →