Steeltje · bloemist, Leiden New

Complete homepage for a florist with web shop: the hero is a grid of this week's bouquets, followed by an order module with size, delivery day, postcode check and a gift card that writes along as you type. Plus this morning's auction, funeral and wedding work, delivery by cargo bike, a flower subscription and the shop with today highlighted.

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.

<!-- Steeltje · bloemist, Leiden · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="stl">
<div class="stl__top"><div class="stl__in stl__top-in">
  <p>Vóór 14:00 besteld is vandaag bezorgd in Leiden en de dorpen eromheen.</p>
  <p class="stl__top-r"><a href="tel:+31711234567">071 123 4567</a></p>
</div></div>

<div class="stl__head" role="banner"><div class="stl__in stl__head-in">
  <a href="#" class="stl__logo" aria-label="Steeltje, naar home">Steeltje</a>
  <nav class="stl__nav" aria-label="Hoofdmenu">
    <a href="#stl-bestel">Boeketten</a><a href="#stl-moment">Rouw en trouw</a><a href="#stl-moment">Planten</a><a href="#stl-abo">Abonnement</a><a href="#stl-bezorgen">Bezorgen</a><a href="#stl-winkel">Winkel</a>
  </nav>
  <a href="#stl-bestel" class="stl__mand" aria-live="polite">Mandje <span class="stl__mand-n">0</span></a>
  <button class="stl__menu-knop" type="button" aria-expanded="false" aria-controls="stl-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="stl__menu" id="stl-menu" hidden>
  <a href="#stl-bestel">Boeketten</a><a href="#stl-moment">Rouw en trouw</a><a href="#stl-moment">Planten</a><a href="#stl-abo">Abonnement</a><a href="#stl-bezorgen">Bezorgen</a><a href="#stl-winkel">Winkel</a>
</div>
</div>

<div class="stl__in">
<div class="stl__raster">
  <div class="stl__titel">
    <h1 class="stl__h1">Vers gebonden, vandaag bezorgd</h1>
    <p>Elke ochtend van de veiling in Rijnsburg, gebonden aan de Nieuwe Rijn. Kies een boeket uit het raster; wij binden hem zodra je bestelt.</p>
    <a href="#stl-bestel" class="stl__knop">Stel je boeket samen</a>
  </div>
  <a href="#stl-bestel" class="stl__tegel stl__t1" data-boeket="0"><img src="https://neddev.com/lab-media/site-bloemist-1.webp" alt="Herfstboeket met oranje dahlia's en roze tuinrozen in bruin papier" width="900" height="491"><span class="stl__tegel-tx"><b>Herfstveld</b> vanaf € 39,50</span></a>
  <a href="#stl-bestel" class="stl__tegel stl__t2" data-boeket="1"><img src="https://neddev.com/lab-media/site-bloemist-2.webp" alt="Wit boeket met anemonen en eucalyptus in een glazen vaas" width="900" height="491"><span class="stl__tegel-tx"><b>Wit en groen</b> vanaf € 36,50</span></a>
  <div class="stl__citaat">
    <p class="stl__citaat-tx">Na negen dagen staat hij er nog, en hij is alleen maar verder opengegaan.</p>
    <p class="stl__citaat-wie">Ria Verhoef, Oegstgeest, kreeg het Herfstveld op haar tachtigste.</p>
    <p class="stl__citaat-wie">Gemiddeld een 9,4 uit 1.212 beoordelingen op Kiyoh.</p>
  </div>
  <a href="#stl-bestel" class="stl__tegel stl__t3" data-boeket="2"><img src="https://neddev.com/lab-media/site-bloemist-3.webp" alt="Boeket met rode celosia en chrysanten, vastgehouden door de bloemist" width="900" height="491"><span class="stl__tegel-tx"><b>Fluweel</b> vanaf € 42,50</span></a>
  <a href="#stl-bestel" class="stl__tegel stl__t4" data-boeket="3"><img src="https://neddev.com/lab-media/site-bloemist-4.webp" alt="Droogboeket met pampas, hortensia en lagurus" width="900" height="491"><span class="stl__tegel-tx"><b>Droogbos</b> vanaf € 44,50</span></a>
  <a href="#stl-bestel" class="stl__tegel stl__t5" data-boeket="4"><img src="https://neddev.com/lab-media/site-bloemist-16.webp" alt="Bos oranje en gele trosschrysanten in een zinken emmer" width="590" height="491"><span class="stl__tegel-tx"><b>Oranje bos</b> vanaf € 29,50</span></a>
</div>
</div>

<div class="stl__bestel" id="stl-bestel"><div class="stl__in stl__bestel-in">
  <div class="stl__voorbeeld">
    <img class="stl__groot" src="https://neddev.com/lab-media/site-bloemist-1.webp" alt="Het gekozen boeket" width="900" height="491">
    <div class="stl__kaartje" aria-hidden="true"><p class="stl__kaartje-tx">Je kaartje verschijnt hier terwijl je typt.</p><p class="stl__kaartje-van">Steeltje, Leiden</p></div>
  </div>
  <form class="stl__form" novalidate>
    <h2 class="stl__h2">Jouw boeket</h2>
    <fieldset class="stl__veld"><legend>Welk boeket</legend>
      <div class="stl__keuzes stl__keuzes--boeket">
        <label><input type="radio" name="boeket" value="0" checked><img src="https://neddev.com/lab-media/site-bloemist-1.webp" alt="" width="900" height="491"><span>Herfstveld</span></label>
        <label><input type="radio" name="boeket" value="1"><img src="https://neddev.com/lab-media/site-bloemist-2.webp" alt="" width="900" height="491"><span>Wit en groen</span></label>
        <label><input type="radio" name="boeket" value="2"><img src="https://neddev.com/lab-media/site-bloemist-3.webp" alt="" width="900" height="491"><span>Fluweel</span></label>
        <label><input type="radio" name="boeket" value="3"><img src="https://neddev.com/lab-media/site-bloemist-4.webp" alt="" width="900" height="491"><span>Droogbos</span></label>
        <label><input type="radio" name="boeket" value="4"><img src="https://neddev.com/lab-media/site-bloemist-16.webp" alt="" width="590" height="491"><span>Oranje bos</span></label>
      </div>
    </fieldset>
    <fieldset class="stl__veld"><legend>Formaat</legend>
      <div class="stl__keuzes">
        <label><input type="radio" name="maat" value="0" checked><span>Klein, voor op tafel</span></label>
        <label><input type="radio" name="maat" value="12"><span>Middel, plus € 12</span></label>
        <label><input type="radio" name="maat" value="25"><span>Groot, voor een vloervaas, plus € 25</span></label>
      </div>
    </fieldset>
    <fieldset class="stl__veld"><legend>Bezorgdag</legend>
      <div class="stl__keuzes stl__dagen"></div>
    </fieldset>
    <label class="stl__label" for="stl-pc">Postcode van de ontvanger</label>
    <input class="stl__input" id="stl-pc" name="pc" inputmode="text" autocomplete="postal-code" placeholder="2312 JE" maxlength="7">
    <p class="stl__pc-uit" aria-live="polite">Vul een postcode in, dan zie je hoe hij komt.</p>
    <label class="stl__label" for="stl-tekst">Tekst op het kaartje <span class="stl__teller">0 van 160</span></label>
    <textarea class="stl__input stl__tekst" id="stl-tekst" name="tekst" maxlength="160" rows="3" placeholder="Van harte, lieve mam. Tot zondag!"></textarea>
    <p class="stl__som" aria-live="polite"></p>
    <button class="stl__knop stl__knop--vol" type="submit">In het mandje</button>
    <p class="stl__klaar" role="status" hidden></p>
  </form>
  <div class="stl__weten">
    <details><summary>Niemand thuis bij de ontvanger?</summary><p>Dan bellen we eerst het nummer dat je opgeeft. Lukt dat niet, dan gaat het boeket naar de buren en krijgt de ontvanger een kaartje in de bus. Nooit voor de deur.</p></details>
    <details><summary>Hoe lang blijft een boeket mooi?</summary><p>Zeven tot tien dagen als je om de twee dagen vers water geeft en de stelen schuin afsnijdt. Het Droogbos houdt het maanden. Verwelkt hij eerder, stuur een foto: dan binden we een nieuwe.</p></details>
  </div>
</div></div>

