Footer met laatste oproep New

CTA and footer in one block: big question, call button and mail button (with copy-address button), then compact footer links. For sites where every lead counts, like estate agents and advisers.

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.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Footer met laatste oproep · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="flk" role="contentinfo">
  <div class="flk__cta">
    <span class="flk__eyebrow">Gratis waardebepaling · Amstelveen en Amsterdam-Zuid</span>
    <p class="flk__q"><span>Wat is uw huis</span> <span>nu <em>echt</em> waard?</span></p>
    <p class="flk__sub">Een makelaar komt langs, en binnen 5 werkdagen heeft u een onderbouwd rapport met recente verkopen in uw straat.</p>
    <div class="flk__acts">
      <a href="tel:+31201234567" class="flk__call"><span class="flk__ico" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.6a1 1 0 0 1-.25 1z" fill="currentColor"/></svg></span><span><small>Bel direct</small>020 123 4567</span></a>
      <div class="flk__mail"><a href="mailto:verkoop@voorbeeld.nl" class="flk__mailbtn"><small>Of mail</small>verkoop@voorbeeld.nl</a><button type="button" class="flk__copy" aria-label="E-mailadres kopiëren">Kopieer</button></div>
    </div>
    <p class="flk__avail"><span class="flk__dot" aria-hidden="true"></span>Vandaag bereikbaar tot 20:00, ook op zaterdag</p>
  </div>
  <div class="flk__foot">
    <a href="#" class="flk__logo">Brouwer<span>makelaardij</span></a>
    <ul class="flk__links"><li><a href="#">Aanbod</a></li><li><a href="#">Verkopen</a></li><li><a href="#">Aankoop</a></li><li><a href="#">Taxaties</a></li><li><a href="#">Over ons</a></li></ul>
    <p class="flk__legal">NVM-lid · KvK 87654321 · <a href="#">Privacy</a> · © 2026</p>
  </div>
</div>
</div>

/* Footer met laatste oproep · NedDev · eigen werk. */
.flk{position:relative;width:100%;align-self:flex-start;flex:none;min-height:480px;background:#13213c;color:#f7f2ea;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column}
.flk *{box-sizing:border-box}
.flk__cta{flex:1;padding:56px 44px 44px;background:radial-gradient(circle at 92% 0%,rgba(255,106,77,.22),transparent 40%)}
.flk__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ff8a70}
.flk__q{font-size:clamp(38px,6.4vw,84px);font-weight:900;line-height:.95;letter-spacing:-.04em;margin:16px 0 18px}
.flk__q>span{display:inline-block;transform:translateY(30%);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
.flk__q>span+span{transition-delay:.12s}
.flk.is-in .flk__q>span{transform:none;opacity:1}
.flk__q em{font-style:normal;color:#ff6a4d;position:relative}
.flk__sub{font-size:17px;line-height:1.5;color:rgba(247,242,234,.72);max-width:54ch;margin:0 0 28px}
.flk__acts{display:flex;flex-wrap:wrap;gap:12px}
.flk__call{display:flex;align-items:center;gap:14px;background:#ff6a4d;color:#13213c;text-decoration:none;font-weight:800;font-size:22px;padding:14px 26px 14px 14px;border-radius:999px;transition:transform .2s ease,background .2s ease;font-variant-numeric:tabular-nums}
.flk__call:hover,.flk__call:focus-visible{background:#ff8166;transform:translateY(-2px)}
.flk__call small,.flk__mailbtn small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.flk__ico{width:46px;height:46px;border-radius:50%;background:#13213c;color:#ff6a4d;display:grid;place-items:center;flex:none}
.flk__ico svg{width:20px;height:20px}
.flk__mail{display:flex;align-items:stretch;border:1.5px solid rgba(247,242,234,.35);border-radius:999px;overflow:hidden}
.flk__mailbtn{display:flex;flex-direction:column;justify-content:center;color:#f7f2ea;text-decoration:none;font-weight:700;font-size:17px;padding:10px 20px 10px 24px}
.flk__mailbtn:hover{background:rgba(247,242,234,.08)}
.flk__copy{font:600 13px 'Switzer',sans-serif;color:#f7f2ea;background:transparent;border:0;border-left:1.5px solid rgba(247,242,234,.35);padding:0 18px;cursor:pointer;min-width:96px}
.flk__copy:hover{background:rgba(247,242,234,.08)}
.flk__copy.is-done{background:#f7f2ea;color:#13213c}
.flk__avail{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(247,242,234,.65);margin:18px 0 0}
.flk__dot{width:8px;height:8px;border-radius:50%;background:#7bd88f}
.flk__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:18px 44px;border-top:1px solid rgba(247,242,234,.14);font-size:13px}
.flk__logo{font-weight:800;font-size:17px;color:#f7f2ea;text-decoration:none;display:flex;align-items:baseline;gap:6px}
.flk__logo span{font-weight:400;color:#ff8a70}
.flk__links{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0}
.flk__links a,.flk__legal a{color:rgba(247,242,234,.8);text-decoration:none}
.flk__links a:hover,.flk__legal a:hover{color:#ff8a70}
.flk__legal{margin:0 0 0 auto;color:rgba(247,242,234,.55)}
@media(max-width:700px){
.flk__cta{padding:34px 18px 28px}
.flk__acts{flex-direction:column}
.flk__call{font-size:20px}
.flk__mail{border-radius:6px}
.flk__mailbtn{flex:1;font-size:15px;padding:10px 14px;min-width:0;word-break:break-all}
.flk__copy{min-width:80px;padding:0 12px}
.flk__foot{padding:16px 18px}
.flk__legal{margin:0}}
@media(prefers-reduced-motion:reduce){.flk__q>span{transform:none;opacity:1;transition:none}.flk__call{transition:none}}

// Footer met laatste oproep · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.flk');if(!w)return;
if(matchMedia('(prefers-reduced-motion: reduce)').matches||!('IntersectionObserver' in window))w.classList.add('is-in');
else{var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){w.classList.add('is-in');io.disconnect();}});},{threshold:.25});io.observe(w);}
var c=w.querySelector('.flk__copy');
c.addEventListener('click',function(){
  function done(ok){c.textContent=ok?'Gekopieerd':'Lukt niet';c.classList.toggle('is-done',ok);setTimeout(function(){c.textContent='Kopieer';c.classList.remove('is-done');},1800);}
  try{navigator.clipboard.writeText('verkoop@voorbeeld.nl').then(function(){done(true);},function(){done(false);});}catch(e){done(false);}
});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));

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 →