Van Keulen Hypotheken · hypotheekadvies, Amersfoort New

Complete homepage for an independent mortgage adviser: a headline with no image above the fold, then a calculator that uses income, partner, student debt and savings to show what you can borrow and what it costs per month. Situations in a sideways strip, one fixed fee, the two advisers, clickable reviews and a call-back form with a checklist for the first meeting.

View full screen ↗

How to use it

Paste the HTML where the complete websites 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.

<!-- Van Keulen Hypotheken · hypotheekadvies, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="vkh">
<div class="vkh__top"><div class="vkh__in vkh__top-in">
  <p>Rente vandaag, 10 jaar vast met NHG: vanaf 3,62 procent.</p>
  <p class="vkh__top-r">Maandag tot vrijdag tot 20:00, <a href="tel:+31331234567">033 123 4567</a></p>
</div></div>

<div class="vkh__head" role="banner"><div class="vkh__in vkh__head-in">
  <a href="#" class="vkh__logo" aria-label="Van Keulen Hypotheken, naar home">Van Keulen<span>hypotheken</span></a>
  <nav class="vkh__nav" aria-label="Hoofdmenu">
    <a href="#vkh-reken">Rekenhulp</a><a href="#vkh-wie">Eerste huis</a><a href="#vkh-wie">Oversluiten</a><a href="#vkh-tarief">Tarief</a><a href="#vkh-over">Over ons</a><a href="#vkh-afspraak">Contact</a>
  </nav>
  <a href="#vkh-afspraak" class="vkh__knop vkh__knop--kop">Plan een gesprek</a>
  <button class="vkh__menu-knop" type="button" aria-expanded="false" aria-controls="vkh-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="vkh__menu" id="vkh-menu" hidden>
  <a href="#vkh-reken">Rekenhulp</a><a href="#vkh-wie">Eerste huis</a><a href="#vkh-wie">Oversluiten</a><a href="#vkh-tarief">Tarief</a><a href="#vkh-over">Over ons</a><a href="#vkh-afspraak">Contact</a>
</div>
</div>

<div class="vkh__in vkh__hero">
  <h1 class="vkh__h1">Eerst rekenen, dan pas kijken.</h1>
  <div class="vkh__hero-onder">
    <p class="vkh__lead">Onafhankelijk hypotheekadvies in Amersfoort. We vergelijken 34 geldverstrekkers en rekenen met uw echte cijfers, voor één vaste prijs die u vooraf kent.</p>
    <a href="#vkh-afspraak" class="vkh__knop">Plan het eerste gesprek</a>
  </div>
</div>
<div class="vkh__in"><img class="vkh__breed" src="https://neddev.com/lab-media/site-hypotheekadviseur-1.webp" alt="Rij bakstenen rijtjeshuizen in Amersfoort in de herfstzon" width="1408" height="768"></div>

<div class="vkh__in vkh__reken" id="vkh-reken">
  <form class="vkh__invoer" novalidate>
    <h2 class="vkh__h2">Wat kunt u lenen?</h2>
    <label class="vkh__schuif">Uw bruto jaarinkomen <output name="o1">€ 52.000</output><input type="range" name="ink1" min="20000" max="150000" step="1000" value="52000"></label>
    <label class="vkh__schuif">Inkomen van uw partner <output name="o2">€ 38.000</output><input type="range" name="ink2" min="0" max="150000" step="1000" value="38000"></label>
    <label class="vkh__schuif">Studieschuld, samen <output name="o3">€ 12.000</output><input type="range" name="stud" min="0" max="80000" step="1000" value="12000"></label>
    <label class="vkh__schuif">Eigen geld <output name="o4">€ 25.000</output><input type="range" name="eigen" min="0" max="150000" step="1000" value="25000"></label>
    <fieldset class="vkh__rente"><legend>Rentevaste periode</legend>
      <label><input type="radio" name="rente" value="3.62" checked><span>10 jaar, 3,62%</span></label>
      <label><input type="radio" name="rente" value="3.89"><span>20 jaar, 3,89%</span></label>
      <label><input type="radio" name="rente" value="4.07"><span>30 jaar, 4,07%</span></label>
    </fieldset>
    <label class="vkh__vink"><input type="checkbox" name="starter" checked> Ik ben jonger dan 35 en koop mijn eerste huis</label>
  </form>
  <div class="vkh__uitkomst" aria-live="polite">
    <p class="vkh__uit-kop">U kunt ongeveer lenen</p>
    <p class="vkh__getal">€ 0</p>
    <div class="vkh__balk" aria-hidden="true"><span class="vkh__balk-l"></span><span class="vkh__balk-e"></span><span class="vkh__balk-k"></span></div>
    <p class="vkh__zin"></p>
    <p class="vkh__klein">Een indicatie volgens de leennormen van 2026. Een autolening, pensioengat of tijdelijk contract kan het bedrag verlagen; dat rekenen we in het gesprek precies uit.</p>
    <a href="#vkh-afspraak" class="vkh__knop">Bespreek uw cijfers</a>
  </div>
