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

Topbalk met reviewscore en header met infoblokken Nieuw

Bovenkant voor een praktijk of winkel: smalle topbalk met reviewscore en aantal, werkgebied en spoednummer, daaronder een header met drie infoblokken (bellen, adres, openingstijden). De openingstijden rekenen live uit of je open bent en klappen uit tot een weekoverzicht (knop met aria-expanded, Esc sluit). Puur HTML/CSS plus een kleine klok in JS; zonder JS staan de vaste tijden er gewoon.

4,9uit 386 Google-reviews

Voor Maarssen, Breukelen, Oud-Zuilen en Utrecht-Noord

Spoed 24/7 0346 55 12 80
Afspraak maken

Oktober is gebitsmaand · gratis gebitscheck bij elke vaccinatie

Dierenarts in Maarssen, ook buiten kantoortijd bereikbaar

Vier dierenartsen en zes paraveterinairen voor honden, katten, konijnen en kleine huisdieren. Eigen operatiekamer, röntgen en echo in huis.

Dierenarts onderzoekt een beagle op de behandeltafel
Demo, zet de klok op

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.
<!-- Topbalk met reviewscore en header met infoblokken · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dkv">
  <div class="dkv__top">
    <div class="dkv__top-in">
      <a class="dkv__score" href="#" aria-label="Beoordeeld met 4,9 van 5 uit 386 Google-reviews">
        <span class="dkv__stars" aria-hidden="true"><svg viewBox="0 0 100 20"><defs><clipPath id="dkv-clip"><rect width="98" height="20"/></clipPath></defs><g class="dkv__st-bg"><path id="dkv-s" d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z"/><use href="#dkv-s" x="20"/><use href="#dkv-s" x="40"/><use href="#dkv-s" x="60"/><use href="#dkv-s" x="80"/></g><g class="dkv__st-fg" clip-path="url(#dkv-clip)"><use href="#dkv-s"/><use href="#dkv-s" x="20"/><use href="#dkv-s" x="40"/><use href="#dkv-s" x="60"/><use href="#dkv-s" x="80"/></g></svg></span>
        <b>4,9</b><span class="dkv__score-n">uit 386 Google-reviews</span>
      </a>
      <p class="dkv__area"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 18s-5.5-5.2-5.5-9.3a5.5 5.5 0 0 1 11 0C15.5 12.8 10 18 10 18z"/><circle cx="10" cy="8.6" r="2"/></svg>Voor Maarssen, Breukelen, Oud-Zuilen en Utrecht-Noord</p>
      <a class="dkv__spoed" href="tel:+31346551280"><span class="dkv__pulse" aria-hidden="true"></span>Spoed 24/7 <b>0346 55 12 80</b></a>
    </div>
  </div>
  <div class="dkv__head">
    <div class="dkv__head-in">
      <a class="dkv__logo" href="#" aria-label="Dierenkliniek De Vecht, naar de homepage">
        <svg viewBox="0 0 40 40" aria-hidden="true"><rect width="40" height="40" rx="9" fill="#0f4c47"/><path d="M9 13c4 0 6 3 7.5 7s3.5 9 3.5 9 2-5 3.5-9 3.5-7 7.5-7" fill="none" stroke="#f3ece1" stroke-width="2.6" stroke-linecap="round"/><path d="M8 29c6-2.2 18-2.2 24 0" fill="none" stroke="#d9643a" stroke-width="2.6" stroke-linecap="round"/></svg>
        <span><small>Dierenkliniek</small>De Vecht</span>
      </a>
      <ul class="dkv__info">
        <li><a class="dkv__blk" href="tel:+31346551200"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.2 2.8h2.6l1.3 3.6-1.8 1.2a9 9 0 0 0 5.1 5.1l1.2-1.8 3.6 1.3v2.6a1.6 1.6 0 0 1-1.7 1.6C9 15.9 4.1 11 3.6 4.5a1.6 1.6 0 0 1 1.6-1.7z"/></svg><span><small>Bel ons</small><b>0346 55 12 00</b></span></a></li>
        <li><a class="dkv__blk" href="#"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 18s-5.5-5.2-5.5-9.3a5.5 5.5 0 0 1 11 0C15.5 12.8 10 18 10 18z"/><circle cx="10" cy="8.6" r="2"/></svg><span><small>Adres · plan je route</small><b>Bisonspoor 1120, Maarssen</b></span></a></li>
        <li class="dkv__hrs">
          <button class="dkv__blk dkv__blk--btn" type="button" aria-expanded="false" aria-controls="dkv-week"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="M10 5.6V10l2.8 1.8"/></svg><span><small class="dkv__now"><i class="dkv__dot"></i><em>Openingstijden</em></small><b class="dkv__when">ma tot vr 08:00 tot 18:00</b></span><svg class="dkv__chev" viewBox="0 0 20 20" aria-hidden="true"><path d="M6 8l4 4 4-4"/></svg></button>
          <div id="dkv-week" class="dkv__week" hidden>
            <table><caption>Openingstijden balie en spreekuur</caption><tbody></tbody></table>
            <p>Buiten deze tijden: bel <a href="tel:+31346551280">0346 55 12 80</a>, er is altijd een dierenarts bereikbaar.</p>
          </div>
        </li>
      </ul>
      <a class="dkv__cta" href="#">Afspraak maken</a>
    </div>
  </div>
  <div class="dkv__nav"><ul class="dkv__nav-in"><li><a href="#" aria-current="page">Honden en katten</a></li><li><a href="#">Konijnen en knagers</a></li><li><a href="#">Vogels en reptielen</a></li><li><a href="#">Gebitszorg</a></li><li><a href="#">Tarieven</a></li><li><a href="#">Over de kliniek</a></li><li><a href="#">Contact</a></li></ul></div>
  <div class="dkv__hero">
    <div class="dkv__hero-in">
      <div>
        <p class="dkv__kick">Oktober is gebitsmaand · gratis gebitscheck bij elke vaccinatie</p>
        <h2 class="dkv__h">Dierenarts in Maarssen, ook buiten kantoortijd bereikbaar</h2>
        <p class="dkv__lead">Vier dierenartsen en zes paraveterinairen voor honden, katten, konijnen en kleine huisdieren. Eigen operatiekamer, röntgen en echo in huis.</p>
      </div>
      <img class="dkv__img" src="https://neddev.com/lab-media/topbalk-vertrouwen-1.webp" alt="Dierenarts onderzoekt een beagle op de behandeltafel" loading="lazy">
    </div>
  </div>
  <div class="dkv__demo"><span>Demo, zet de klok op</span><button type="button" data-dkv-t="nu" aria-pressed="true">nu</button><button type="button" data-dkv-t="2,17,35" aria-pressed="false">di 17:35</button><button type="button" data-dkv-t="6,13,0" aria-pressed="false">za 13:00</button><button type="button" data-dkv-t="0,10,0" aria-pressed="false">zo 10:00</button></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 →