<div class="stl__in stl__veiling">
  <img class="stl__veiling-a" src="https://neddev.com/lab-media/site-bloemist-10.webp" alt="Emmers met verse rozen en anjers in de koelcel" width="900" height="491" loading="lazy">
  <div class="stl__veiling-tx">
    <h2 class="stl__h2">Om half zes op de veiling</h2>
    <p>Jolien rijdt elke ochtend naar Rijnsburg, zes kilometer verderop. Ze koopt wat er die dag goed is, niet wat in een catalogus staat. Daarom wisselen de boeketten per week.</p>
    <p>Deze week: dahlia's van een kweker uit Rijnsburg, amaranthus uit Noordwijkerhout, de laatste tuinrozen uit De Kwakel en trosschrysanten uit het Westland. Volgende week begint de amaryllis.</p>
    <p>Wat zaterdag om vijf uur over is, staat voor de halve prijs in de emmers buiten.</p>
    <img class="stl__veiling-b" src="https://neddev.com/lab-media/site-bloemist-7.webp" alt="Handen die een herfstboeket in bruin papier vouwen" width="900" height="491" loading="lazy">
  </div>
</div>

<div class="stl__moment" id="stl-moment"><div class="stl__in">
  <h2 class="stl__h2">Rouw, trouw en kantoor</h2>
  <div class="stl__mozaiek">
    <figure class="stl__m stl__m1"><img src="https://neddev.com/lab-media/site-bloemist-11.webp" alt="Lang laag rouwstuk van witte lelies en rozen" width="900" height="491" loading="lazy"><figcaption><h3 class="stl__h3">Rouwbloemwerk</h3><p>Binnen 24 uur bij de uitvaart, ook op zaterdag. Bel gerust; we denken mee over kleuren en de tekst op het lint. We bezorgen bij alle uitvaartcentra in Leiden en Oegstgeest.</p></figcaption></figure>
    <figure class="stl__m stl__m2"><img src="https://neddev.com/lab-media/site-bloemist-12.webp" alt="Bruidsboeket met roze tuinrozen en ranonkels" width="900" height="491" loading="lazy"><figcaption><h3 class="stl__h3">Bruiloft</h3><p>Bruidsboeket, corsages en tafelstukken uit één verhaal. Kennismaken kost niets.</p></figcaption></figure>
    <figure class="stl__m stl__m3"><img src="https://neddev.com/lab-media/site-bloemist-14.webp" alt="Hoog bloemstuk met takken en oranje rozen op een balie" width="900" height="491" loading="lazy"><figcaption><h3 class="stl__h3">Kantoor en balie</h3><p>Elke maandag een vers stuk, vanaf € 27,50 per week.</p></figcaption></figure>
    <figure class="stl__m stl__m4"><img src="https://neddev.com/lab-media/site-bloemist-6.webp" alt="Monstera en witte orchidee in terracotta potten bij het raam" width="900" height="491" loading="lazy"><figcaption><h3 class="stl__h3">Planten</h3><p>Groot en klein, met pot en een kaartje met hoe vaak ze water willen.</p></figcaption></figure>
    <figure class="stl__m stl__m5"><img src="https://neddev.com/lab-media/site-bloemist-13.webp" alt="Handen die herfstkransen maken van mos en droogbloemen" width="900" height="491" loading="lazy"><figcaption><h3 class="stl__h3">Kransen maken</h3><p>Zaterdag 8 november, 10:00 tot 12:30 in de winkel. € 47,50 met koffie en alles wat je nodig hebt, nog zes plaatsen.</p></figcaption></figure>
  </div>
</div></div>

<div class="stl__bezorgen" id="stl-bezorgen"><div class="stl__in stl__bezorgen-in">
  <img src="https://neddev.com/lab-media/site-bloemist-9.webp" alt="Bakfiets vol boeketten op een klinkerstraat in Leiden" width="900" height="491" loading="lazy">
  <div class="stl__bezorgen-tx">
    <h2 class="stl__h2">Op de bakfiets door Leiden</h2>
    <p>In Leiden, Oegstgeest, Leiderdorp en Voorschoten bezorgt Daan zelf, tussen 11:00 en 17:30. Voor € 4,95, en hij belt aan met het boeket in de hand.</p>
    <p>Verder weg gaat het boeket morgen met de koerier, in een doos met een waterzakje, voor € 7,95. Op zondag bezorgen we niet.</p>
    <p>Voor kantoren en praktijken in de binnenstad rijden we elke maandagochtend een vaste ronde.</p>
  </div>
