NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Hero met boekbalk als onderrand Nieuw

Fotohero voor evenementenlocatie of hotel met een boekbalk over de onderrand: datumbereik, aantal gasten en soort evenement. Toont laden, fout (einddatum vóór begindatum), leeg (te veel gasten) en resultaat met vrije zalen. Native date-inputs, geen datepicker-library; in productie koppel je de zoekactie aan je reserveringssysteem.

Ketelhuis van Remise Oost, gedekt voor een diner met lange tafels

Remise Oost · Zaandam · 3 zalen tot 650 gasten

Een zaal aan de Zaan voor uw jubileum, congres of personeelsfeest.

Voormalige tramremise uit 1911, 12 minuten van Amsterdam Centraal. Eigen keuken, gratis parkeren voor 140 auto’s.

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Hero met boekbalk als onderrand · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bbh">
  <div class="bbh__hero">
    <img class="bbh__img" src="https://neddev.com/lab-media/boekbalk-hero-rand-1.webp" alt="Ketelhuis van Remise Oost, gedekt voor een diner met lange tafels" loading="lazy">
    <div class="bbh__copy">
      <p class="bbh__eyebrow">Remise Oost · Zaandam · 3 zalen tot 650 gasten</p>
      <h2 class="bbh__h">Een zaal aan de Zaan voor uw jubileum, congres of personeelsfeest.</h2>
      <p class="bbh__lead">Voormalige tramremise uit 1911, 12 minuten van Amsterdam Centraal. Eigen keuken, gratis parkeren voor 140 auto’s.</p>
    </div>
  </div>
  <form class="bbh__bar" novalidate aria-label="Beschikbaarheid zoeken">
    <div class="bbh__f bbh__f--date"><label for="bbh-van">Van</label><input id="bbh-van" class="bbh__in" type="date" value="2026-11-13" min="2026-10-07" required></div>
    <div class="bbh__f bbh__f--date"><label for="bbh-tot">Tot en met</label><input id="bbh-tot" class="bbh__in" type="date" value="2026-11-13" min="2026-10-07" required aria-describedby="bbh-err"></div>
    <div class="bbh__f"><label for="bbh-n">Gasten</label>
      <div class="bbh__step"><button type="button" class="bbh__sb" data-d="-10" aria-label="10 gasten minder">-</button><input id="bbh-n" class="bbh__in bbh__num" type="number" inputmode="numeric" min="10" max="2000" step="10" value="120"><button type="button" class="bbh__sb" data-d="10" aria-label="10 gasten meer">+</button></div>
    </div>
    <div class="bbh__f"><label for="bbh-soort">Soort</label>
      <select id="bbh-soort" class="bbh__in"><option>Diner</option><option>Congres</option><option>Feest</option><option>Vergadering</option></select>
    </div>
    <button type="submit" class="bbh__go"><span class="bbh__spin" aria-hidden="true"></span><span class="bbh__go-lbl">Bekijk vrije zalen</span></button>
    <p class="bbh__err" id="bbh-err" role="alert"></p>
  </form>
  <div class="bbh__out" aria-live="polite">
    <p class="bbh__range"></p>
    <div class="bbh__res"></div>
  </div>
</div>
</div>

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →