Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht New

Landing page for a childcare open day across three locations: the neighbourhood map is the hero, pick a location and you see the free tour times right away and book one. Then the groups in photos, parents' words, costs, FAQ and the call to action again.

View full screen ↗

Kom kijken op 14 november

Open dag op zaterdag van 10:00 tot 13:00, op alle drie onze locaties. Loop binnen, of kies hieronder een tijd voor een rondleiding van twintig minuten met de pedagogisch medewerker van de groep. Uw kind mag mee.

Twee baby- en dreumesgroepen en een peutergroep, open van 7:30 tot 18:30.

Rondleiding bij De Peren

Wat u ziet tijdens de rondleiding

Groepsruimte met lage tafels en een poppenkeuken, de tuindeuren open — De groepsruimte van De Appels. De tuindeuren staan open zodra het droog is.

Slaapkamer met witte bedjes — Elk kind slaapt in een eigen bedje, op het ritme van thuis.

Pedagogisch medewerker leest voor aan drie peuters — Voorlezen na de lunch, elke dag.

Lunch met bruin brood, kaas, komkommer en appel — We koken en smeren zelf. Geen pakjes.

Regenlaarsjes onder een bank in de gang — Laarzen aan, ook als het regent.

Peuterhanden schilderen met verf op groot papier — Verven op de grond of aan de lage tafel.

Pedagogisch medewerker trekt een bolderkar met vier peuters door het park — Met de bolderkar naar het Máximapark.

Bij de rondleiding wist de leidster al hoe onze dochter heette voordat we het hadden gezegd. Het formulier was gelezen. Dat gaf de doorslag.
Sanne en Bilal, ouders van Noor, Oog in Al

Onze zoon ging de eerste week huilend naar binnen en de tweede week zonder om te kijken. Ze sturen elke middag twee foto's.
Maartje de Wit, Lombok

Fijn dat ze zo veel buiten zijn. Hij komt elke dag vies thuis, zoals het hoort.
Ruben Hoekstra, Leidsche Rijn

Alle drie de locaties staan in het Landelijk Register Kinderopvang · GGD-inspectie 2026 zonder tekortkomingen · vaste gezichten: maximaal drie medewerkers per baby

Wat het kost

Dagopvang kost in 2026 bij ons 10,85 euro per uur. Werken beide ouders, dan krijgt u het grootste deel terug via de kinderopvangtoeslag. Een gezin met een inkomen van 60.000 euro betaalt voor twee dagen per week netto ongeveer 170 euro per maand.

Tijdens de rondleiding rekenen we het voor uw situatie uit. Inschrijven kost niets.

Is er een wachtlijst?

Voor de babygroepen in Lombok wel, ongeveer vier maanden. In Leidsche Rijn is er vanaf januari plek op dinsdag en donderdag.

Wat moet ik meenemen?

Niets. Wilt u na afloop inschrijven, dan helpt het als u het BSN van uw kind bij de hand hebt.

Hoe gaat het wennen?

Twee ochtenden in de week voor de start, samen met u en daarna alleen. De mentor van uw kind belt na elke wenochtend.

Kan ik later van locatie wisselen?

Ja, zonder extra kosten, zodra er op de andere locatie plek is.

Er zijn nog tijden vrij op zaterdag 14 november.

Kies een tijd

How to use it

Paste the HTML where the page examples 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.

<!-- Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kbg">
<div class="kbg__kop" role="banner"><div class="kbg__in kbg__kop-in">
  <a href="#" class="kbg__logo" aria-label="Kinderopvang De Boomgaard, naar home"><svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true"><path d="M16 29V15" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/><path d="M16 17c-6 0-10-3.6-10-8.4C6 4.6 9.8 2 16 2s10 2.6 10 6.6C26 13.4 22 17 16 17z" fill="currentColor"/><circle cx="12" cy="9" r="1.8" fill="#A51D2D"/><circle cx="19.5" cy="7.5" r="1.8" fill="#A51D2D"/><circle cx="17" cy="12" r="1.8" fill="#A51D2D"/></svg><span>De Boomgaard<small>kinderopvang in Utrecht West</small></span></a>
  <a href="tel:0301234567" class="kbg__bel">030 123 4567</a>
