NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Hero met kaart die over de rand valt New

Contractor hero: large project photo with a "Plans to renovate?" card overlapping into the next section, with a short question, phone number and callback request. The textarea grows with field-sizing:content (fallback: fixed 3 rows); error, loading and success states included, announced 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

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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>

More page sections

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 →