</div>

<div class="vkh__wie" id="vkh-wie">
  <div class="vkh__in vkh__wie-kop"><h2 class="vkh__h2">Waar u ook staat</h2><p>Schuif door de situaties waarin mensen bij ons komen. Bij elke situatie hoort een ander gesprek.</p></div>
  <div class="vkh__strook" tabindex="0" aria-label="Situaties, zijwaarts te schuiven">
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-3.webp" alt="Jong stel kijkt naar een bakstenen huis aan het water" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Uw eerste huis</h3><p>Geen overdrachtsbelasting tot € 525.000 en vaak een starterslening van de gemeente erbij.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-8.webp" alt="Nieuwbouwwoningen in aanbouw met steigers" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Nieuwbouw</h3><p>Bouwdepot, dubbele lasten tijdens de bouw en de rente die u vastzet bij tekenen.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-10.webp" alt="Lege woonkamer met verhuisdozen en een trap" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Verhuizen</h3><p>Uw oude rente meenemen of niet, en wat als het oude huis later verkocht wordt.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-9.webp" alt="Ouder stel op de bank met papieren" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Oversluiten na uw 55e</h3><p>Lagere lasten, aflossingsvrij verlengen of de overwaarde gebruiken voor de kinderen.</p></figcaption></figure>
    <figure><img src="https://neddev.com/lab-media/site-hypotheekadviseur-11.webp" alt="Zonnepanelen op een pannendak" width="900" height="491" loading="lazy"><figcaption><h3 class="vkh__h3">Verduurzamen</h3><p>Tot € 10.000 extra lenen voor isolatie of een warmtepomp, met rentekorting.</p></figcaption></figure>
  </div>
</div>

<div class="vkh__in vkh__tarief" id="vkh-tarief">
  <img src="https://neddev.com/lab-media/site-hypotheekadviseur-12.webp" alt="Hand die met een vulpen een document tekent" width="900" height="491" loading="lazy">
  <div class="vkh__tarief-tx">
    <h2 class="vkh__h2">Eén prijs, vooraf bekend</h2>
    <p class="vkh__prijs">€ 2.450</p>
    <p>Voor advies en het regelen van de hypotheek, van eerste gesprek tot de notaris. Starters betalen € 2.150. Geen uurtje-factuurtje en geen provisie van de bank.</p>
    <ul class="vkh__lijst">
      <li>Vergelijking van 34 geldverstrekkers, ook kleine zoals Hollandsche Hypotheekbank</li>
      <li>Aanvraag van NHG en de starterslening</li>
      <li>Controle van het koopcontract en de taxatie</li>
    </ul>
    <p>Gaat de koop niet door? Dan betaalt u € 450 voor het werk tot dan, de rest vervalt. Taxatie en notaris betaalt u zelf. U betaalt ons pas als de hypotheek bij de notaris passeert.</p>
  </div>
</div>

<div class="vkh__over" id="vkh-over"><div class="vkh__in vkh__over-in">
  <img class="vkh__p1" src="https://neddev.com/lab-media/site-hypotheekadviseur-6.webp" alt="Marieke van Keulen bij het raam van het kantoor" width="768" height="1376" loading="lazy">
  <img class="vkh__p2" src="https://neddev.com/lab-media/site-hypotheekadviseur-7.webp" alt="Joost Hamers aan zijn bureau" width="768" height="1376" loading="lazy">
  <div class="vkh__over-tx">
    <h2 class="vkh__h2">Marieke en Joost</h2>
    <p>"Ik werkte twaalf jaar bij een bank en mocht daar maar één hypotheek verkopen. Hier mag ik zeggen welke het beste past, ook als dat de goedkoopste is."</p>
    <p class="vkh__wie-naam">Marieke van Keulen, eigenaar</p>
    <p>"Ik neem de telefoon op tot acht uur 's avonds. De meeste mensen bellen pas als de kinderen op bed liggen."</p>
    <p class="vkh__wie-naam">Joost Hamers, adviseur sinds 2019</p>
    <p class="vkh__over-slot">Samen regelden ze ruim 1.900 hypotheken, de meeste in Amersfoort, Leusden en Soest.</p>
  </div>
  <img class="vkh__k1" src="https://neddev.com/lab-media/site-hypotheekadviseur-2.webp" alt="Adviseur bespreekt papieren met een jong stel aan tafel" width="900" height="491" loading="lazy">
  <img class="vkh__k2" src="https://neddev.com/lab-media/site-hypotheekadviseur-5.webp" alt="Vergaderkamer met eiken tafel en hoge ramen" width="900" height="491" loading="lazy">