</div></div>

<div class="kbg__hero"><div class="kbg__in kbg__hero-in">
  <div class="kbg__hero-txt">
    <h1 class="kbg__h1">Kom kijken op 14 november</h1>
    <p class="kbg__lead">Open dag op zaterdag van 10:00 tot 13:00, op alle drie onze locaties. Loop binnen, of kies hieronder een tijd voor een rondleiding van twintig minuten met de pedagogisch medewerker van de groep. Uw kind mag mee.</p>
    <div class="kbg__locs" role="radiogroup" aria-label="Kies een locatie">
      <button type="button" role="radio" aria-checked="true" class="kbg__loc" data-loc="lombok"><strong>De Peren</strong><span>Damstraat 14, Lombok</span></button>
      <button type="button" role="radio" aria-checked="false" class="kbg__loc" data-loc="oog"><strong>De Kersen</strong><span>Thomas à Kempisweg 40, Oog in Al</span></button>
      <button type="button" role="radio" aria-checked="false" class="kbg__loc" data-loc="lr"><strong>De Appels</strong><span>Grauwaartsingel 21, Leidsche Rijn</span></button>
    </div>
  </div>
  <div class="kbg__kaart">
    <svg viewBox="0 0 640 520" role="img" aria-labelledby="kbg-kaart-t">
      <title id="kbg-kaart-t">Kaart van Utrecht West met de drie locaties van De Boomgaard</title>
      <rect width="640" height="520" fill="#E4F5EE"/>
      <path d="M40 120c70 10 120 70 150 70s60-30 110-24" fill="none" stroke="#B0D9C8" stroke-width="2"/>
      <path d="M0 400c120-20 210 10 330-20" fill="none" stroke="#B0D9C8" stroke-width="2"/>
      <ellipse cx="110" cy="250" rx="78" ry="52" fill="#B0D9C8" opacity=".6"/>
      <path d="M232 0c-10 90 14 170 4 260s-26 170-12 260" fill="none" stroke="#8FC7B2" stroke-width="18" stroke-linecap="round"/>
      <path d="M0 300c90-6 180 6 236-2s120-10 196 2 120 0 208-6" fill="none" stroke="#8FC7B2" stroke-width="9" stroke-linecap="round"/>
      <path d="M430 300c4 70-8 140 0 220" fill="none" stroke="#8FC7B2" stroke-width="9" stroke-linecap="round"/>
      <path d="M520 150c60-20 110 20 110 80s-40 110-100 104-90-48-86-96 20-76 76-88z" fill="none" stroke="#8FC7B2" stroke-width="7"/>
      <path d="M300 300l40-130M360 300l60 140M470 280l-30-150" stroke="#B0D9C8" stroke-width="3"/>
      <text x="72" y="254" class="kbg__kt">Máximapark</text>
      <g class="kbg__lbl"><text x="426" y="246" class="kbg__kn">De Peren</text><text x="426" y="268" class="kbg__kt">Lombok</text></g>
      <g class="kbg__lbl"><text x="378" y="356" class="kbg__kn">De Kersen</text><text x="378" y="378" class="kbg__kt">Oog in Al</text></g>
      <g class="kbg__lbl"><text x="152" y="376" class="kbg__kn">De Appels</text><text x="152" y="398" class="kbg__kt">Leidsche Rijn</text></g>
      <text x="540" y="246" class="kbg__kt">Centrum</text>
      <g class="kbg__pin" data-loc="lombok" transform="translate(400 250)" tabindex="0" role="button" aria-label="De Peren in Lombok"><title>De Peren in Lombok</title><circle r="28" class="kbg__pin-h"/><circle r="12"/></g>
      <g class="kbg__pin" data-loc="oog" transform="translate(352 360)" tabindex="0" role="button" aria-label="De Kersen in Oog in Al"><title>De Kersen in Oog in Al</title><circle r="28" class="kbg__pin-h"/><circle r="12"/></g>
      <g class="kbg__pin" data-loc="lr" transform="translate(126 380)" tabindex="0" role="button" aria-label="De Appels in Leidsche Rijn"><title>De Appels in Leidsche Rijn</title><circle r="28" class="kbg__pin-h"/><circle r="12"/></g>
    </svg>
  </div>