</div></div>

<div class="stl__in stl__abo" id="stl-abo">
  <div class="stl__abo-tx">
    <h2 class="stl__h2">Elke vrijdag bloemen</h2>
    <p>Een abonnement is een boeket van de week, gekozen door ons. Opzeggen of een week overslaan kan tot woensdag. Het abonnementsboeket is iets groter dan een klein boeket uit de winkel.</p>
  </div>
  <div class="stl__abo-kies" role="group" aria-label="Kies hoe vaak">
    <div class="stl__keuzes">
      <label><input type="radio" name="stl-freq" value="4.33" checked><span>Elke week</span></label>
      <label><input type="radio" name="stl-freq" value="2.17"><span>Om de week</span></label>
      <label><input type="radio" name="stl-freq" value="1"><span>Eens per maand</span></label>
    </div>
    <p class="stl__abo-uit" aria-live="polite"></p>
    <a href="#stl-bestel" class="stl__knop">Begin met een abonnement</a>
  </div>
</div>

<div class="stl__winkel" id="stl-winkel"><div class="stl__in stl__winkel-in">
  <img class="stl__winkel-a" src="https://neddev.com/lab-media/site-bloemist-17.webp" alt="Gracht in Leiden met bootjes en herfstbomen" width="460" height="768" loading="lazy">
  <img class="stl__winkel-b" src="https://neddev.com/lab-media/site-bloemist-15.webp" alt="Bloemenwinkel met emmers bloemen op de stoep" width="938" height="518" loading="lazy">
  <div class="stl__winkel-tx">
    <h2 class="stl__h2">De winkel aan de Nieuwe Rijn</h2>
    <p>Nieuwe Rijn 41 in Leiden, tegenover de Burcht. Woensdag en zaterdag staat de markt voor de deur; dan zijn we er vanaf half negen. Binnen stellen we ook een bos samen terwijl je wacht; dat duurt een kwartier en je kijkt mee.</p>
    <ul class="stl__uren">
      <li data-dag="1">Maandag 12:00 tot 18:00</li>
      <li data-dag="2">Dinsdag 9:00 tot 18:00</li>
      <li data-dag="3">Woensdag 8:30 tot 18:00</li>
      <li data-dag="4">Donderdag 9:00 tot 20:00</li>
      <li data-dag="5">Vrijdag 9:00 tot 18:00</li>
      <li data-dag="6">Zaterdag 8:30 tot 17:00</li>
      <li data-dag="0">Zondag dicht</li>
    </ul>
  </div>
</div></div>

<div class="stl__voet" role="contentinfo"><div class="stl__in stl__voet-in">
  <p class="stl__voet-logo">Steeltje</p>
  <p>Steeltje Bloemen V.O.F., Nieuwe Rijn 41, 2312 JE Leiden. <a href="tel:+31711234567">071 123 4567</a>, <a href="mailto:winkel@voorbeeld.nl">winkel@voorbeeld.nl</a>. KvK 71234567, btw NL001234567B01. Aangesloten bij Florint.</p>
  <p class="stl__voet-links"><a href="#">Bezorgvoorwaarden</a> <a href="#">Privacy</a> <a href="#">Instagram</a></p>
</div></div>
</div>
</div>