</div></div>

<div class="vkh__in vkh__ervaring">
  <div class="vkh__citaten">
    <blockquote class="vkh__citaat" id="vkh-c1"><p>Bij de bank kregen we te horen dat het niet kon. Marieke vond een geldverstrekker die het tijdelijke contract van Sanne wel meetelde. We wonen er nu een jaar.</p></blockquote>
    <blockquote class="vkh__citaat" id="vkh-c2" hidden><p>Joost rekende drie scenario's door voor het oversluiten. We betalen nu € 214 minder per maand en hebben het hele traject aan de keukentafel gedaan.</p></blockquote>
    <blockquote class="vkh__citaat" id="vkh-c3" hidden><p>Het bod ging vrijdagavond om negen uur de deur uit. Om half tien had ik een mail met de financiering rond. Dat verkocht het huis aan ons.</p></blockquote>
  </div>
  <div class="vkh__namen" role="tablist" aria-label="Kies een ervaring">
    <button role="tab" aria-selected="true" aria-controls="vkh-c1" type="button">Sanne en Tim, Hoogland</button>
    <button role="tab" aria-selected="false" aria-controls="vkh-c2" type="button" tabindex="-1">Henk en Ans, Leusden</button>
    <button role="tab" aria-selected="false" aria-controls="vkh-c3" type="button" tabindex="-1">Yusuf, Amersfoort-Vathorst</button>
  </div>
  <p class="vkh__score">Een 9,7 uit 418 beoordelingen op Advieskeuze.</p>
</div>

<div class="vkh__afspraak" id="vkh-afspraak"><div class="vkh__in vkh__afspraak-in">
  <div>
    <h2 class="vkh__h2">Bel, of laat uw nummer achter</h2>
    <p class="vkh__tel"><a href="tel:+31331234567">033 123 4567</a></p>
    <p>Utrechtseweg 52, Amersfoort. Gratis parkeren voor de deur, tien minuten lopen van station Amersfoort Centraal. Het eerste gesprek duurt een uur en kost niets; bij u thuis kan ook. Liever eerst mailen? Dan krijgt u dezelfde dag antwoord.</p>
    <form class="vkh__form" novalidate>
      <label>Naam<input name="naam" autocomplete="name"></label>
      <label>Telefoonnummer<input name="tel" type="tel" autocomplete="tel"></label>
      <fieldset class="vkh__rente"><legend>Wanneer mogen we bellen?</legend>
        <label><input type="radio" name="moment" value="ochtend" checked><span>Ochtend</span></label>
        <label><input type="radio" name="moment" value="middag"><span>Middag</span></label>
        <label><input type="radio" name="moment" value="avond"><span>Na 18:00</span></label>
      </fieldset>
      <p class="vkh__fout" role="alert" hidden>Vul uw naam en een telefoonnummer van tien cijfers in.</p>
      <button class="vkh__knop" type="submit">Bel mij terug</button>
      <p class="vkh__klaar" role="status" hidden></p>
    </form>
  </div>
  <div class="vkh__mee">
    <img src="https://neddev.com/lab-media/site-hypotheekadviseur-4.webp" alt="Huissleutels naast koffie en een map met papieren" width="900" height="491" loading="lazy">
    <h3 class="vkh__h3">Neem mee naar het eerste gesprek</h3>
    <ul class="vkh__check">
      <li><label><input type="checkbox"> Een legitimatiebewijs van u allebei</label></li>
      <li><label><input type="checkbox"> De laatste loonstrook en jaaropgave</label></li>
      <li><label><input type="checkbox"> Het overzicht van DUO als u een studieschuld hebt</label></li>
      <li><label><input type="checkbox"> Uw pensioenoverzicht van mijnpensioenoverzicht.nl</label></li>
      <li><label><input type="checkbox"> De verkoopbrochure, als u al een huis op het oog hebt</label></li>
    </ul>
    <p class="vkh__mee-uit" aria-live="polite">Nog 5 dingen te verzamelen.</p>
  </div>