</div></div>

<div class="kbg__boek" id="kbg-boek"><div class="kbg__in kbg__boek-in">
  <figure class="kbg__locfoto"><img src="https://neddev.com/lab-media/page-landing-open-dag-7c.webp" alt="" width="640" height="491" data-foto><figcaption data-u="groepen">Twee baby- en dreumesgroepen en een peutergroep, open van 7:30 tot 18:30.</figcaption></figure>
  <div class="kbg__boek-r">
    <h2 class="kbg__h2" data-u="titel">Rondleiding bij De Peren</h2>
    <div class="kbg__tabs" role="tablist" aria-label="Wanneer">
      <button type="button" role="tab" aria-selected="true" data-w="open">Zaterdag 14 november</button>
      <button type="button" role="tab" aria-selected="false" data-w="week">Liever doordeweeks</button>
    </div>
    <div class="kbg__tijden" role="radiogroup" aria-label="Kies een tijd"></div>
    <form class="kbg__form" novalidate>
      <label class="kbg__f"><span>Uw naam</span><input name="naam" autocomplete="name" required></label>
      <label class="kbg__f"><span>E-mailadres</span><input name="mail" type="email" autocomplete="email" required></label>
      <label class="kbg__f"><span>Leeftijd van uw kind</span><select name="leeftijd"><option>nog niet geboren</option><option>jonger dan 1 jaar</option><option>1 tot 2 jaar</option><option>2 tot 4 jaar</option></select></label>
      <button type="submit" class="kbg__knop">Reserveer deze tijd</button>
      <p class="kbg__fout" hidden></p>
    </form>
    <p class="kbg__klaar" hidden></p>
  </div>
</div></div>

<div class="kbg__zien"><div class="kbg__in">
  <h2 class="kbg__h2">Wat u ziet tijdens de rondleiding</h2>
  <div class="kbg__mozaiek">
    <figure class="kbg__m kbg__m1"><img src="https://neddev.com/lab-media/page-landing-open-dag-1.webp" alt="Groepsruimte met lage tafels en een poppenkeuken, de tuindeuren open" width="1408" height="768" loading="lazy"><figcaption>De groepsruimte van De Appels. De tuindeuren staan open zodra het droog is.</figcaption></figure>
    <figure class="kbg__m kbg__m2"><img src="https://neddev.com/lab-media/page-landing-open-dag-3.webp" alt="Slaapkamer met witte bedjes" width="900" height="491" loading="lazy"><figcaption>Elk kind slaapt in een eigen bedje, op het ritme van thuis.</figcaption></figure>
    <figure class="kbg__m kbg__m3"><img src="https://neddev.com/lab-media/page-landing-open-dag-11.webp" alt="Pedagogisch medewerker leest voor aan drie peuters" width="900" height="491" loading="lazy"><figcaption>Voorlezen na de lunch, elke dag.</figcaption></figure>
    <figure class="kbg__m kbg__m4"><img src="https://neddev.com/lab-media/page-landing-open-dag-9.webp" alt="Lunch met bruin brood, kaas, komkommer en appel" width="900" height="491" loading="lazy"><figcaption>We koken en smeren zelf. Geen pakjes.</figcaption></figure>
    <figure class="kbg__m kbg__m5"><img src="https://neddev.com/lab-media/page-landing-open-dag-12.webp" alt="Regenlaarsjes onder een bank in de gang" width="900" height="491" loading="lazy"><figcaption>Laarzen aan, ook als het regent.</figcaption></figure>
    <figure class="kbg__m kbg__m6"><img src="https://neddev.com/lab-media/page-landing-open-dag-8.webp" alt="Peuterhanden schilderen met verf op groot papier" width="900" height="491" loading="lazy"><figcaption>Verven op de grond of aan de lage tafel.</figcaption></figure>
    <figure class="kbg__m kbg__m7"><img src="https://neddev.com/lab-media/page-landing-open-dag-10.webp" alt="Pedagogisch medewerker trekt een bolderkar met vier peuters door het park" width="900" height="491" loading="lazy"><figcaption>Met de bolderkar naar het Máximapark.</figcaption></figure>
  </div>
