Landingspagina warmtepomp · Hulshof Installatietechniek, Zwolle New
Ads landing page for an installer: the hero is a selector that instantly works out whether a hybrid or all-electric heat pump fits, with the price after subsidy. Then one quote form, reviews with name and district, certifications, FAQ and duotone photography.
HulshofInstallatietechniek
038 123 4567werkdagen 7:30 tot 17:00
Past een warmtepomp in uw huis?
Vier vragen, en u ziet meteen welke warmtepomp wij zouden plaatsen, wat hij kost na subsidie en wat u per jaar bespaart.
Ons advies: een hybride warmtepomp.
Rond 4.950 euro inclusief installatie. Na 2.125 euro ISDE-subsidie betaalt u 2.825 euro, en bij 1.400 m³ gas bespaart u ongeveer 520 euro per jaar.
Vraag de vaste prijs aanIndicatie op basis van 312 installaties in de regio Zwolle in 2025.
Hybride
Uw cv-ketel blijft hangen en springt alleen bij als het vriest. De warmtepomp doet de rest. Geschikt voor bijna elk huis, ook met gewone radiatoren. Plaatsing in één dag.
Vanaf 4.950 euro, na subsidie vanaf 2.825 euro
Volledig elektrisch
Geen gasaansluiting meer, ook warm water komt uit de pomp. Loont in huizen vanaf ongeveer 1992 met vloerverwarming of grote radiatoren. Twee tot drie dagen werk.
Vanaf 11.900 euro, na subsidie vanaf 8.500 euro
Van opname tot warm huis
Eerst komt Rik of Dennis bij u kijken: drie kwartier, gratis. Ze meten de radiatoren, kijken waar de buitenunit kan staan zonder dat de buren hem horen, en lezen uw verbruik uit. Binnen vijf werkdagen ligt er een vaste prijs, en die verandert niet meer.
Wij vragen de ISDE-subsidie voor u aan en regelen de melding bij de netbeheerder. U zet alleen een handtekening.
Van 1.640 naar 610 kuub gas in het eerste jaar. De monteurs waren om vijf uur weg en de keuken was schoner dan toen ze kwamen.
Ze zeiden eerlijk dat een volledig elektrische pomp in ons huis uit 1968 niet loont. Het werd een hybride, en dat klopte.
Vaste prijs, vaste dag, en de subsidie stond binnen zes weken op onze rekening.
InstallQ-erkend warmtepompinstallateur (BRL 6000-21) · F-gassengecertificeerd · lid van Techniek Nederland · 9,1 gemiddeld uit 312 beoordelingen op Klantenvertellen
We werken in Zwolle, Kampen, Hattem, Dalfsen, Heino en Wijhe. Binnen 25 kilometer van onze werkplaats aan de Rieteweg rekenen we geen voorrijkosten.
Wat mensen vooraf vragen
Is mijn huis wel goed genoeg geïsoleerd?
Voor een hybride bijna altijd. Voor volledig elektrisch kijken we bij de opname naar uw energielabel en de radiatoren. Is het huis er nog niet klaar voor, dan zeggen we dat, en wat er eerst moet gebeuren.
Hoeveel geluid maakt de buitenunit?
De units die wij plaatsen maken op drie meter afstand zo'n 35 dB, zachter dan een koelkast. We houden de regels voor de afstand tot de erfgrens aan en rekenen het vooraf voor u door.
Wie vraagt de ISDE-subsidie aan?
Wij, met uw machtiging. U krijgt het geld zelf op uw rekening, meestal binnen acht weken.
Wat als hij in januari stilvalt?
U belt ons storingsnummer, zeven dagen per week. Bij een hybride neemt de cv-ketel het intussen over. Op onderdelen zit zeven jaar garantie, op ons werk vijf.
Moet mijn oude ketel eruit?
Bij een hybride niet, zolang hij jonger is dan ongeveer twaalf jaar. Bij volledig elektrisch voeren wij hem af, zonder extra kosten.
Liever eerst iemand spreken? Bel 038 123 4567, u krijgt een monteur aan de lijn.
Vraag de vaste prijs aanHulshof Installatietechniek B.V.
Rieteweg 32, 8041 AL Zwolle
038 123 4567 · info@voorbeeld.nl
KvK 05081234 · btw NL812345678B01
Storingsdienst zeven dagen per week
How to use it
- Paste the HTML where the page examples 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.
<!-- Landingspagina warmtepomp · Hulshof Installatietechniek, Zwolle · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hwp">
<div class="hwp__kop" role="banner"><div class="hwp__in hwp__kop-in">
<a href="#" class="hwp__logo" aria-label="Hulshof Installatietechniek, naar home">Hulshof<span>Installatietechniek</span></a>
<p class="hwp__bel"><a href="tel:0381234567">038 123 4567</a><span>werkdagen 7:30 tot 17:00</span></p>
</div></div>
<div class="hwp__hero"><div class="hwp__in">
<div class="hwp__hero-top"><h1 class="hwp__h1">Past een warmtepomp in uw huis?</h1>
<p class="hwp__lead">Vier vragen, en u ziet meteen welke warmtepomp wij zouden plaatsen, wat hij kost na subsidie en wat u per jaar bespaart.</p></div>
<form class="hwp__hulp" aria-label="Keuzehulp warmtepomp">
<fieldset class="hwp__veld hwp__veld--type">
<legend>Soort woning</legend>
<div class="hwp__keus">
<label><input type="radio" name="type" value="tussen" checked><span>Tussenwoning</span></label>
<label><input type="radio" name="type" value="hoek"><span>Hoekwoning</span></label>
<label><input type="radio" name="type" value="kap"><span>Twee-onder-een-kap</span></label>
<label><input type="radio" name="type" value="vrij"><span>Vrijstaand</span></label>
</div>
</fieldset>
<label class="hwp__veld"><span class="hwp__lab">Bouwjaar</span>
<select name="jaar"><option value="1">voor 1975</option><option value="2" selected>1975 tot 1991</option><option value="3">1992 tot 2005</option><option value="4">na 2005</option></select>
</label>
<label class="hwp__veld"><span class="hwp__lab">Verwarming via</span>
<select name="afgifte"><option value="rad" selected>radiatoren</option><option value="deels">deels vloerverwarming</option><option value="vloer">overal vloerverwarming</option></select>
</label>
<label class="hwp__veld hwp__veld--gas"><span class="hwp__lab">Gasverbruik per jaar <output name="gasuit">1.400 m³</output></span>
<input type="range" name="gas" min="600" max="3000" step="100" value="1400">
</label>
</form>
<div class="hwp__uitkomst" aria-live="polite">
<p class="hwp__advies">Ons advies: <strong data-u="soort">een hybride warmtepomp</strong>.</p>
<p class="hwp__reken" data-u="zin">Rond 4.950 euro inclusief installatie. Na 2.125 euro ISDE-subsidie betaalt u 2.825 euro, en bij 1.400 m³ gas bespaart u ongeveer 520 euro per jaar.</p>
<p class="hwp__acties"><a href="#hwp-offerte" class="hwp__knop">Vraag de vaste prijs aan</a><span class="hwp__klein">Indicatie op basis van 312 installaties in de regio Zwolle in 2025.</span></p>
</div>
</div></div>
<div class="hwp__in"><figure class="hwp__dt hwp__breed"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-1.webp" alt="Buitenunit van een warmtepomp tegen de achtergevel van een rijtjeshuis in Zwolle" width="1376" height="768"></figure></div>
<div class="hwp__soorten"><div class="hwp__in hwp__soorten-in">
<div class="hwp__soort hwp__soort--a">
<figure class="hwp__dt"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-2.webp" alt="Monteur sluit de leidingen van een buitenunit aan" width="900" height="491" loading="lazy"></figure>
<h2 class="hwp__h2">Hybride</h2>
<p>Uw cv-ketel blijft hangen en springt alleen bij als het vriest. De warmtepomp doet de rest. Geschikt voor bijna elk huis, ook met gewone radiatoren. Plaatsing in één dag.</p>
<p class="hwp__prijs">Vanaf 4.950 euro, na subsidie vanaf 2.825 euro</p>
</div>
<div class="hwp__soort hwp__soort--b">
<figure class="hwp__dt"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-3.webp" alt="Binnenunit met boilervat in een bijkeuken" width="900" height="491" loading="lazy"></figure>
<h2 class="hwp__h2">Volledig elektrisch</h2>
<p>Geen gasaansluiting meer, ook warm water komt uit de pomp. Loont in huizen vanaf ongeveer 1992 met vloerverwarming of grote radiatoren. Twee tot drie dagen werk.</p>
<p class="hwp__prijs">Vanaf 11.900 euro, na subsidie vanaf 8.500 euro</p>
</div>
</div></div>
<div class="hwp__gang"><div class="hwp__in hwp__gang-in">
<div class="hwp__gang-txt">
<h2 class="hwp__h2">Van opname tot warm huis</h2>
<p>Eerst komt Rik of Dennis bij u kijken: drie kwartier, gratis. Ze meten de radiatoren, kijken waar de buitenunit kan staan zonder dat de buren hem horen, en lezen uw verbruik uit. Binnen vijf werkdagen ligt er een vaste prijs, en die verandert niet meer.</p>
<p>Wij vragen de ISDE-subsidie voor u aan en regelen de melding bij de netbeheerder. U zet alleen een handtekening.</p>
</div>
<figure class="hwp__dt hwp__gang-1"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-9.webp" alt="Twee monteurs dragen een buitenunit door een achtertuin" width="900" height="491" loading="lazy"></figure>
<figure class="hwp__dt hwp__gang-2"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-7.webp" alt="Bus van Hulshof met geopende achterdeuren en ingerichte stellingen" width="900" height="491" loading="lazy"></figure>
</div></div>
<div class="hwp__bewijs"><div class="hwp__in hwp__bewijs-in">
<figure class="hwp__dt hwp__bewijs-foto"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-8.webp" alt="Ellen en Joost Brinkman aan de keukentafel" width="900" height="491" loading="lazy"></figure>
<blockquote class="hwp__quote hwp__quote--groot">
<p>Van 1.640 naar 610 kuub gas in het eerste jaar. De monteurs waren om vijf uur weg en de keuken was schoner dan toen ze kwamen.</p>
<footer>Ellen en Joost Brinkman, Assendorp, Zwolle</footer>
</blockquote>
<div class="hwp__quotes">
<blockquote class="hwp__quote"><p>Ze zeiden eerlijk dat een volledig elektrische pomp in ons huis uit 1968 niet loont. Het werd een hybride, en dat klopte.</p><footer>Gert Kamphuis, Dalfsen</footer></blockquote>
<blockquote class="hwp__quote"><p>Vaste prijs, vaste dag, en de subsidie stond binnen zes weken op onze rekening.</p><footer>Ayla Demir, Stadshagen, Zwolle</footer></blockquote>
</div>
<p class="hwp__keur">InstallQ-erkend warmtepompinstallateur (BRL 6000-21) · F-gassengecertificeerd · lid van Techniek Nederland · 9,1 gemiddeld uit 312 beoordelingen op Klantenvertellen</p>
</div></div>
<div class="hwp__offerte" id="hwp-offerte"><div class="hwp__in hwp__offerte-in">
<form class="hwp__form" novalidate>
<h2 class="hwp__h2">Vaste prijs binnen vijf werkdagen</h2>
<p class="hwp__p">Laat uw gegevens achter. We bellen dezelfde werkdag om de opname te plannen.</p>
<label class="hwp__f"><span>Naam</span><input name="naam" autocomplete="name" required></label>
<label class="hwp__f"><span>Telefoon</span><input name="tel" type="tel" autocomplete="tel" required></label>
<label class="hwp__f"><span>Postcode en huisnummer</span><input name="adres" autocomplete="postal-code" placeholder="8021 AB 12" required></label>
<label class="hwp__f"><span>Waar denkt u aan?</span><select name="keus"><option>Hybride warmtepomp</option><option>Volledig elektrisch</option><option>Weet ik nog niet</option></select></label>
<p class="hwp__fout" hidden>Vul uw naam, een telefoonnummer en uw postcode in.</p>
<button class="hwp__knop" type="submit">Plan mijn gratis opname</button>
<p class="hwp__klaar" hidden></p>
</form>
<div class="hwp__offerte-beeld">
<figure class="hwp__dt"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-5.webp" alt="Monteur controleert de druk van een warmtepomp met een manometer" width="900" height="491" loading="lazy"></figure>
<p class="hwp__p">We werken in Zwolle, Kampen, Hattem, Dalfsen, Heino en Wijhe. Binnen 25 kilometer van onze werkplaats aan de Rieteweg rekenen we geen voorrijkosten.</p>
<figure class="hwp__dt"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-4.webp" alt="Rij jaren-zestigwoningen in Zwolle" width="900" height="491" loading="lazy"></figure>
</div>
</div></div>
<div class="hwp__faq"><div class="hwp__in hwp__faq-in">
<h2 class="hwp__h2">Wat mensen vooraf vragen</h2>
<div class="hwp__vragen">
<details><summary>Is mijn huis wel goed genoeg geïsoleerd?</summary><p>Voor een hybride bijna altijd. Voor volledig elektrisch kijken we bij de opname naar uw energielabel en de radiatoren. Is het huis er nog niet klaar voor, dan zeggen we dat, en wat er eerst moet gebeuren.</p></details>
<details><summary>Hoeveel geluid maakt de buitenunit?</summary><p>De units die wij plaatsen maken op drie meter afstand zo'n 35 dB, zachter dan een koelkast. We houden de regels voor de afstand tot de erfgrens aan en rekenen het vooraf voor u door.</p></details>
<details><summary>Wie vraagt de ISDE-subsidie aan?</summary><p>Wij, met uw machtiging. U krijgt het geld zelf op uw rekening, meestal binnen acht weken.</p></details>
<details><summary>Wat als hij in januari stilvalt?</summary><p>U belt ons storingsnummer, zeven dagen per week. Bij een hybride neemt de cv-ketel het intussen over. Op onderdelen zit zeven jaar garantie, op ons werk vijf.</p></details>
<details><summary>Moet mijn oude ketel eruit?</summary><p>Bij een hybride niet, zolang hij jonger is dan ongeveer twaalf jaar. Bij volledig elektrisch voeren wij hem af, zonder extra kosten.</p></details>
</div>
<figure class="hwp__dt hwp__faq-foto"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-6.webp" alt="Vloerverwarmingsleidingen in een woonkamer voor het storten van de dekvloer" width="900" height="491" loading="lazy"></figure>
<figure class="hwp__dt hwp__faq-foto2"><img src="https://neddev.com/lab-media/page-landing-warmtepomp-10.webp" alt="Oude cv-ketel op een zolder voor de vervanging" width="900" height="491" loading="lazy"></figure>
</div></div>
<div class="hwp__slot"><div class="hwp__in hwp__slot-in">
<p class="hwp__slot-txt">Liever eerst iemand spreken? Bel <a href="tel:0381234567">038 123 4567</a>, u krijgt een monteur aan de lijn.</p>
<a href="#hwp-offerte" class="hwp__knop hwp__knop--licht">Vraag de vaste prijs aan</a>
</div></div>
<div class="hwp__voet" role="contentinfo"><div class="hwp__in hwp__voet-in">
<p><strong>Hulshof Installatietechniek B.V.</strong><br>Rieteweg 32, 8041 AL Zwolle<br><a href="tel:0381234567">038 123 4567</a> · <a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></p>
<p>KvK 05081234 · btw NL812345678B01<br>Storingsdienst zeven dagen per week</p>
<p><a href="#">Privacyverklaring</a> · <a href="#">Algemene voorwaarden</a></p>
</div></div>
</div>
</div>/* Landingspagina warmtepomp · Hulshof Installatietechniek, Zwolle · NedDev · eigen werk. */
/* fonts (Fontshare): erode@400,600 */
.hwp{--bg:#FFD8B0;--opp:#FFE8D1;--tekst:#24160A;--gedempt:#5E4128;--lijn:#F0BF8F;--accent:#0A4F5C;--op-accent:#FFFFFF;--r:0;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:48px;--fs6:84px;--sectie:clamp(48px,6vw,96px);--gat:clamp(20px,3vw,48px);--kader:1660px;--lees:720px;--zij:20px;
container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Erode',serif;font-weight:400;font-size:var(--fs2);line-height:1.6;-webkit-font-smoothing:antialiased}
.hwp *,.hwp *::before,.hwp *::after{box-sizing:border-box}
.hwp [hidden]{display:none!important}
.hwp :where(p,h1,h2,figure,blockquote,fieldset){margin:0}
.hwp a{color:inherit}
.hwp img{display:block;max-width:100%}
.hwp__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,64px)}
.hwp__kop{border-bottom:1px solid var(--lijn)}
.hwp__kop-in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:76px}
.hwp__logo{text-decoration:none;font-weight:600;font-size:var(--fs4);line-height:1;display:flex;align-items:baseline;gap:10px}
.hwp__logo span{font-size:var(--fs1);font-weight:400;color:var(--gedempt)}
.hwp__bel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3}
.hwp__bel a{font-weight:600;font-size:var(--fs3);text-decoration:none}
.hwp__bel a:hover{color:var(--accent)}
.hwp__bel span{font-size:var(--fs1);color:var(--gedempt)}
.hwp__hero{padding:clamp(40px,5vw,64px) 0 clamp(40px,4vw,56px)}
.hwp__h1{font-weight:600;font-size:var(--fs6);line-height:1;letter-spacing:-.02em;max-width:17ch}
.hwp__hero-top{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gat);align-items:end}
.hwp__hero-top .hwp__h1{max-width:none;text-wrap:balance}
.hwp__lead{font-size:var(--fs3);max-width:40ch;color:var(--gedempt)}
.hwp__hulp{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;border-top:2px solid var(--tekst);border-bottom:1px solid var(--lijn)}
.hwp__veld{display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px 0;border:0;min-width:0}
.hwp__veld + .hwp__veld{padding-left:24px;border-left:1px solid var(--lijn)}
.hwp__veld legend,.hwp__lab{font-size:var(--fs1);color:var(--gedempt);padding:0;display:flex;justify-content:space-between;gap:8px}
.hwp__veld legend{float:left;width:100%;margin-bottom:10px}
.hwp__lab output{color:var(--tekst);font-weight:600}
.hwp__keus{display:flex;flex-wrap:wrap;gap:6px;clear:both}
.hwp__keus label{cursor:pointer}
.hwp__keus input{position:absolute;opacity:0;pointer-events:none}
.hwp__keus span{display:block;padding:10px 14px;border:1px solid var(--tekst);font-size:var(--fs1);transition:background .15s,color .15s}
.hwp__keus input:checked + span{background:var(--tekst);color:var(--bg)}
.hwp__keus input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.hwp select,.hwp input:not([type=radio]):not([type=range]){font:inherit;font-size:var(--fs2);color:var(--tekst);background:var(--opp);border:1px solid var(--tekst);border-radius:var(--r);padding:11px 12px;width:100%;min-height:46px}
.hwp input[type=range]{width:100%;accent-color:var(--accent);height:44px}
.hwp__uitkomst{padding-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1100px}
.hwp__advies{font-size:var(--fs4);line-height:1.25}
.hwp__advies strong{font-weight:600}
.hwp__reken{font-size:var(--fs3);max-width:62ch}
.hwp__acties{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:8px}
.hwp__klein{font-size:var(--fs1);color:var(--gedempt)}
.hwp__knop{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--accent);color:var(--op-accent);border:0;border-radius:var(--r);font:inherit;font-weight:600;font-size:var(--fs2);text-decoration:none;cursor:pointer;transition:background .15s}
.hwp__knop:hover{background:var(--tekst)}
.hwp__knop--licht{background:var(--bg);color:var(--tekst)}
.hwp__knop--licht:hover{background:var(--opp)}
.hwp__dt{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.hwp__dt img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply}
.hwp__dt::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:lighten;pointer-events:none}
.hwp__breed{aspect-ratio:10/3}
.hwp__soorten{padding:var(--sectie) 0}
.hwp__soorten-in{display:grid;grid-template-columns:7fr 5fr;gap:var(--gat);align-items:start}
.hwp__soort p{max-width:52ch;margin-top:12px}
.hwp__soort .hwp__h2{margin-top:24px}
.hwp__soort--a .hwp__dt{aspect-ratio:3/2}
.hwp__soort--b{margin-top:clamp(0px,5vw,64px)}
.hwp__soort--b > .hwp__dt:first-child{aspect-ratio:4/3}
.hwp__h2{font-weight:600;font-size:var(--fs5);line-height:1.05;letter-spacing:-.015em}
.hwp__prijs{font-weight:600;font-size:var(--fs3);border-top:1px solid var(--tekst);padding-top:12px}
.hwp__soort .hwp__prijs{margin-top:20px}
.hwp__gang{background:var(--opp);padding:var(--sectie) 0}
.hwp__gang-in{display:grid;grid-template-columns:5fr 4fr 3fr;gap:var(--gat);align-items:end}
.hwp__gang-txt p{margin-top:16px;max-width:48ch}
.hwp__gang-1{aspect-ratio:5/4}
.hwp__gang-2{aspect-ratio:1/1;margin-bottom:clamp(0px,6vw,96px)}
.hwp__bewijs{padding:var(--sectie) 0}
.hwp__bewijs-in{display:grid;grid-template-columns:4fr 8fr;gap:var(--gat) calc(var(--gat)*1.5)}
.hwp__bewijs-foto{grid-row:span 2;aspect-ratio:1/1}
.hwp__quote p{font-size:var(--fs3)}
.hwp__quote footer{margin-top:10px;font-size:var(--fs1);color:var(--gedempt)}
.hwp__quote--groot p{font-size:var(--fs5);line-height:1.1;font-weight:600;letter-spacing:-.01em}
.hwp__quotes{display:grid;grid-template-columns:1fr 1fr;gap:var(--gat);border-top:1px solid var(--tekst);padding-top:24px;align-self:end}
.hwp__keur{grid-column:1 / -1;font-size:var(--fs1);color:var(--gedempt);border-top:1px solid var(--lijn);padding-top:16px}
.hwp__offerte{background:var(--accent);color:var(--op-accent);padding:var(--sectie) 0}
.hwp__offerte-in{display:grid;grid-template-columns:6fr 5fr;gap:calc(var(--gat)*1.5);align-items:start}
.hwp__form{display:grid;gap:16px;max-width:620px}
.hwp__form .hwp__p{margin-bottom:8px}
.hwp__p{max-width:52ch}
.hwp__f{display:grid;gap:6px;font-size:var(--fs1)}
.hwp__offerte select,.hwp__offerte input{background:var(--op-accent)!important;border-color:var(--op-accent)!important}
.hwp__offerte .hwp__knop{background:var(--bg);color:var(--tekst);justify-self:start}
.hwp__offerte .hwp__knop:hover{background:var(--op-accent)}
.hwp__fout{background:var(--bg);color:var(--tekst);padding:10px 14px;font-size:var(--fs1)}
.hwp__klaar{font-size:var(--fs4);line-height:1.3}
.hwp__offerte-beeld{display:grid;gap:20px}
.hwp__offerte-beeld .hwp__dt:first-child{aspect-ratio:16/10}
.hwp__offerte-beeld .hwp__dt:last-child{aspect-ratio:16/7;width:80%;justify-self:end}
.hwp__faq{padding:var(--sectie) 0}
.hwp__faq-in{display:grid;grid-template-columns:4fr 6fr 3fr;gap:var(--gat);align-items:start}
.hwp__faq-in > h2{grid-row:span 2}
.hwp__vragen{grid-row:span 2}
.hwp__faq-foto2{aspect-ratio:3/2}
.hwp__vragen details{border-top:1px solid var(--tekst)}
.hwp__vragen details:last-child{border-bottom:1px solid var(--tekst)}
.hwp__vragen summary{cursor:pointer;list-style:none;padding:14px 40px 14px 0;font-size:var(--fs3);font-weight:600;position:relative}
.hwp__vragen summary::-webkit-details-marker{display:none}
.hwp__vragen summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:var(--fs4);font-weight:400;transition:transform .2s}
.hwp__vragen details[open] summary::after{transform:rotate(45deg)}
.hwp__vragen summary:hover{color:var(--accent)}
.hwp__vragen details p{padding:0 0 20px;max-width:60ch}
.hwp__faq-foto{aspect-ratio:1/1;margin-top:8px}
.hwp__slot{border-top:2px solid var(--tekst);padding:28px 0}
.hwp__slot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.hwp__slot-txt{font-size:var(--fs4);line-height:1.25;max-width:32ch}
.hwp__slot .hwp__knop--licht{background:var(--accent);color:var(--op-accent)}
.hwp__slot .hwp__knop--licht:hover{background:var(--tekst)}
.hwp__voet{background:var(--tekst);color:var(--bg);padding:48px 0 56px;font-size:var(--fs1)}
.hwp__voet-in{display:flex;flex-wrap:wrap;gap:24px 64px}
.hwp__voet a{color:var(--bg)}
@container (max-width:900px){
.hwp__hero-top{grid-template-columns:1fr}
.hwp__hulp{grid-template-columns:1fr 1fr}
.hwp__veld--type{grid-column:1 / -1}
.hwp__veld + .hwp__veld{padding-left:0;border-left:0}
.hwp__veld:nth-child(3){padding-left:20px;border-left:1px solid var(--lijn)}
.hwp__veld--gas{grid-column:1 / -1;border-top:1px solid var(--lijn)}
.hwp__soorten-in,.hwp__offerte-in,.hwp__bewijs-in{grid-template-columns:1fr}
.hwp__soort--b{margin-top:24px}
.hwp__gang-in{grid-template-columns:1fr 1fr}
.hwp__gang-txt{grid-column:1 / -1}
.hwp__gang-2{margin-bottom:0}
.hwp__bewijs-foto{grid-row:auto;aspect-ratio:16/10}
.hwp__faq-in{grid-template-columns:1fr}
.hwp__faq-foto,.hwp__faq-foto2{display:none}
.hwp__faq-in > h2,.hwp__vragen{grid-row:auto}
}
@container (max-width:560px){
.hwp > *{--fs4:24px;--fs5:34px;--fs6:40px}
.hwp__kop-in{min-height:64px}
.hwp__logo span{display:none}
.hwp__bel a{font-size:var(--fs2)}
.hwp__hulp{grid-template-columns:1fr}
.hwp__veld:nth-child(3){padding-left:0;border-left:0}
.hwp__veld{padding:16px 0}
.hwp__veld + .hwp__veld{border-top:1px solid var(--lijn)}
.hwp__breed{aspect-ratio:4/3}
.hwp__offerte-beeld .hwp__dt:last-child{width:100%}
.hwp__quotes{grid-template-columns:1fr}
.hwp__quote--groot p{font-size:var(--fs4)}
.hwp__gang-in{grid-template-columns:1fr}
.hwp__knop{width:100%}
}
@media (prefers-reduced-motion:reduce){.hwp *{transition:none!important}}// Landingspagina warmtepomp · Hulshof Installatietechniek, Zwolle · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.hwp');if(!s)return;
var f=s.querySelector('.hwp__hulp'),soort=s.querySelector('[data-u=soort]'),zin=s.querySelector('[data-u=zin]'),out=f.querySelector('output');
var keuzeOfferte=s.querySelector('.hwp__form select[name=keus]');
function eur(n){return String(Math.round(n/5)*5).replace(/\B(?=(\d{3})+(?!\d))/g,'.');}
function reken(){
var type=f.querySelector('input[name=type]:checked').value,jaar=+f.jaar.value,afg=f.afgifte.value,gas=+f.gas.value;
out.textContent=eur(gas)+' m³';
var elektrisch=jaar>=3&&(afg!=='rad'||jaar===4)&&gas<=1800;
var prijs,isde,bespaar;
if(elektrisch){prijs={tussen:11900,hoek:12400,kap:13900,vrij:15400}[type];isde=3400;bespaar=gas*0.62+290;}
else{prijs={tussen:4950,hoek:4950,kap:5450,vrij:5450}[type];isde=2125;bespaar=gas*0.37;}
var netto=prijs-isde,jaren=Math.round(netto/bespaar);
soort.textContent=elektrisch?'een volledig elektrische warmtepomp':'een hybride warmtepomp';
zin.textContent='Rond '+eur(prijs)+' euro inclusief installatie. Na '+eur(isde)+' euro ISDE-subsidie betaalt u '+eur(netto)+' euro, en bij '+eur(gas)+' m³ gas bespaart u ongeveer '+eur(bespaar)+' euro per jaar. Dat is in '+jaren+' jaar terugverdiend.'+(jaar===1&&!elektrisch?' Bij een huis van voor 1975 raden we eerst spouwmuur- en vloerisolatie aan.':'');
if(keuzeOfferte)keuzeOfferte.selectedIndex=elektrisch?1:0;
}
f.addEventListener('input',reken);f.addEventListener('change',reken);f.addEventListener('submit',function(e){e.preventDefault();});reken();
var form=s.querySelector('.hwp__form'),fout=form.querySelector('.hwp__fout'),klaar=form.querySelector('.hwp__klaar');
form.addEventListener('submit',function(e){e.preventDefault();
var ok=form.naam.value.trim()&&form.tel.value.replace(/\D/g,'').length>=10&&/\d{4}\s?[a-z]{2}/i.test(form.adres.value);
fout.hidden=!!ok;if(!ok)return;
[].slice.call(form.querySelectorAll('label,button,.hwp__p')).forEach(function(x){x.hidden=true;});
var nu=new Date(),wd=nu.getDay()>0&&nu.getDay()<6&&nu.getHours()<16;
klaar.hidden=false;klaar.textContent='Dank u, '+form.naam.value.trim().split(' ')[0]+'. '+(wd?'We bellen u vandaag nog':'We bellen u de volgende werkdag')+' om de opname te plannen. Uw keuze staat genoteerd: '+form.keus.value.toLowerCase()+'.';});
}
init(document.querySelector('.jouw-container'));More page examples
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 →