</div></div>

<div class="vkh__voet" role="contentinfo"><div class="vkh__in vkh__voet-in">
  <p>Van Keulen Hypotheken B.V., Utrechtseweg 52, 3818 EM Amersfoort, <a href="mailto:advies@voorbeeld.nl">advies@voorbeeld.nl</a>. KvK 81234567, btw NL862345678B01. Ingeschreven bij de AFM onder nummer 12045678 en aangesloten bij het Kifid. Onze adviseurs staan in het register van de Stichting Erkenning Hypotheekadviseurs.</p>
  <p class="vkh__voet-links"><a href="#">Dienstverleningsdocument</a> <a href="#">Klachten</a> <a href="#">Privacy en cookies</a></p>
  <p class="vkh__voet-waarsch">Let op! Geld lenen kost geld.</p>
</div></div>
</div>
</div>

/* Van Keulen Hypotheken · hypotheekadvies, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): cabinet-grotesk@800 + switzer@400,500 */
.vkh{--bg:#FFFFFF;--opp:#F1F4F1;--tekst:#101511;--gedempt:#4B554D;--lijn:#D7DED8;--accent:#1E6B3A;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(88px,10vw,144px);--gat:clamp(24px,3vw,48px);--kader:1660px;--lees:720px;
  background:var(--bg);color:var(--tekst);font-family:'Switzer',sans-serif;font-size:var(--fs2);line-height:1.6;-webkit-font-smoothing:antialiased}
.vkh *,.vkh *::before,.vkh *::after{box-sizing:border-box}
.vkh [hidden]{display:none!important}
.vkh img{display:block;max-width:100%;height:auto}
.vkh p{margin:0}
.vkh a{color:inherit}
.vkh__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.vkh__h1,.vkh__h2,.vkh__h3,.vkh__getal,.vkh__prijs,.vkh__logo{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02;margin:0}
.vkh__h1{font-size:clamp(48px,7.4vw,var(--fs6));max-width:11ch}
.vkh__h2{font-size:var(--fs5);margin-bottom:var(--gat)}
.vkh__h3{font-size:var(--fs4);margin:16px 0 6px}
.vkh .vkh__knop{display:inline-block;background:var(--accent);color:var(--op-accent);font:500 var(--fs2)/1 'Switzer',sans-serif;padding:16px 24px;border:0;border-radius:var(--r);text-decoration:none;cursor:pointer;transition:background-color .18s}
.vkh .vkh__knop:hover{background:#155230}
.vkh a:focus-visible,.vkh button:focus-visible,.vkh input:focus-visible,.vkh__strook:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.vkh__top{background:var(--accent);color:var(--op-accent);font-size:var(--fs1)}
.vkh__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.vkh__top a{font-weight:500}
.vkh__head{position:sticky;top:0;z-index:5}
.vkh__head>.vkh__in,.vkh__menu{background:var(--bg)}
.vkh__head-in{display:flex;align-items:center;gap:32px;padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--lijn)}
.vkh__logo{font-size:var(--fs4);text-decoration:none;margin-right:auto;display:flex;align-items:baseline;gap:6px;padding:6px 0}
.vkh__logo span{font-family:'Switzer',sans-serif;font-weight:400;font-size:var(--fs2);color:var(--gedempt);letter-spacing:0}
.vkh__nav{display:flex;gap:26px}
.vkh__nav a{text-decoration:none;transition:color .18s}
.vkh__nav a:hover{color:var(--accent)}
.vkh .vkh__knop--kop{padding:12px 18px}
.vkh__menu-knop{display:none;width:44px;height:44px;background:none;border:1px solid var(--lijn);border-radius:var(--r);padding:0 11px;cursor:pointer}
.vkh__menu-knop span{display:block;height:2px;background:var(--tekst);margin:6px 0}
.vkh__menu{padding:8px 20px 20px;border-bottom:1px solid var(--lijn)}
.vkh__menu a{display:block;padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}