/* Steeltje · bloemist, Leiden · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): pally@400,700 */
.stl{--bg:#0F1F18;--opp:#172B22;--tekst:#E9F1EC;--gedempt:#9DB3A7;--lijn:#24392F;--accent:#F2B5D4;--op-accent:#000;--r:8px;--fs1:13px;--fs2:15px;--fs3:18px;--fs4:24px;--fs5:36px;--fs6:60px;--sectie:clamp(48px,6vw,88px);--gat:clamp(16px,2vw,28px);--kader:1660px;--lees:720px;--zij:20px;
  background:var(--bg);color:var(--tekst);font-family:'Pally',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.stl *,.stl *::before,.stl *::after{box-sizing:border-box}
.stl [hidden]{display:none!important}
.stl img{display:block;max-width:100%;height:auto}
.stl a{color:inherit}
.stl p{margin:0}
.stl__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.stl__h1,.stl__h2,.stl__h3{font-weight:700;margin:0;line-height:1.08;letter-spacing:-.01em}
.stl__h1{font-size:var(--fs6)}
.stl__h2{font-size:var(--fs5);margin-bottom:var(--gat)}
.stl__h3{font-size:var(--fs3);margin:12px 0 4px}
.stl .stl__knop{display:inline-block;background:var(--accent);color:var(--op-accent);font:700 var(--fs2)/1 'Pally',sans-serif;padding:15px 22px;border-radius:var(--r);border:0;text-decoration:none;cursor:pointer;transition:background-color .18s}
.stl .stl__knop:hover{background:#F7CFE3}
.stl__knop:focus-visible,.stl a:focus-visible,.stl button:focus-visible,.stl input:focus-visible,.stl textarea:focus-visible,.stl summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.stl__top{background:var(--opp);font-size:var(--fs1);color:var(--gedempt)}
.stl__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.stl__top a{color:var(--tekst);text-decoration:none;font-weight:700}
.stl__head{position:sticky;top:0;z-index:5}
.stl__head>.stl__in,.stl__menu{background:var(--bg)}
.stl__head-in{display:flex;align-items:center;gap:28px;padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.stl__logo{font-size:var(--fs4);font-weight:700;text-decoration:none;color:var(--accent);margin-right:auto}
.stl__nav{display:flex;gap:24px}
.stl__nav a{text-decoration:none;color:var(--tekst);transition:color .18s}
.stl__nav a:hover{color:var(--accent)}
.stl__mand{text-decoration:none;border:1px solid var(--lijn);border-radius:var(--r);padding:8px 12px;font-weight:700}
.stl__mand-n{display:inline-block;min-width:22px;text-align:center;background:var(--accent);color:var(--op-accent);border-radius:4px;margin-left:4px}
.stl__menu-knop{display:none;width:42px;height:42px;background:none;border:1px solid var(--lijn);border-radius:var(--r);cursor:pointer;padding:0 10px}
.stl__menu-knop span{display:block;height:2px;background:var(--tekst);margin:6px 0}
.stl__menu{padding:8px 20px 20px;border-bottom:1px solid var(--lijn)}
.stl__menu a{display:block;padding:12px 0;text-decoration:none;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}

.stl__raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:200px;gap:10px;padding:16px 0 var(--sectie)}
.stl__titel{grid-column:1/6;grid-row:1/3;background:var(--opp);border-radius:var(--r);padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.stl__titel p{color:var(--gedempt);font-size:var(--fs3);max-width:30em}
.stl__titel .stl__knop{align-self:flex-start}
.stl__tegel{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;background:var(--opp)}
.stl__tegel img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.stl__tegel:hover img{transform:scale(1.03)}
.stl__tegel-tx{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background-image:linear-gradient(transparent,rgba(5,12,9,.82));color:#fff;font-size:var(--fs2)}
.stl__tegel-tx b{display:block;font-size:var(--fs3)}
.stl__t1{grid-column:6/10;grid-row:1/3}
.stl__t2{grid-column:10/13;grid-row:1/2}
.stl__citaat{grid-column:10/13;grid-row:2/3;background:var(--accent);color:var(--op-accent);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.stl__citaat-tx{font-size:var(--fs3);font-weight:700;line-height:1.3}
.stl__citaat-wie{font-size:var(--fs1)}
.stl__t3{grid-column:1/4;grid-row:3/5}
.stl__t4{grid-column:4/9;grid-row:3/5}
.stl__t5{grid-column:9/13;grid-row:3/5}

.stl__bestel{background:var(--opp)}
.stl__bestel-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);padding-top:var(--sectie);padding-bottom:var(--sectie)}
.stl__voorbeeld{position:sticky;top:96px;align-self:start}
.stl__groot{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.stl__kaartje{background:var(--accent);color:var(--op-accent);border-radius:var(--r);padding:18px 20px;margin:-34px 24px 0 auto;width:min(320px,80%);position:relative;transform:rotate(-2deg);transition:transform .2s}
.stl__kaartje-tx{font-size:var(--fs3);font-weight:700;line-height:1.35;min-height:2.7em;overflow-wrap:anywhere}
.stl__kaartje-van{font-size:var(--fs1);margin-top:10px}
.stl__form{display:flex;flex-direction:column;gap:10px;min-width:0}
.stl__veld{border:0;padding:0;margin:0 0 12px;min-width:0}
.stl__veld legend,.stl__label{font-weight:700;padding:0;margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;width:100%}
.stl__keuzes{display:flex;flex-wrap:wrap;gap:8px}
.stl__keuzes label{position:relative;cursor:pointer}
.stl__keuzes input{position:absolute;opacity:0;width:1px;height:1px}
.stl__keuzes span{display:block;border:1px solid var(--lijn);border-radius:var(--r);padding:10px 14px;background:var(--bg);transition:border-color .18s,background-color .18s}
.stl__keuzes label:hover span{border-color:var(--gedempt)}
.stl__keuzes input:checked+span,.stl__keuzes input:checked+img+span{border-color:var(--accent);background:var(--accent);color:var(--op-accent)}
.stl__keuzes input:focus-visible+span,.stl__keuzes input:focus-visible+img+span{outline:2px solid var(--accent);outline-offset:2px}
.stl__keuzes--boeket label{width:calc(20% - 7px);min-width:92px}
.stl__keuzes--boeket img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r) var(--r) 0 0}
.stl__keuzes--boeket span{border-radius:0 0 var(--r) var(--r);font-size:var(--fs1);padding:7px 8px}
.stl__input{width:100%;font:inherit;color:var(--tekst);background:var(--bg);border:1px solid var(--lijn);border-radius:var(--r);padding:12px 14px}
.stl__input::placeholder{color:var(--gedempt)}
.stl__tekst{resize:vertical}
.stl__teller{font-weight:400;color:var(--gedempt);font-size:var(--fs1)}
.stl__pc-uit{color:var(--gedempt);font-size:var(--fs1);margin-bottom:8px}
.stl__pc-uit.is-ok{color:var(--accent)}
.stl__som{font-size:var(--fs3);margin-top:8px}
.stl__som b{font-weight:700}
.stl__knop--vol{align-self:flex-start}
.stl__klaar{color:var(--accent);font-weight:700}
.stl__weten{grid-column:2;border-top:1px solid var(--lijn)}
.stl__weten details{border-bottom:1px solid var(--lijn)}
.stl__weten summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none}
.stl__weten summary::-webkit-details-marker{display:none}
.stl__weten summary::after{content:'+';float:right;color:var(--accent)}
.stl__weten details[open] summary::after{content:'\2212'}
.stl__weten details p{color:var(--gedempt);padding-bottom:16px;max-width:var(--lees)}

.stl__veiling{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);padding-top:var(--sectie);padding-bottom:var(--sectie);align-items:start}
.stl__veiling-a{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.stl__veiling-tx p{color:var(--gedempt);font-size:var(--fs3);margin-bottom:16px;max-width:var(--lees)}
.stl__veiling-b{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r);margin-top:var(--gat)}

