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 kaart die over de rand valt Nieuw

Hero voor een aannemer of installateur: grote projectfoto met daaroverheen een kaart "Verbouwplannen?" die over de onderrand in de volgende sectie valt, met een korte vraag, telefoonnummer en terugbelverzoek. Het tekstvak groeit mee met field-sizing:content (fallback: vaste 3 regels); staten fout, laden en succes zitten erin, meldingen via aria-live.

Jaren-dertigwoning in Haarlem in de steigers tijdens een renovatie

Bouwbedrijf Verhoef · Haarlem, sinds 1987

Verbouwen en renoveren in Haarlem en Zuid-Kennemerland

Uitbouw, dakopbouw en complete renovatie van jaren-dertigwoningen. Met een vaste prijs en een opleverdatum die in het contract staat.

Bekijk 48 projectenZo werken wij

Wat je van ons mag verwachten

58 van 64
opleveringen sinds 2021 op of vóór de datum uit het contract. De andere zes liepen gemiddeld 4 werkdagen uit.
Vaste prijs
Meerwerk alleen met jouw handtekening vooraf, met prijs per post op papier.
1 uitvoerder
Van sloop tot oplevering dezelfde persoon op de bouw, met zijn eigen 06-nummer.

Verbouwplannen?

Vertel in een zin wat je wilt. Jeroen, onze calculator, belt je binnen een werkdag terug.

Liever zelf bellen? 023 531 44 80

Demo

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 kaart die over de rand valt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bvh">
  <div class="bvh__hero">
    <img class="bvh__img" src="https://neddev.com/lab-media/hero-overlapkaart-1.webp" alt="Jaren-dertigwoning in Haarlem in de steigers tijdens een renovatie" loading="lazy">
    <div class="bvh__hero-in">
      <p class="bvh__kick">Bouwbedrijf Verhoef · Haarlem, sinds 1987</p>
      <h2 class="bvh__h">Verbouwen en renoveren in Haarlem en Zuid-Kennemerland</h2>
      <p class="bvh__lead">Uitbouw, dakopbouw en complete renovatie van jaren-dertigwoningen. Met een vaste prijs en een opleverdatum die in het contract staat.</p>
      <div class="bvh__btns"><a class="bvh__btn bvh__btn--pri" href="#">Bekijk 48 projecten</a><a class="bvh__btn bvh__btn--ghost" href="#">Zo werken wij</a></div>
    </div>
  </div>
  <div class="bvh__next">
    <div class="bvh__next-in">
      <div class="bvh__proof">
        <p class="bvh__eyebrow">Wat je van ons mag verwachten</p>
        <dl class="bvh__dl">
          <div><dt>58 van 64</dt><dd>opleveringen sinds 2021 op of vóór de datum uit het contract. De andere zes liepen gemiddeld 4 werkdagen uit.</dd></div>
          <div><dt>Vaste prijs</dt><dd>Meerwerk alleen met jouw handtekening vooraf, met prijs per post op papier.</dd></div>
          <div><dt>1 uitvoerder</dt><dd>Van sloop tot oplevering dezelfde persoon op de bouw, met zijn eigen 06-nummer.</dd></div>
        </dl>
      </div>
      <div class="bvh__card" role="region" aria-labelledby="bvh-ct">
        <div class="bvh__maat" aria-hidden="true"><span>Offerte binnen 5 werkdagen</span></div>
        <h3 id="bvh-ct" class="bvh__ct">Verbouwplannen?</h3>
        <p class="bvh__cp">Vertel in een zin wat je wilt. Jeroen, onze calculator, belt je binnen een werkdag terug.</p>
        <form class="bvh__form" novalidate>
          <label class="bvh__lbl" for="bvh-q">Wat wil je verbouwen?</label>
          <textarea id="bvh-q" class="bvh__ta" rows="3" maxlength="400" placeholder="Bijvoorbeeld: uitbouw van 3 meter aan de achterkant, keuken erin"></textarea>
          <label class="bvh__lbl" for="bvh-t">Telefoonnummer</label>
          <input id="bvh-t" class="bvh__in" type="tel" inputmode="tel" autocomplete="tel" placeholder="06 12 34 56 78">
          <p class="bvh__msg" aria-live="polite"></p>
          <button class="bvh__go" type="submit"><span class="bvh__spin" aria-hidden="true"></span><span class="bvh__go-t">Bel mij terug</span></button>
        </form>
        <div class="bvh__ok" hidden tabindex="-1"></div>
        <p class="bvh__tel">Liever zelf bellen? <a href="tel:+31235314480">023 531 44 80</a></p>
      </div>
    </div>
    <div class="bvh__demo"><span>Demo</span><button type="button" data-bvh="fout">Toon fout</button><button type="button" data-bvh="laden">Toon laden</button><button type="button" data-bvh="ok">Toon succes</button><button type="button" data-bvh="reset">Opnieuw</button></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 →