.vkh__hero{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(40px,5vw,72px)}
.vkh__hero-onder{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gat);margin-top:var(--gat);padding-top:var(--gat);border-top:1px solid var(--lijn)}
.vkh__lead{font-size:var(--fs3);color:var(--gedempt);max-width:34em}
.vkh__breed{width:100%;aspect-ratio:21/6.5;object-fit:cover;border-radius:var(--r)}

.vkh__reken{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__invoer{display:flex;flex-direction:column;gap:22px}
.vkh__invoer .vkh__h2{margin-bottom:8px}
.vkh__schuif{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-weight:500}
.vkh__schuif output{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:var(--fs3)}
.vkh__schuif input{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.vkh__rente{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.vkh__rente legend{font-weight:500;margin-bottom:8px;padding:0}
.vkh__rente label{position:relative;cursor:pointer}
.vkh__rente input{position:absolute;opacity:0;width:1px;height:1px}
.vkh__rente span{display:block;padding:10px 14px;border:1px solid var(--lijn);border-radius:var(--r);transition:border-color .18s,background-color .18s}
.vkh__rente label:hover span{border-color:var(--gedempt)}
.vkh__rente input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.vkh__rente input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.vkh__vink{display:flex;gap:10px;align-items:center;cursor:pointer}
.vkh__vink input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--accent)}
.vkh__uitkomst{background:var(--opp);border-radius:var(--r);padding:clamp(28px,4vw,56px);align-self:start;position:sticky;top:110px}
.vkh__uit-kop{font-size:var(--fs3);color:var(--gedempt)}
.vkh__getal{font-size:clamp(56px,7vw,var(--fs6));color:var(--accent);margin:4px 0 24px;font-variant-numeric:tabular-nums}
.vkh__balk{display:flex;height:14px;border-radius:var(--r);overflow:hidden;background:var(--lijn);margin-bottom:20px}
.vkh__balk span{display:block;height:100%;transition:width .2s}
.vkh__balk-l{background:var(--accent)}
.vkh__balk-e{background:#7FB08F}
.vkh__balk-k{background:var(--tekst)}
.vkh__zin{font-size:var(--fs3);margin-bottom:18px}
.vkh__zin b{font-weight:500;color:var(--accent)}
.vkh__klein{font-size:var(--fs1);color:var(--gedempt);margin-bottom:24px}

.vkh__wie{background:var(--opp);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__wie-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gat)}
.vkh__wie-kop p{color:var(--gedempt);max-width:28em;margin-bottom:var(--gat)}
.vkh__strook{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(clamp(20px,4vw,64px),calc((100% - var(--kader))/2 + 64px)) 16px;scrollbar-width:thin}
.vkh__strook figure{flex:0 0 clamp(270px,30vw,460px);margin:0;scroll-snap-align:start}
.vkh__strook figure:nth-child(odd){flex-basis:clamp(270px,36vw,560px)}
.vkh__strook img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.vkh__strook figure:nth-child(odd) img{aspect-ratio:16/10}
.vkh__strook p{color:var(--gedempt);max-width:32em}

.vkh__tarief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,112px);align-items:center;padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__tarief img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.vkh__tarief-tx>p{max-width:var(--lees);margin-bottom:18px;color:var(--gedempt)}
.vkh .vkh__prijs{font-size:clamp(64px,9vw,var(--fs6));color:var(--accent);margin:-8px 0 20px}
.vkh__lijst{margin:0 0 20px;padding:0 0 0 20px}
.vkh__lijst li{padding:4px 0}

.vkh__over{border-top:1px solid var(--lijn)}
.vkh__over-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__p1{grid-column:1/5;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.vkh__p2{grid-column:5/8;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);margin-top:48px}
.vkh__over-tx{grid-column:9/13;align-self:center}
.vkh__over-tx p{font-size:var(--fs3);margin-bottom:6px}
.vkh__over-tx .vkh__over-slot{font-size:var(--fs2);color:var(--gedempt)}
.vkh__over-tx .vkh__wie-naam{font-size:var(--fs1);color:var(--gedempt);margin-bottom:28px}
.vkh__k1{grid-column:1/9;width:100%;aspect-ratio:16/6;object-fit:cover;border-radius:var(--r)}
.vkh__k2{grid-column:9/13;width:100%;height:100%;object-fit:cover;border-radius:var(--r)}