.stl__moment{padding-bottom:var(--sectie)}
.stl__mozaiek{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gat) 12px}
.stl__m{margin:0}
.stl__m img{width:100%;object-fit:cover;border-radius:var(--r)}
.stl__m p{color:var(--gedempt);max-width:34em}
.stl__m1{grid-column:1/8;grid-row:1/3}.stl__m1 img{aspect-ratio:16/10}
.stl__m2{grid-column:8/13}.stl__m2 img{aspect-ratio:16/10}
.stl__m3{grid-column:8/13}.stl__m3 img{aspect-ratio:16/8}
.stl__m4{grid-column:1/5}.stl__m4 img{aspect-ratio:4/3}
.stl__m5{grid-column:5/13}.stl__m5 img{aspect-ratio:21/8}

.stl__bezorgen{background:var(--accent);color:var(--op-accent)}
.stl__bezorgen-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:var(--sectie);padding-bottom:var(--sectie)}
.stl__bezorgen img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r)}
.stl__bezorgen-tx p{font-size:var(--fs3);margin-bottom:14px}

.stl__abo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding-top:var(--sectie);padding-bottom:var(--sectie);border-bottom:1px solid var(--lijn)}
.stl__abo-tx p{color:var(--gedempt);font-size:var(--fs3);max-width:30em}
.stl__abo-kies{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.stl__abo-uit{font-size:var(--fs4);font-weight:700;line-height:1.3}

.stl__winkel-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(16px,2vw,28px);padding-top:var(--sectie);padding-bottom:var(--sectie);align-items:end}
.stl__winkel-a{width:100%;aspect-ratio:3/5;object-fit:cover;border-radius:var(--r)}
.stl__winkel-b{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.stl__winkel-tx p{color:var(--gedempt);margin-bottom:16px}
.stl__uren{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.stl__uren li{padding:7px 0;border-bottom:1px solid var(--lijn);color:var(--gedempt)}
.stl__uren li.is-vandaag{color:var(--accent);font-weight:700}

.stl__voet{background:var(--opp);font-size:var(--fs1);color:var(--gedempt)}
.stl__voet-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;padding-top:28px;padding-bottom:28px}
.stl__voet-logo{font-size:var(--fs4);font-weight:700;color:var(--accent)}
.stl__voet-in>p:nth-child(2){flex:1 1 380px}
.stl__voet-links{display:flex;flex-wrap:wrap;gap:8px 18px}

@media (max-width:1100px){
  .stl__nav{display:none}.stl__menu-knop{display:block}
}
@media (max-width:860px){
  .stl__raster{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .stl__titel{grid-column:1/-1;grid-row:auto}
  .stl__t1,.stl__t2,.stl__t3,.stl__t4,.stl__t5,.stl__citaat{grid-column:auto;grid-row:auto}
  .stl__t1{grid-column:1/-1}
  .stl__tegel{aspect-ratio:1}
  .stl__t1{aspect-ratio:16/11}
  .stl__citaat{grid-column:1/-1}
  .stl__bestel-in,.stl__veiling,.stl__bezorgen-in,.stl__abo{grid-template-columns:minmax(0,1fr)}
  .stl__voorbeeld{position:static}
  .stl__weten{grid-column:1}
  .stl__mozaiek{grid-template-columns:minmax(0,1fr)}
  .stl__m1,.stl__m2,.stl__m3,.stl__m4,.stl__m5{grid-column:1;grid-row:auto}
  .stl__m img{aspect-ratio:16/10}
  .stl__winkel-in{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .stl__winkel-tx{grid-column:1/-1}
  .stl__winkel-a,.stl__winkel-b{aspect-ratio:3/4}
}
@media (max-width:560px){
  .stl{--fs5:28px;--fs6:36px}
  .stl__top-r{display:none}
  .stl__in{padding:0 20px}
  .stl__head-in{gap:12px}
  .stl__keuzes--boeket label{width:calc(33.333% - 6px);min-width:0}
}
@media (prefers-reduced-motion:reduce){.stl *{transition:none!important}}

// Steeltje · bloemist, Leiden · © 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('.stl');if(!s)return;
var mk=s.querySelector('.stl__menu-knop'),menu=s.querySelector('#stl-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 B=[{n:'Herfstveld',p:39.5,f:'site-bloemist-1.webp'},{n:'Wit en groen',p:36.5,f:'site-bloemist-2.webp'},{n:'Fluweel',p:42.5,f:'site-bloemist-3.webp'},{n:'Droogbos',p:44.5,f:'site-bloemist-4.webp'},{n:'Oranje bos',p:29.5,f:'site-bloemist-16.webp'}];
var f=s.querySelector('.stl__form'),groot=s.querySelector('.stl__groot'),basis=groot.getAttribute('src').replace(/[^\/]+$/,'');
var euro=function(n){return '€ '+n.toFixed(2).replace('.',',');};
var DAG=['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'],MND=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
var nu=new Date(),dagen=s.querySelector('.stl__dagen'),h='',n=0,d=new Date(nu);
if(nu.getHours()>=14)d.setDate(d.getDate()+1);
while(n<4){if(d.getDay()!==0){var vandaag=d.toDateString()===nu.toDateString(),morgen=new Date(nu.getTime()+864e5).toDateString()===d.toDateString();
  var t=vandaag?'Vandaag':morgen?'Morgen':DAG[d.getDay()].charAt(0).toUpperCase()+DAG[d.getDay()].slice(1);
  h+='<label><input type="radio" name="dag" value="'+(vandaag?'v':'l')+'"'+(n===0?' checked':'')+' data-t="'+(vandaag?'vandaag':morgen?'morgen':DAG[d.getDay()]+' '+d.getDate()+' '+MND[d.getMonth()])+'"><span>'+t+' '+d.getDate()+' '+MND[d.getMonth()]+'</span></label>';n++;}
  d.setDate(d.getDate()+1);}
dagen.innerHTML=h;
var pcUit=s.querySelector('.stl__pc-uit'),som=s.querySelector('.stl__som'),kt=s.querySelector('.stl__kaartje-tx'),teller=s.querySelector('.stl__teller');
function gebied(pc){var m=pc.replace(/\s/g,'').match(/^(\d{4})([a-zA-Z]{2})?$/);if(!m)return null;var g=+m[1];
  if((g>=2311&&g<=2334)||(g>=2340&&g<=2343)||(g>=2351&&g<=2353)||(g>=2251&&g<=2253))return 'fiets';return 'koerier';}
function reken(){var b=B[+f.boeket.value],m=+f.maat.value,dg=f.querySelector('input[name=dag]:checked'),g=gebied(f.pc.value);
  groot.src=basis+b.f;
  var kosten=g==='koerier'?7.95:4.95,wanneer=dg?dg.getAttribute('data-t'):'';
  if(!f.pc.value.trim()){pcUit.textContent='Vul een postcode in, dan zie je hoe hij komt.';pcUit.className='stl__pc-uit';}
  else if(!g){pcUit.textContent='Dat lijkt geen postcode. Vier cijfers en twee letters, zoals 2312 JE.';pcUit.className='stl__pc-uit';}
  else if(g==='fiets'){pcUit.textContent='Binnen ons gebied: Daan brengt hem op de bakfiets, tussen 11:00 en 17:30.';pcUit.className='stl__pc-uit is-ok';}
  else{pcUit.textContent='Buiten Leiden en omstreken: de koerier brengt hem, de eerste dag is morgen.';pcUit.className='stl__pc-uit is-ok';if(dg&&dg.value==='v'){var vlg=f.querySelectorAll('input[name=dag]')[1];if(vlg){vlg.checked=true;wanneer=vlg.getAttribute('data-t');}}}
  var tot=b.p+m+kosten;
  som.innerHTML=b.n+', '+(m===0?'klein':m===12?'middel':'groot')+', '+wanneer+' bezorgd: <b>'+euro(tot)+'</b> inclusief '+euro(kosten)+' bezorgen.';
  var tx=f.tekst.value;teller.textContent=tx.length+' van 160';kt.textContent=tx.trim()?tx:'Je kaartje verschijnt hier terwijl je typt.';}
f.addEventListener('input',reken);f.addEventListener('change',reken);reken();
[].slice.call(s.querySelectorAll('.stl__tegel')).forEach(function(a){a.addEventListener('click',function(){var r=f.querySelector('input[name=boeket][value="'+a.getAttribute('data-boeket')+'"]');if(r){r.checked=true;reken();}});});
var mandN=s.querySelector('.stl__mand-n'),klaar=s.querySelector('.stl__klaar'),aantal=0;
f.addEventListener('submit',function(e){e.preventDefault();
  if(!gebied(f.pc.value)){pcUit.textContent='Vul eerst de postcode van de ontvanger in.';pcUit.className='stl__pc-uit';f.pc.focus();return;}
  aantal++;mandN.textContent=aantal;klaar.hidden=false;klaar.textContent=B[+f.boeket.value].n+' ligt in je mandje. Afrekenen kan met iDEAL, creditcard of op rekening voor bedrijven; we binden hem zodra je betaald hebt.';});
var abo=s.querySelector('.stl__abo-uit');
function aboR(){var v=+s.querySelector('input[name=stl-freq]:checked').value;abo.textContent='€ 32,50 per boeket, bezorging inbegrepen. Ongeveer '+euro(32.5*v)+' per maand.';}
[].slice.call(s.querySelectorAll('input[name=stl-freq]')).forEach(function(r){r.addEventListener('change',aboR);});aboR();
var vd=s.querySelector('.stl__uren li[data-dag="'+nu.getDay()+'"]');if(vd){vd.classList.add('is-vandaag');vd.textContent+=', vandaag';}
}
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 →