</div></div>

<div class="kbg__ouders"><div class="kbg__in kbg__ouders-in">
  <blockquote class="kbg__quote kbg__quote--groot"><p>Bij de rondleiding wist de leidster al hoe onze dochter heette voordat we het hadden gezegd. Het formulier was gelezen. Dat gaf de doorslag.</p><footer>Sanne en Bilal, ouders van Noor, Oog in Al</footer></blockquote>
  <div class="kbg__quotes">
    <blockquote class="kbg__quote"><p>Onze zoon ging de eerste week huilend naar binnen en de tweede week zonder om te kijken. Ze sturen elke middag twee foto's.</p><footer>Maartje de Wit, Lombok</footer></blockquote>
    <blockquote class="kbg__quote"><p>Fijn dat ze zo veel buiten zijn. Hij komt elke dag vies thuis, zoals het hoort.</p><footer>Ruben Hoekstra, Leidsche Rijn</footer></blockquote>
  </div>
  <p class="kbg__keur">Alle drie de locaties staan in het Landelijk Register Kinderopvang · GGD-inspectie 2026 zonder tekortkomingen · vaste gezichten: maximaal drie medewerkers per baby</p>
</div></div>

<div class="kbg__kosten"><div class="kbg__in kbg__kosten-in">
  <div>
    <h2 class="kbg__h2">Wat het kost</h2>
    <p>Dagopvang kost in 2026 bij ons 10,85 euro per uur. Werken beide ouders, dan krijgt u het grootste deel terug via de kinderopvangtoeslag. Een gezin met een inkomen van 60.000 euro betaalt voor twee dagen per week netto ongeveer 170 euro per maand.</p>
    <p>Tijdens de rondleiding rekenen we het voor uw situatie uit. Inschrijven kost niets.</p>
  </div>
  <div class="kbg__faq">
    <details><summary>Is er een wachtlijst?</summary><p>Voor de babygroepen in Lombok wel, ongeveer vier maanden. In Leidsche Rijn is er vanaf januari plek op dinsdag en donderdag.</p></details>
    <details><summary>Wat moet ik meenemen?</summary><p>Niets. Wilt u na afloop inschrijven, dan helpt het als u het BSN van uw kind bij de hand hebt.</p></details>
    <details><summary>Hoe gaat het wennen?</summary><p>Twee ochtenden in de week voor de start, samen met u en daarna alleen. De mentor van uw kind belt na elke wenochtend.</p></details>
    <details><summary>Kan ik later van locatie wisselen?</summary><p>Ja, zonder extra kosten, zodra er op de andere locatie plek is.</p></details>
  </div>
</div></div>

<div class="kbg__slot"><div class="kbg__in kbg__slot-in">
  <p class="kbg__slot-txt">Er zijn nog tijden vrij op zaterdag 14 november.</p>
  <a href="#kbg-boek" class="kbg__knop">Kies een tijd</a>
</div></div>

<div class="kbg__voet" role="contentinfo"><div class="kbg__in kbg__voet-in">
  <p><strong>Kinderopvang De Boomgaard</strong><br>Kantoor: Damstraat 14, 3531 BV Utrecht<br><a href="tel:0301234567">030 123 4567</a> · <a href="mailto:welkom@voorbeeld.nl">welkom@voorbeeld.nl</a></p>
  <p>KvK 30123456 · btw NL853012345B01<br>LRK De Peren 187654321 · De Kersen 187654322 · De Appels 187654323</p>
  <p><a href="#">Privacyverklaring</a> · <a href="#">Pedagogisch beleid</a> · <a href="#">Inspectierapporten</a></p>
</div></div>
</div>
</div>

/* Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht · NedDev · eigen werk. */
/* fonts (Fontshare): author@400,600 */
.kbg{--bg:#CDEBDF;--opp:#E4F5EE;--tekst:#0F2019;--gedempt:#3C5A4D;--lijn:#B0D9C8;--accent:#A51D2D;--op-accent:#FFFFFF;--r:8px;--fs1:13px;--fs2:15px;--fs3:18px;--fs4:24px;--fs5:36px;--fs6:60px;--sectie:clamp(48px,5.5vw,84px);--gat:clamp(16px,2vw,28px);--kader:1660px;--lees:720px;--zij:20px;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Author',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.kbg *,.kbg *::before,.kbg *::after{box-sizing:border-box}
.kbg [hidden]{display:none!important}
.kbg :where(p,h1,h2,figure,blockquote){margin:0}
.kbg a{color:inherit}
.kbg__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.kbg__kop-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;border-bottom:1px solid var(--lijn)}
.kbg__logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tekst)}
.kbg__logo span{display:flex;flex-direction:column;font-weight:600;font-size:var(--fs3);line-height:1.15}
.kbg__logo small{font-weight:400;font-size:var(--fs1);color:var(--gedempt)}
.kbg__bel{font-weight:600;font-size:var(--fs3);text-decoration:none;white-space:nowrap;padding:10px 0}
.kbg__bel:hover{color:var(--accent)}
.kbg__hero{padding:clamp(28px,4vw,56px) 0 clamp(28px,3vw,40px)}
.kbg__hero-in{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*2);align-items:center}
.kbg__h1{font-weight:600;font-size:var(--fs6);line-height:1.02;letter-spacing:-.02em;max-width:12ch}
.kbg__lead{font-size:var(--fs3);margin-top:20px;max-width:46ch}
.kbg__locs{margin-top:28px;display:grid;border-top:1px solid var(--tekst)}
.kbg__loc{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;text-align:left;font:inherit;color:var(--tekst);background:none;border:0;border-bottom:1px solid var(--lijn);padding:14px 0;cursor:pointer;transition:color .15s}
.kbg__loc strong{font-weight:600;font-size:var(--fs3)}
.kbg__loc span{font-size:var(--fs1);color:var(--gedempt)}
.kbg__loc:hover strong{color:var(--accent)}
.kbg__loc[aria-checked=true] strong{color:var(--accent)}
.kbg__loc[aria-checked=true]{border-bottom-color:var(--tekst)}
.kbg__kaart{border-radius:var(--r);overflow:hidden;border:1px solid var(--lijn)}
.kbg__kaart svg{display:block;width:100%;height:auto}
.kbg__kt,.kbg__kn{font-family:'Author',sans-serif;font-size:15px;fill:#3C5A4D;paint-order:stroke;stroke:#E4F5EE;stroke-width:5px;stroke-linejoin:round}
.kbg__kn{font-weight:600;font-size:17px;fill:#0F2019}
.kbg__pin{cursor:pointer;fill:#0F2019;outline:none}
.kbg__pin .kbg__pin-h{fill:#0F2019;opacity:0;transition:opacity .2s}
.kbg__pin:hover circle:last-child,.kbg__pin:focus-visible circle:last-child{fill:#A51D2D}
.kbg__pin.is-aan circle:last-child{fill:#A51D2D}
.kbg__pin.is-aan .kbg__pin-h{fill:#A51D2D;opacity:.22;animation:kbg-puls 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes kbg-puls{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.5);opacity:0}}
.kbg__boek{background:var(--opp);padding:var(--sectie) 0}
.kbg__boek-in{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*2);align-items:start}
.kbg__locfoto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.kbg__locfoto figcaption{margin-top:10px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__h2{font-weight:600;font-size:var(--fs5);line-height:1.08;letter-spacing:-.015em}
.kbg__tabs{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid var(--lijn)}
.kbg__tabs button{font:inherit;font-size:var(--fs2);color:var(--gedempt);background:none;border:0;border-bottom:3px solid transparent;padding:10px 4px;margin-right:16px;cursor:pointer}
.kbg__tabs button[aria-selected=true]{color:var(--tekst);border-color:var(--accent);font-weight:600}
.kbg__tijden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
.kbg__tijd{font:inherit;text-align:left;background:var(--bg);color:var(--tekst);border:1px solid var(--lijn);border-radius:var(--r);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;min-height:58px;transition:border-color .15s}
.kbg__tijd b{font-weight:600;font-size:var(--fs3)}
.kbg__tijd small{font-size:var(--fs1);color:var(--gedempt)}
.kbg__tijd:hover{border-color:var(--tekst)}
.kbg__tijd[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.kbg__tijd[aria-checked=true] small{color:var(--op-accent)}
.kbg__tijd:disabled{cursor:not-allowed;background:transparent;color:var(--gedempt)}
.kbg__tijd:disabled b{text-decoration:line-through;font-weight:400}
.kbg__form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:24px}
.kbg__f{display:grid;gap:5px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__f:nth-child(3){grid-column:1 / -1}
.kbg input,.kbg select{font:inherit;font-size:var(--fs2);color:var(--tekst);background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:11px 12px;min-height:46px;width:100%}
.kbg input:focus,.kbg select:focus{outline:2px solid var(--tekst);outline-offset:1px}
.kbg__knop{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;background:var(--accent);color:var(--op-accent);border:0;border-radius:var(--r);font:inherit;font-weight:600;font-size:var(--fs2);text-decoration:none;cursor:pointer;transition:background .15s}
.kbg__knop:hover{background:var(--tekst)}
.kbg__form .kbg__knop{grid-column:1 / -1;justify-self:start}
.kbg__fout{grid-column:1 / -1;color:var(--accent);font-weight:600;font-size:var(--fs1)}
.kbg__klaar{margin-top:24px;font-size:var(--fs4);line-height:1.35;max-width:36ch}
.kbg__zien{padding:var(--sectie) 0}
.kbg__mozaiek{margin-top:28px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gat)}
.kbg__m img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r)}
.kbg__m figcaption{margin-top:8px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__m1{grid-column:1 / span 7;grid-row:span 2}
.kbg__m1 img{aspect-ratio:7/5}
.kbg__m2{grid-column:8 / span 5}
.kbg__m3{grid-column:8 / span 5}
.kbg__m2 img,.kbg__m3 img{aspect-ratio:16/8}
.kbg__m4{grid-column:1 / span 3}
.kbg__m4 img{aspect-ratio:1/1}
.kbg__m5{grid-column:4 / span 5}
.kbg__m5 img{aspect-ratio:5/3}
.kbg__m6{grid-column:9 / span 4}
.kbg__m6 img{aspect-ratio:4/3}
.kbg__m7{grid-column:3 / span 8}
.kbg__m7 img{aspect-ratio:16/6}
.kbg__ouders{background:var(--tekst);color:var(--opp);padding:var(--sectie) 0}
.kbg__ouders-in{display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--gat)*2)}
.kbg__quote p{font-size:var(--fs3);line-height:1.45}
.kbg__quote footer{margin-top:8px;font-size:var(--fs1);color:var(--lijn)}
.kbg__quote--groot p{font-size:var(--fs5);line-height:1.12;font-weight:600}
.kbg__quotes{display:grid;gap:24px;align-content:end}
.kbg__keur{grid-column:1 / -1;font-size:var(--fs1);color:var(--lijn);border-top:1px solid #24392F;padding-top:14px}
.kbg__kosten{padding:var(--sectie) 0}
.kbg__kosten-in{display:grid;grid-template-columns:5fr 7fr;gap:calc(var(--gat)*2);align-items:start}
.kbg__kosten-in p{margin-top:14px;max-width:50ch}
.kbg__faq details{border-bottom:1px solid var(--gedempt)}
.kbg__faq details:first-child{border-top:1px solid var(--gedempt)}
.kbg__faq summary{cursor:pointer;list-style:none;padding:14px 40px 14px 0;font-weight:600;font-size:var(--fs3);position:relative}
.kbg__faq summary::-webkit-details-marker{display:none}
.kbg__faq summary::after{content:"+";position:absolute;right:6px;top:10px;font-size:var(--fs4);font-weight:400;transition:transform .2s}
.kbg__faq details[open] summary::after{transform:rotate(45deg)}
.kbg__faq summary:hover{color:var(--accent)}
.kbg__faq details p{margin:0;padding:0 0 16px}
.kbg__slot{background:var(--opp);padding:36px 0}
.kbg__slot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.kbg__slot-txt{font-size:var(--fs4);font-weight:600}
.kbg__voet{padding:36px 0 48px;font-size:var(--fs1);color:var(--gedempt)}
.kbg__voet-in{display:flex;flex-wrap:wrap;gap:20px 56px}
.kbg__voet strong{color:var(--tekst)}
@container (max-width:900px){
  .kbg__hero-in,.kbg__boek-in,.kbg__ouders-in,.kbg__kosten-in{grid-template-columns:1fr}
  .kbg__kaart{order:-1}
  .kbg__hero-txt{order:0}
  .kbg__mozaiek{grid-template-columns:1fr 1fr}
  .kbg__mozaiek .kbg__m{grid-column:auto;grid-row:auto}
  .kbg__mozaiek .kbg__m1,.kbg__mozaiek .kbg__m7{grid-column:1 / -1}
  .kbg__mozaiek .kbg__m img{aspect-ratio:4/3}
  .kbg__mozaiek .kbg__m1 img,.kbg__mozaiek .kbg__m7 img{aspect-ratio:16/9}
}
@container (max-width:560px){
  .kbg > *{--fs4:21px;--fs5:28px;--fs6:38px}
  .kbg__logo small{display:none}
  .kbg__kt{font-size:24px}
  .kbg__kn{font-size:26px}
  .kbg__kt[x="72"],.kbg__kt[x="540"]{display:none}
  .kbg__kaart{margin:0 calc(var(--zij) * -1);border-radius:0;border-left:0;border-right:0}
  .kbg__form{grid-template-columns:1fr}
  .kbg__tijden{grid-template-columns:1fr 1fr}
  .kbg__tabs button{margin-right:8px}
  .kbg__knop{width:100%}
}
@media (prefers-reduced-motion:reduce){.kbg *{transition:none!important;animation:none!important}}

// Landingspagina open dag · Kinderopvang De Boomgaard, Utrecht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.kbg');if(!s)return;
var M='https://neddev.com/lab-media/';
var L={
  lombok:{naam:'De Peren',adres:'Damstraat 14',foto:'page-landing-open-dag-7c.webp',alt:'De Damstraat in Lombok, met de voordeur van De Peren',groepen:'Twee baby- en dreumesgroepen en een peutergroep in een oud winkelpand aan de Damstraat. Open van 7:30 tot 18:30.',vrij:{'10:00':2,'10:30':0,'11:00':3,'11:30':1,'12:00':4,'12:30':0}},
  oog:{naam:'De Kersen',adres:'Thomas à Kempisweg 40',foto:'page-landing-open-dag-6.webp',alt:'Het oude schoolgebouw van De Kersen in Oog in Al',groepen:'Vier groepen in een schoolgebouw uit 1924, met een eigen speelplaats onder de lindes. Open van 7:30 tot 18:30.',vrij:{'10:00':0,'10:30':2,'11:00':0,'11:30':3,'12:00':2,'12:30':4}},
  lr:{naam:'De Appels',adres:'Grauwaartsingel 21',foto:'page-landing-open-dag-2.webp',alt:'Peuters in de zandbak in de tuin van De Appels',groepen:'Drie groepen met een tuin van 600 vierkante meter, tien minuten van het Máximapark. Open van 7:00 tot 19:00.',vrij:{'10:00':4,'10:30':4,'11:00':2,'11:30':0,'12:00':3,'12:30':3}}
};
var nu='lombok',wanneer='open',gekozen=null;
var locs=[].slice.call(s.querySelectorAll('.kbg__loc')),pins=[].slice.call(s.querySelectorAll('.kbg__pin'));
var foto=s.querySelector('[data-foto]'),groepen=s.querySelector('[data-u=groepen]'),titel=s.querySelector('[data-u=titel]'),tijden=s.querySelector('.kbg__tijden');
var dagen=['zo','ma','di','wo','do','vr','za'],mnd=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
function weekTijden(){var uit=[],d=new Date();for(var i=1;uit.length<8&&i<40;i++){var x=new Date(d.getFullYear(),d.getMonth(),d.getDate()+i);if(x.getDay()===2||x.getDay()===4){var lbl=dagen[x.getDay()]+' '+x.getDate()+' '+mnd[x.getMonth()];uit.push([lbl+', 9:30',(i*7)%3]);uit.push([lbl+', 15:30',(i*5+1)%3]);}}return uit;}
function toonTijden(){
  tijden.innerHTML='';gekozen=null;
  var lijst=wanneer==='open'?Object.keys(L[nu].vrij).map(function(t){return [t,L[nu].vrij[t]];}):weekTijden();
  lijst.forEach(function(r){var b=document.createElement('button');b.type='button';b.className='kbg__tijd';b.setAttribute('role','radio');b.setAttribute('aria-checked','false');
    b.innerHTML='<b>'+r[0]+'</b><small>'+(r[1]===0?'vol':(wanneer==='open'?'nog '+r[1]+(r[1]===1?' plek':' plekken'):'vrij'))+'</small>';
    if(r[1]===0)b.disabled=true;b.dataset.t=r[0];
    b.addEventListener('click',function(){[].forEach.call(tijden.children,function(x){x.setAttribute('aria-checked','false');});b.setAttribute('aria-checked','true');gekozen=r[0];});
    tijden.appendChild(b);});
}
function kies(k){nu=k;var l=L[k];
  locs.forEach(function(b){b.setAttribute('aria-checked',String(b.dataset.loc===k));});
  pins.forEach(function(p){p.classList.toggle('is-aan',p.dataset.loc===k);});
  foto.src=M+l.foto;foto.alt=l.alt;groepen.textContent=l.groepen;titel.textContent='Rondleiding bij '+l.naam;toonTijden();}
locs.forEach(function(b){b.addEventListener('click',function(){kies(b.dataset.loc);});});
pins.forEach(function(p){p.addEventListener('click',function(){kies(p.dataset.loc);});p.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();kies(p.dataset.loc);}});});
var tabs=[].slice.call(s.querySelectorAll('.kbg__tabs button'));
tabs.forEach(function(t){t.addEventListener('click',function(){tabs.forEach(function(x){x.setAttribute('aria-selected',String(x===t));});wanneer=t.dataset.w;toonTijden();});});
var f=s.querySelector('.kbg__form'),fout=f.querySelector('.kbg__fout'),klaar=s.querySelector('.kbg__klaar');
f.addEventListener('submit',function(e){e.preventDefault();var naam=f.naam.value.trim(),mail=f.mail.value.trim(),msg='';
  if(!gekozen)msg='Kies eerst een tijd.';else if(!naam)msg='Vul uw naam in.';else if(!/^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(mail))msg='Dit e-mailadres klopt nog niet.';
  fout.textContent=msg;fout.hidden=!msg;if(msg)return;
  var l=L[nu];f.hidden=true;tijden.hidden=true;s.querySelector('.kbg__tabs').hidden=true;klaar.hidden=false;
  klaar.textContent='Dank u, '+naam.split(' ')[0]+'. U bent welkom bij '+l.naam+', '+l.adres+', '+(wanneer==='open'?'op zaterdag 14 november om '+gekozen:'op '+gekozen)+'. De bevestiging staat in uw mail ('+mail+').';});
kies('lombok');
}
init(document.querySelector('.jouw-container'));

More page examples

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 →