.vkh__ervaring{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);border-top:1px solid var(--lijn)}
.vkh__citaat{margin:0;max-width:1180px}
.vkh__citaat p{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,var(--fs5));line-height:1.12;letter-spacing:-.015em}
.vkh__namen{display:flex;flex-wrap:wrap;gap:8px;margin:var(--gat) 0 18px}
.vkh__namen button{font:inherit;background:none;border:1px solid var(--lijn);border-radius:var(--r);padding:10px 16px;cursor:pointer;color:var(--tekst);transition:border-color .18s,background-color .18s}
.vkh__namen button:hover{border-color:var(--gedempt)}
.vkh__namen button[aria-selected=true]{background:var(--tekst);color:var(--bg);border-color:var(--tekst)}
.vkh__score{color:var(--gedempt)}

.vkh__afspraak{background:var(--opp)}
.vkh__afspraak-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.vkh__afspraak-in>div>p{color:var(--gedempt);max-width:34em;margin-bottom:28px}
.vkh__tel{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:var(--fs5);line-height:1.1}
.vkh__tel a{text-decoration:none;color:var(--accent)}
.vkh__form{display:flex;flex-direction:column;gap:14px;max-width:460px}
.vkh__form>label{display:flex;flex-direction:column;gap:6px;font-weight:500}
.vkh__form>label input{font:inherit;padding:13px 14px;border:1px solid var(--lijn);border-radius:var(--r);background:var(--bg);color:var(--tekst)}
.vkh__form .vkh__knop{align-self:flex-start}
.vkh__fout{color:#A1261C}
.vkh__klaar{color:var(--accent);font-weight:500}
.vkh__mee img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--r)}
.vkh__check{list-style:none;margin:8px 0 12px;padding:0}
.vkh__check li{border-bottom:1px solid var(--lijn)}
.vkh__check label{display:flex;gap:12px;align-items:center;padding:12px 0;cursor:pointer}
.vkh__check input{width:24px;height:24px;margin:0;accent-color:var(--accent);flex:none}
.vkh__check input:checked+*{color:var(--gedempt)}
.vkh__mee-uit{color:var(--gedempt);font-size:var(--fs1)}

.vkh__voet{background:var(--tekst);color:#C9D1CB;font-size:var(--fs1)}
.vkh__voet-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px 64px;padding-top:36px;padding-bottom:36px}
.vkh__voet-links{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end}
.vkh__voet-waarsch{grid-column:1/-1;color:#fff;font-weight:500;border-top:1px solid #2A332C;padding-top:16px}

@media (max-width:1100px){.vkh__nav{display:none}.vkh__menu-knop{display:block}}
@media (max-width:860px){
  .vkh__reken,.vkh__tarief,.vkh__afspraak-in{grid-template-columns:minmax(0,1fr)}
  .vkh__uitkomst{position:static}
  .vkh__hero-onder,.vkh__wie-kop{flex-direction:column;align-items:flex-start}
  .vkh__over-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vkh__p1,.vkh__p2{grid-column:auto;margin-top:0}
  .vkh__over-tx,.vkh__k1{grid-column:1/-1}
  .vkh .vkh__k2{display:none}
  .vkh__tarief img{aspect-ratio:16/10}
  .vkh__voet-in{grid-template-columns:minmax(0,1fr)}
  .vkh__voet-links{justify-content:flex-start}
}
@media (max-width:560px){
  .vkh{--fs4:22px;--fs5:32px}
  .vkh__in{padding:0 20px}
  .vkh__top-r{display:none}
  .vkh .vkh__knop--kop{display:none}
  .vkh__breed{aspect-ratio:4/3}
  .vkh__strook{padding:0 20px 16px}
  .vkh__strook figure,.vkh__strook figure:nth-child(odd){flex-basis:78%}
}
@media (prefers-reduced-motion:reduce){.vkh *{transition:none!important}}

// Van Keulen Hypotheken · hypotheekadvies, Amersfoort · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.vkh');if(!s)return;
var mk=s.querySelector('.vkh__menu-knop'),menu=s.querySelector('#vkh-menu');
mk.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;mk.setAttribute('aria-expanded',String(open));mk.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
[].slice.call(menu.querySelectorAll('a')).forEach(function(a){a.addEventListener('click',function(){menu.hidden=true;mk.setAttribute('aria-expanded','false');});});
var f=s.querySelector('.vkh__invoer'),getal=s.querySelector('.vkh__getal'),zin=s.querySelector('.vkh__zin');
var bl=s.querySelector('.vkh__balk-l'),be=s.querySelector('.vkh__balk-e'),bk=s.querySelector('.vkh__balk-k');
var fmt=function(n){return '€ '+Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g,'.');};
var ann=function(r){var i=r/1200;return i/(1-Math.pow(1+i,-360));};
var huidig=0,raf=0;
function toon(doel){cancelAnimationFrame(raf);var van=huidig,t0=performance.now(),dur=window.matchMedia('(prefers-reduced-motion: reduce)').matches?0:260;
  (function stap(t){var p=dur?Math.min(1,(t-t0)/dur):1;huidig=van+(doel-van)*p;getal.textContent=fmt(huidig);if(p<1)raf=requestAnimationFrame(stap);})(t0);}
function reken(){var i1=+f.ink1.value,i2=+f.ink2.value,st=+f.stud.value,eg=+f.eigen.value,r=+f.querySelector('input[name=rente]:checked').value,starter=f.starter.checked;
  f.o1.value=fmt(i1);f.o2.value=fmt(i2);f.o3.value=fmt(st);f.o4.value=fmt(eg);
  var tot=i1+i2,flp=tot<40000?.245:tot<60000?.265:tot<80000?.28:tot<110000?.29:.30;
  var ruimte=tot*flp/12-st*0.0045;
  var lening=Math.max(0,Math.floor(ruimte/ann(Math.max(r,5))/1000)*1000);
  var advies=starter?2150:2450,vast=advies+1100+750;
  var woning=starter?lening+eg-vast:(lening+eg-vast)/1.02;
  if(starter&&woning>525000)woning=(lening+eg-vast)/1.02;
  woning=Math.max(0,Math.floor(woning/1000)*1000);
  var bruto=lening*ann(r),netto=bruto-lening*r/1200*0.3756;
  var kosten=Math.max(0,lening+eg-woning),som=lening+eg||1;
  bl.style.width=(lening/som*100)+'%';be.style.width=(Math.max(0,eg-kosten)/som*100)+'%';bk.style.width=(Math.min(kosten,som)/som*100)+'%';
  toon(lening);
  zin.innerHTML='Met '+fmt(eg)+' eigen geld past een woning tot ongeveer <b>'+fmt(woning)+'</b>. U betaalt dan '+fmt(bruto)+' bruto per maand, na belastingaftrek ongeveer '+fmt(netto)+'. Bijkomende kosten: ongeveer '+fmt(kosten)+'.';}
f.addEventListener('input',reken);f.addEventListener('change',reken);reken();
var tabs=[].slice.call(s.querySelectorAll('.vkh__namen [role=tab]'));
function kies(tb){tabs.forEach(function(x){var aan=x===tb;x.setAttribute('aria-selected',String(aan));x.tabIndex=aan?0:-1;s.querySelector('#'+x.getAttribute('aria-controls')).hidden=!aan;});}
tabs.forEach(function(tb,n){tb.addEventListener('click',function(){kies(tb);});tb.addEventListener('keydown',function(e){var d=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(d){var v=tabs[(n+d+tabs.length)%tabs.length];v.focus();kies(v);}});});
var cf=s.querySelector('.vkh__form'),fout=s.querySelector('.vkh__fout'),klaar=s.querySelector('.vkh__klaar');
cf.addEventListener('submit',function(e){e.preventDefault();var tel=cf.tel.value.replace(/[^0-9]/g,''),ok=cf.naam.value.trim().length>1&&tel.length===10;fout.hidden=ok;if(!ok)return;
  var m=cf.querySelector('input[name=moment]:checked').value;
  [].slice.call(cf.children).forEach(function(x){if(x!==klaar)x.hidden=true;});klaar.hidden=false;
  klaar.textContent='Dank u, '+cf.naam.value.trim().split(' ')[0]+'. Marieke of Joost belt u de eerstvolgende werkdag in de '+(m==='avond'?'avond na 18:00':m)+' op '+cf.tel.value.trim()+'.';});
var vk=[].slice.call(s.querySelectorAll('.vkh__check input')),mu=s.querySelector('.vkh__mee-uit');
vk.forEach(function(v){v.addEventListener('change',function(){var n=vk.filter(function(x){return !x.checked;}).length;mu.textContent=n?'Nog '+n+' '+(n===1?'ding':'dingen')+' te verzamelen.':'Alles verzameld. Tot in het gesprek.';});});
}
init(document.querySelector('.jouw-container'));

More complete websites

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 →