Waterman Installatietechniek · loodgieter en installateur, Rotterdam New
Complete homepage for a plumber with emergency service: the promise on the left, a call-back form on the right that gives arrival time per postcode and first advice per problem, what you can do yourself per fault, work with fixed prices, the engineers who ring your bell and this week's job sheets as proof.
Spoedlijn open. Twee monteurs onderweg, nu gemiddeld 41 minuten tot aan je deur.
Kantoor ma tot vr 8:00 tot 17:00
Binnen het uur aan de deur
Lekkage, verstopping of geen warm water in Rotterdam en omstreken. Dag en nacht, ook op zondag. Je betaalt een vast voorrijtarief en hoort de prijs voordat we beginnen.
Gaslucht? Bel eerst de netbeheerder op 0800 9009, gratis en altijd bereikbaar.
Wat je nu zelf kunt doen
Draai de hoofdkraan dicht. Die zit bijna altijd bij de watermeter, in de meterkast of onder de trap.
Zet de stoppen van de verdieping met de lekkage uit als er water langs lampen of stopcontacten loopt. Maak foto's voor je verzekeraar voordat je gaat dweilen; wij leveren een lekrapport dat de meeste verzekeraars zonder vragen accepteren.
Stop met doorspoelen en giet geen ontstopper in een afvoer die al vol staat.
Staat alleen de wc vol, dan helpt een plopper vaak al. Komt het water omhoog in de douche als je doortrekt, dan zit het dieper in de standleiding. Dat is werk voor de veer of de camera, en ontstoppen kost overdag een vaste 145 euro.
Kijk eerst naar de waterdruk op de ketel. Staat die onder de 1 bar, dan kun je hem zelf bijvullen.
Gebruik de vulkraan onder de ketel tot de meter tussen 1,5 en 2 bar staat. Gaat de druk binnen een dag weer omlaag, dan lekt er ergens iets. Geeft het schermpje een storingscode, noem die dan aan de telefoon: dan nemen we het juiste onderdeel meteen mee.
Wat we doen, en wat het kost
Lekkage zoeken en dichten
Met een vochtmeter en warmtecamera, zonder de halve vloer open te breken.
voorrijden 59 euro, dan 72 euro per uur
Afvoer en riool ontstoppen
Wc, gootsteen, douche of de hoofdriolering. Camera-inspectie zit erbij als het nodig is.
vast 145 euro overdag
Cv-ketel vervangen
Een nieuwe hr-ketel binnen vijf werkdagen, oude ketel mee, tien jaar garantie.
vanaf 2.290 euro inclusief montage
Hybride warmtepomp
Naast je bestaande ketel. We regelen de ISDE-subsidieaanvraag voor je.
vanaf 4.950 euro, voor subsidie
Badkamer van leiding tot tegel
Eén aanspreekpunt, eigen tegelzetter, gemiddeld twaalf werkdagen.
vanaf 9.800 euro
Avond, nacht en weekend: voorrijden 95 euro. Alle prijzen inclusief btw.
Negen van de tien keer in één bezoek
Elke bus heeft ruim 1.400 onderdelen aan boord: fittingen, sifons, kranen, pompen en de printplaten van de vijf meest gebruikte ketels. Daardoor hoef je zelden een tweede keer vrij te nemen.
Moet er toch iets besteld worden, dan maken we het lek eerst veilig dicht en komen we binnen twee werkdagen terug. Die tweede rit rekenen we niet.
Wie er bij je aanbelt
Deze week
Een greep uit de werkbonnen, met wat de klant erover schreef. Gemiddeld 9,2 uit 1.180 beoordelingen sinds 2021.
Maandag 23:40 · Blijdorp · lekkende cv-leiding onder de vloer · 38 minuten tot aan de deur
"Om half twaalf 's avonds stond er binnen drie kwartier iemand op de stoep. Hij heeft eerst de vloer droog gezogen voordat hij aan het werk ging."
Marloes Tak
Dinsdag 10:15 · Kralingen · verstopte standleiding in een portiekflat · vast tarief
"Drie buren met water in de douche. Sanne liet ons de camerabeelden zien: een doek van een schoonmaakdienst."
VvE Oudedijk 140
Donderdag 7:50 · Schiedam · geen warm water, ketel op storing · onderdeel uit de bus
"Om acht uur gebeld, om negen uur stond ik onder de douche."
Henk Bosman
Rotterdam, Schiedam, Vlaardingen, Capelle aan den IJssel, Krimpen, Barendrecht en Ridderkerk. Daarbuiten verwijzen we je door naar een collega die we kennen.
Waterman Installatietechniek B.V. · Zaagmolenkade 52, 3035 KD Rotterdam · monteur@voorbeeld.nl
KvK 24123456 · btw NL815234567B01 · Lid Techniek Nederland · VCA* · Erkend leerbedrijf SBB · Privacy · Voorwaarden
How to use it
- Paste the HTML where the complete websites 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.
<!-- Waterman Installatietechniek · loodgieter en installateur, Rotterdam · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="wmi">
<div class="wmi__top"><div class="wmi__in wmi__top-in">
<p><span class="wmi__stip" aria-hidden="true"></span><span class="wmi__status">Spoedlijn open. Twee monteurs onderweg, nu gemiddeld 41 minuten tot aan je deur.</span></p>
<p class="wmi__top-r">Kantoor ma tot vr 8:00 tot 17:00</p>
</div></div>
<div class="wmi__kop" role="banner"><div class="wmi__in wmi__kop-in">
<a href="#" class="wmi__logo" aria-label="Waterman Installatietechniek, naar home">Waterman</a>
<nav class="wmi__nav" aria-label="Hoofdmenu">
<a href="#wmi-nu">Spoed</a><a href="#wmi-nu">Lekkage</a><a href="#wmi-werk">Verstopping</a><a href="#wmi-werk">Cv-ketel</a><a href="#wmi-werk">Badkamer</a><a href="#wmi-mensen">Over ons</a>
</nav>
<a href="tel:0101234567" class="wmi__bel">010 123 4567</a>
<button class="wmi__menuknop" type="button" aria-expanded="false" aria-controls="wmi-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="wmi__menu" id="wmi-menu" hidden>
<a href="#wmi-nu">Spoed</a><a href="#wmi-nu">Lekkage</a><a href="#wmi-werk">Verstopping</a><a href="#wmi-werk">Cv-ketel</a><a href="#wmi-werk">Badkamer</a><a href="#wmi-mensen">Over ons</a>
</div>
</div>
<div class="wmi__held"><div class="wmi__in wmi__held-in">
<div class="wmi__belofte">
<h1 class="wmi__h1">Binnen het uur aan de deur</h1>
<p class="wmi__lead">Lekkage, verstopping of geen warm water in Rotterdam en omstreken. Dag en nacht, ook op zondag. Je betaalt een vast voorrijtarief en hoort de prijs voordat we beginnen.</p>
<p class="wmi__belnr"><a href="tel:0101234567">010 123 4567</a></p>
<p class="wmi__klein">Gaslucht? Bel eerst de netbeheerder op 0800 9009, gratis en altijd bereikbaar.</p>
</div>
<form class="wmi__form" id="wmi-form" novalidate>
<h2 class="wmi__h3">Wij bellen jou terug</h2>
<fieldset class="wmi__wanneer"><legend class="wmi__vh">Wanneer</legend>
<label><input type="radio" name="wanneer" value="nu" checked><span>Nu, het is spoed</span></label>
<label><input type="radio" name="wanneer" value="later"><span>Afspraak plannen</span></label>
</fieldset>
<label class="wmi__veld">Wat is er aan de hand?
<select name="probleem">
<option value="lek">Lekkage</option><option value="verstopt">Verstopping</option><option value="warm">Geen warm water of verwarming</option><option value="anders">Iets anders</option>
</select>
</label>
<div class="wmi__twee">
<label class="wmi__veld">Postcode<input name="postcode" inputmode="text" autocomplete="postal-code" placeholder="3021 AB" maxlength="7"></label>
<label class="wmi__veld">Telefoon<input name="tel" type="tel" autocomplete="tel" placeholder="06 12 34 56 78"></label>
</div>
<p class="wmi__schat" aria-live="polite">Vul je postcode in, dan zie je hoe snel we er zijn.</p>
<p class="wmi__fout" hidden></p>
<button type="submit" class="wmi__knop">Bel mij terug</button>
<div class="wmi__klaar" hidden aria-live="polite"><p class="wmi__klaar-kop"></p><p class="wmi__klaar-tip"></p></div>
</form>
</div></div>
<div class="wmi__band"><img src="https://neddev.com/lab-media/site-loodgieter-1.webp" alt="Monteur knielt onder een badkamermeubel en sluit de afvoer aan" width="1408" height="768"></div>
<div class="wmi__nu" id="wmi-nu"><div class="wmi__in">
<h2 class="wmi__h2">Wat je nu zelf kunt doen</h2>
<div class="wmi__tabs" role="tablist" aria-label="Soort storing">
<button type="button" role="tab" id="wmi-t1" aria-controls="wmi-p1" aria-selected="true">Lekkage</button>
<button type="button" role="tab" id="wmi-t2" aria-controls="wmi-p2" aria-selected="false" tabindex="-1">Verstopping</button>
<button type="button" role="tab" id="wmi-t3" aria-controls="wmi-p3" aria-selected="false" tabindex="-1">Geen warm water</button>
</div>
<div class="wmi__paneel" role="tabpanel" id="wmi-p1" aria-labelledby="wmi-t1">
<img src="https://neddev.com/lab-media/site-loodgieter-11.webp" alt="Waterkring op een wit plafond met een emmer eronder" width="900" height="491" loading="lazy">
<div><p class="wmi__groot">Draai de hoofdkraan dicht. Die zit bijna altijd bij de watermeter, in de meterkast of onder de trap.</p>
<p>Zet de stoppen van de verdieping met de lekkage uit als er water langs lampen of stopcontacten loopt. Maak foto's voor je verzekeraar voordat je gaat dweilen; wij leveren een lekrapport dat de meeste verzekeraars zonder vragen accepteren.</p></div>
</div>
<div class="wmi__paneel" role="tabpanel" id="wmi-p2" aria-labelledby="wmi-t2" hidden>
<img src="https://neddev.com/lab-media/site-loodgieter-6.webp" alt="Monteur ontstopt de afvoer onder een keukenaanrecht met een veer" width="900" height="491" loading="lazy">
<div><p class="wmi__groot">Stop met doorspoelen en giet geen ontstopper in een afvoer die al vol staat.</p>
<p>Staat alleen de wc vol, dan helpt een plopper vaak al. Komt het water omhoog in de douche als je doortrekt, dan zit het dieper in de standleiding. Dat is werk voor de veer of de camera, en ontstoppen kost overdag een vaste 145 euro.</p></div>
</div>
<div class="wmi__paneel" role="tabpanel" id="wmi-p3" aria-labelledby="wmi-t3" hidden>
<img src="https://neddev.com/lab-media/site-loodgieter-3.webp" alt="Monteur werkt aan een geopende cv-ketel op zolder" width="900" height="491" loading="lazy">
<div><p class="wmi__groot">Kijk eerst naar de waterdruk op de ketel. Staat die onder de 1 bar, dan kun je hem zelf bijvullen.</p>
<p>Gebruik de vulkraan onder de ketel tot de meter tussen 1,5 en 2 bar staat. Gaat de druk binnen een dag weer omlaag, dan lekt er ergens iets. Geeft het schermpje een storingscode, noem die dan aan de telefoon: dan nemen we het juiste onderdeel meteen mee.</p></div>
</div>
</div></div>
<div class="wmi__werk" id="wmi-werk"><div class="wmi__in">
<h2 class="wmi__h2">Wat we doen, en wat het kost</h2>
<ul class="wmi__rijen">
<li><img src="https://neddev.com/lab-media/site-loodgieter-11.webp" alt="" width="900" height="491" loading="lazy"><h3 class="wmi__h3">Lekkage zoeken en dichten</h3><p>Met een vochtmeter en warmtecamera, zonder de halve vloer open te breken.</p><p class="wmi__prijs">voorrijden 59 euro, dan 72 euro per uur</p></li>
<li><img src="https://neddev.com/lab-media/site-loodgieter-6.webp" alt="" width="900" height="491" loading="lazy"><h3 class="wmi__h3">Afvoer en riool ontstoppen</h3><p>Wc, gootsteen, douche of de hoofdriolering. Camera-inspectie zit erbij als het nodig is.</p><p class="wmi__prijs">vast 145 euro overdag</p></li>
<li><img src="https://neddev.com/lab-media/site-loodgieter-3.webp" alt="" width="900" height="491" loading="lazy"><h3 class="wmi__h3">Cv-ketel vervangen</h3><p>Een nieuwe hr-ketel binnen vijf werkdagen, oude ketel mee, tien jaar garantie.</p><p class="wmi__prijs">vanaf 2.290 euro inclusief montage</p></li>
<li><img src="https://neddev.com/lab-media/site-loodgieter-12.webp" alt="" width="900" height="491" loading="lazy"><h3 class="wmi__h3">Hybride warmtepomp</h3><p>Naast je bestaande ketel. We regelen de ISDE-subsidieaanvraag voor je.</p><p class="wmi__prijs">vanaf 4.950 euro, voor subsidie</p></li>
<li><img src="https://neddev.com/lab-media/site-loodgieter-4.webp" alt="" width="900" height="491" loading="lazy"><h3 class="wmi__h3">Badkamer van leiding tot tegel</h3><p>Eén aanspreekpunt, eigen tegelzetter, gemiddeld twaalf werkdagen.</p><p class="wmi__prijs">vanaf 9.800 euro</p></li>
</ul>
<p class="wmi__noot">Avond, nacht en weekend: voorrijden 95 euro. Alle prijzen inclusief btw.</p>
</div></div>
<div class="wmi__bus"><div class="wmi__in wmi__bus-in">
<img class="wmi__bus-a" src="https://neddev.com/lab-media/site-loodgieter-13.webp" alt="Volle bedrijfsbus met rekken fittingen, koperen buis en gereedschap" width="900" height="491" loading="lazy">
<div class="wmi__bus-txt">
<h2 class="wmi__h2">Negen van de tien keer in één bezoek</h2>
<p>Elke bus heeft ruim 1.400 onderdelen aan boord: fittingen, sifons, kranen, pompen en de printplaten van de vijf meest gebruikte ketels. Daardoor hoef je zelden een tweede keer vrij te nemen.</p>
<p>Moet er toch iets besteld worden, dan maken we het lek eerst veilig dicht en komen we binnen twee werkdagen terug. Die tweede rit rekenen we niet.</p>
</div>
<img class="wmi__bus-b" src="https://neddev.com/lab-media/site-loodgieter-14.webp" alt="Witte bedrijfsbus in een Rotterdamse straat" width="900" height="491" loading="lazy">
</div></div>
<div class="wmi__mensen" id="wmi-mensen"><div class="wmi__in">
<h2 class="wmi__h2">Wie er bij je aanbelt</h2>
<div class="wmi__portretten">
<figure><img src="https://neddev.com/lab-media/site-loodgieter-9.webp" alt="Ruud Waterman in de werkplaats tussen koperen buizen" width="768" height="1376" loading="lazy"><figcaption><strong>Ruud Waterman</strong> Begon in 1998 in Crooswijk en doet nog steeds elke maandag de nachtdienst.</figcaption></figure>
<figure><img src="https://neddev.com/lab-media/site-loodgieter-7.webp" alt="Monteur Karim staat in een voordeur" width="848" height="1264" loading="lazy"><figcaption><strong>Karim el Idrissi</strong> Cv-ketels en warmtepompen. Spreekt Nederlands, Arabisch en Frans.</figcaption></figure>
<figure><img src="https://neddev.com/lab-media/site-loodgieter-8.webp" alt="Monteur Sanne met gereedschapskist in een trappenhuis" width="768" height="1376" loading="lazy"><figcaption><strong>Sanne de Groot</strong> Lekkages en badkamers. Vindt een lek meestal binnen twintig minuten.</figcaption></figure>
<figure><img src="https://neddev.com/lab-media/site-loodgieter-10.webp" alt="Leerling-monteur Daan naast de bus" width="768" height="1376" loading="lazy"><figcaption><strong>Daan Visser</strong> Tweedejaars leerling, rijdt mee met Karim.</figcaption></figure>
</div>
</div></div>
<div class="wmi__bonnen"><div class="wmi__in wmi__bonnen-in">
<div>
<h2 class="wmi__h2">Deze week</h2>
<p>Een greep uit de werkbonnen, met wat de klant erover schreef. Gemiddeld 9,2 uit 1.180 beoordelingen sinds 2021.</p>
</div>
<ul class="wmi__bonlijst">
<li><p class="wmi__bon-wat">Maandag 23:40 · Blijdorp · lekkende cv-leiding onder de vloer · 38 minuten tot aan de deur</p><p>"Om half twaalf 's avonds stond er binnen drie kwartier iemand op de stoep. Hij heeft eerst de vloer droog gezogen voordat hij aan het werk ging."</p><p class="wmi__wie">Marloes Tak</p></li>
<li><p class="wmi__bon-wat">Dinsdag 10:15 · Kralingen · verstopte standleiding in een portiekflat · vast tarief</p><p>"Drie buren met water in de douche. Sanne liet ons de camerabeelden zien: een doek van een schoonmaakdienst."</p><p class="wmi__wie">VvE Oudedijk 140</p></li>
<li><p class="wmi__bon-wat">Donderdag 7:50 · Schiedam · geen warm water, ketel op storing · onderdeel uit de bus</p><p>"Om acht uur gebeld, om negen uur stond ik onder de douche."</p><p class="wmi__wie">Henk Bosman</p></li>
</ul>
</div></div>
<div class="wmi__voet" role="contentinfo"><div class="wmi__in">
<div class="wmi__voet-boven">
<p class="wmi__voet-nr"><a href="tel:0101234567">010 123 4567</a></p>
<p>Rotterdam, Schiedam, Vlaardingen, Capelle aan den IJssel, Krimpen, Barendrecht en Ridderkerk. Daarbuiten verwijzen we je door naar een collega die we kennen.</p>
</div>
<div class="wmi__voet-onder">
<p>Waterman Installatietechniek B.V. · Zaagmolenkade 52, 3035 KD Rotterdam · <a href="mailto:monteur@voorbeeld.nl">monteur@voorbeeld.nl</a></p>
<p>KvK 24123456 · btw NL815234567B01 · Lid Techniek Nederland · VCA* · Erkend leerbedrijf SBB · <a href="#">Privacy</a> · <a href="#">Voorwaarden</a></p>
</div>
</div></div>
</div>
</div>/* Waterman Installatietechniek · loodgieter en installateur, Rotterdam · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): zodiak@700 + supreme@400 */
.wmi{--bg:#FFD8B0;--opp:#FFE8D1;--tekst:#24160A;--gedempt:#5E4128;--lijn:#F0BF8F;--accent:#0A4F5C;--op-accent:#FFFFFF;--r:4px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:44px;--fs6:72px;--sectie:clamp(72px,9vw,128px);--gat:clamp(20px,2.5vw,36px);--kader:1660px;--lees:720px;--zij:20px;
container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Supreme',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.55;-webkit-font-smoothing:antialiased}
.wmi *{box-sizing:border-box}
.wmi [hidden]{display:none!important}
.wmi a{color:inherit;text-underline-offset:4px}
.wmi img{display:block;max-width:100%;height:auto}
.wmi p{margin:0 0 14px}
.wmi__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.wmi__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wmi__top{background:var(--accent);color:#fff;font-size:var(--fs1)}
.wmi__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.wmi__top p{margin:0;display:flex;align-items:center;gap:10px}
.wmi__stip{width:9px;height:9px;border-radius:50%;background:#7DE0B0;flex:none;animation:wmi-puls 2s ease-in-out infinite}
@keyframes wmi-puls{50%{opacity:.35}}
.wmi__kop{position:sticky;top:0;z-index:20}
.wmi__kop-in{display:flex;align-items:center;gap:32px;height:76px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.wmi__logo{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs4);text-decoration:none;margin-right:auto;line-height:1;padding:12px 0}
.wmi__nav{display:flex;gap:24px}
.wmi__nav a{text-decoration:none;transition:color .18s}
.wmi__nav a:hover{color:var(--accent)}
.wmi__bel{background:var(--accent);color:#fff!important;text-decoration:none;padding:12px 18px;border-radius:var(--r);white-space:nowrap;transition:background-color .18s}
.wmi__bel:hover{background:#06363F}
.wmi__menuknop{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px}
.wmi__menuknop span{display:block;height:2px;background:var(--tekst)}
.wmi__menu{display:flex;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--lijn);padding:8px var(--zij) 20px}
.wmi__menu a{padding:12px 0;font-size:var(--fs3);text-decoration:none;border-bottom:1px solid var(--lijn)}
.wmi__held-in{display:grid;grid-template-columns:7fr 5fr;gap:72px;padding-top:64px;padding-bottom:64px;align-items:start}
.wmi__h1{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs6);line-height:1;letter-spacing:-.02em;margin:0 0 24px;max-width:9em}
.wmi__lead{font-size:var(--fs3);max-width:30em}
.wmi__belnr{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs5);line-height:1.1;margin:28px 0 10px!important}
.wmi__belnr a{text-decoration:none;white-space:nowrap;color:var(--accent)}
.wmi__belnr a:hover{text-decoration:underline}
.wmi__klein{font-size:var(--fs1);color:var(--gedempt)}
.wmi__form{background:var(--opp);padding:32px;border-radius:var(--r);display:grid;gap:16px;border:1px solid var(--lijn)}
.wmi__h2{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs5);line-height:1.05;letter-spacing:-.015em;margin:0 0 24px}
.wmi__h3{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs4);line-height:1.15;margin:0}
.wmi__wanneer{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--accent);border-radius:var(--r);overflow:hidden}
.wmi__wanneer label{position:relative;cursor:pointer}
.wmi__wanneer input{position:absolute;opacity:0}
.wmi__wanneer span{display:block;text-align:center;padding:11px 8px;transition:background-color .18s,color .18s}
.wmi__wanneer input:checked+span{background:var(--accent);color:#fff}
.wmi__wanneer input:focus-visible+span{outline:2px solid var(--tekst);outline-offset:-4px}
.wmi__veld{display:grid;gap:6px;font-size:var(--fs1)}
.wmi__veld input,.wmi__veld select{font:inherit;font-size:var(--fs2);padding:12px;border:1px solid #D9A779;border-radius:var(--r);background:#fff;color:var(--tekst);width:100%;min-width:0}
.wmi__veld input:focus,.wmi__veld select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.wmi__twee{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wmi__schat{font-size:var(--fs2);margin:0!important;color:var(--accent)}
.wmi__fout{color:#9B2C0A;margin:0!important}
.wmi__knop{font:inherit;background:var(--accent);color:#fff;border:0;border-radius:var(--r);padding:15px 22px;cursor:pointer;transition:background-color .18s}
.wmi__knop:hover{background:#06363F}
.wmi__klaar-kop{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs3)}
.wmi__band img{width:100%;aspect-ratio:1408/560;object-fit:cover;object-position:50% 55%}
.wmi__nu{padding:96px 0 72px}
.wmi__tabs{display:flex;gap:28px;border-bottom:1px solid var(--lijn);margin-bottom:32px;overflow-x:auto}
.wmi__tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;font:inherit;font-size:var(--fs3);padding:10px 0;color:var(--gedempt);cursor:pointer;white-space:nowrap;transition:color .18s,border-color .18s}
.wmi__tabs button[aria-selected=true]{color:var(--tekst);border-color:var(--accent)}
.wmi__tabs button:focus-visible{outline:2px solid var(--accent)}
.wmi__paneel{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
.wmi__paneel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.wmi__paneel p{max-width:34em}
.wmi__groot{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs4);line-height:1.25;margin-bottom:20px!important}
.wmi__werk{background:var(--opp);padding:96px 0 72px}
.wmi__rijen{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.wmi__rijen li{display:grid;grid-template-columns:160px 4fr 5fr 3fr;gap:32px;align-items:center;padding:16px 0;border-bottom:1px solid var(--lijn)}
.wmi__rijen img{width:160px;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.wmi__rijen p{margin:0}
.wmi__rijen .wmi__h3{font-size:var(--fs3)}
.wmi__prijs{text-align:right;color:var(--accent)}
.wmi__noot{font-size:var(--fs1);color:var(--gedempt);margin-top:16px!important}
.wmi__bus{padding:96px 0}
.wmi__bus-in{display:grid;grid-template-columns:5fr 4fr 3fr;gap:var(--gat);align-items:end}
.wmi__bus-a{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.wmi__bus-b{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.wmi__bus-txt{align-self:center}
.wmi__bus-txt p{max-width:28em}
.wmi__mensen{background:var(--accent);color:#fff;padding:96px 0 72px}
.wmi__portretten{display:grid;grid-template-columns:5fr 4fr 4fr 3fr;gap:var(--gat);align-items:start}
.wmi__portretten figure{margin:0}
.wmi__portretten img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);margin-bottom:14px}
.wmi__portretten figure:nth-child(2){margin-top:64px}
.wmi__portretten figure:nth-child(4){margin-top:120px}
.wmi__portretten figcaption{font-size:var(--fs1);color:#CFE4E7;max-width:24em}
.wmi__portretten strong{display:block;font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs3);color:#fff;margin-bottom:4px}
.wmi__bonnen{padding:96px 0}
.wmi__bonnen-in{display:grid;grid-template-columns:4fr 8fr;gap:72px}
.wmi__bonnen-in>div p{max-width:24em}
.wmi__bonlijst{list-style:none;margin:0;padding:0}
.wmi__bonlijst li{padding:22px 0;border-top:1px solid var(--tekst)}
.wmi__bonlijst li:last-child{border-bottom:1px solid var(--tekst)}
.wmi__bon-wat{font-size:var(--fs1);color:var(--gedempt);margin-bottom:8px!important}
.wmi__bonlijst li p:nth-child(2){font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs3);line-height:1.35;max-width:34em}
.wmi__wie{font-size:var(--fs1);margin:0!important}
.wmi__voet{background:var(--tekst);color:#F3E2CF;padding:72px 0 28px}
.wmi__voet-boven{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:end;padding-bottom:40px;border-bottom:1px solid #4A3420}
.wmi__voet-nr{font-family:'Zodiak',serif;font-weight:700;font-size:var(--fs6);line-height:1;margin:0!important}
.wmi__voet-nr a{text-decoration:none;color:var(--bg);white-space:nowrap}
.wmi__voet-onder{padding-top:20px;font-size:var(--fs1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 32px}
.wmi__voet-onder p{margin:0}
@container (max-width:1060px){
.wmi__nav{display:none}
.wmi__menuknop{display:flex}
.wmi__kop-in{gap:12px}
.wmi__held-in,.wmi__paneel,.wmi__bonnen-in,.wmi__voet-boven{grid-template-columns:1fr}
.wmi__held-in{gap:40px;padding-top:40px}
.wmi__h1{font-size:var(--fs5)}
.wmi__rijen li{grid-template-columns:120px 1fr;gap:6px 20px}
.wmi__rijen img{width:120px;grid-row:span 3}
.wmi__prijs{text-align:left}
.wmi__bus-in{grid-template-columns:1fr 1fr}
.wmi__bus-txt{grid-column:1/-1;order:-1}
.wmi__portretten{grid-template-columns:1fr 1fr}
.wmi__portretten figure:nth-child(n){margin-top:0}
.wmi__voet-nr{font-size:var(--fs5)}
.wmi__bonnen-in{gap:24px}
}
@container (max-width:560px){
.wmi__top-r{display:none!important}
.wmi__bel{padding:10px 12px;font-size:var(--fs1)}
.wmi__logo{font-size:var(--fs3)}
.wmi__h1{font-size:40px}
.wmi__h2{font-size:var(--fs4)}
.wmi__belnr{font-size:var(--fs4)}
.wmi__form{padding:20px}
.wmi__twee{grid-template-columns:1fr}
.wmi__band img{aspect-ratio:4/3}
.wmi__rijen li{grid-template-columns:1fr}
.wmi__rijen img{width:100%;grid-row:auto;aspect-ratio:16/9}
.wmi__groot{font-size:var(--fs3)}
.wmi__tabs{gap:18px}
.wmi__tabs button{font-size:var(--fs2)}
.wmi__voet-nr{font-size:var(--fs4)}
}
@media (prefers-reduced-motion:reduce){.wmi *{transition:none!important;animation:none!important}}// Waterman Installatietechniek · loodgieter en installateur, Rotterdam · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.wmi');if(!s)return;
var knop=s.querySelector('.wmi__menuknop'),menu=s.querySelector('.wmi__menu');
knop.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;knop.setAttribute('aria-expanded',String(open));knop.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
menu.addEventListener('click',function(e){if(e.target.closest('a')){menu.hidden=true;knop.setAttribute('aria-expanded','false');knop.setAttribute('aria-label','Menu openen');}});
var f=s.querySelector('.wmi__form'),schat=s.querySelector('.wmi__schat'),fout=s.querySelector('.wmi__fout'),klaar=s.querySelector('.wmi__klaar');
var GEBIED=[[3011,3016,25,'het centrum'],[3021,3039,32,'Rotterdam-Noord en -West'],[3041,3047,38,'Spaanse Polder en Overschie'],[3051,3069,36,'Kralingen, Hillegersberg en Ommoord'],[3071,3089,44,'Rotterdam-Zuid'],[3111,3125,40,'Schiedam'],[3131,3138,48,'Vlaardingen'],[2901,2909,42,'Capelle aan den IJssel'],[2921,2926,50,'Krimpen aan den IJssel'],[2991,2994,52,'Barendrecht'],[2981,2987,50,'Ridderkerk']];
function zoek(pc){var n=parseInt(pc,10);for(var i=0;i<GEBIED.length;i++){if(n>=GEBIED[i][0]&&n<=GEBIED[i][1])return GEBIED[i];}return null;}
var TIP={lek:'Draai alvast de hoofdkraan dicht, bij de watermeter in de meterkast.',verstopt:'Spoel niet meer door en giet geen ontstopper in de afvoer.',warm:'Kijk alvast naar de waterdruk op de ketel en noem ons de storingscode als die er is.',anders:'Houd je telefoon bij de hand, de monteur belt je eerst.'};
function nl(d){return ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'][d.getDay()];}
function werk(){var pc=f.postcode.value.replace(/\s/g,'');var spoed=f.wanneer.value==='nu';
if(pc.length<4){schat.textContent='Vul je postcode in, dan zie je hoe snel we er zijn.';return null;}
var g=zoek(pc.slice(0,4));
if(!g){schat.textContent='Die postcode ligt buiten ons werkgebied. Bel ons, dan noemen we een collega bij jou in de buurt.';return null;}
if(spoed){schat.textContent='In '+g[3]+' zijn we er nu over ongeveer '+g[2]+' minuten.';}
else{var d=new Date();d.setDate(d.getDate()+(d.getDay()===5?3:d.getDay()===6?2:1));schat.textContent='In '+g[3]+' kunnen we '+nl(d)+' tussen 8:00 en 12:00 langskomen.';}
return g;}
f.addEventListener('input',werk);f.addEventListener('change',werk);
f.addEventListener('submit',function(e){e.preventDefault();var g=werk();var tel=f.tel.value.replace(/\D/g,'');
if(!g){fout.hidden=false;fout.textContent='Vul een postcode in ons werkgebied in, of bel 010 123 4567.';f.postcode.focus();return;}
if(tel.length<10){fout.hidden=false;fout.textContent='Vul een telefoonnummer van tien cijfers in, dan kunnen we je terugbellen.';f.tel.focus();return;}
fout.hidden=true;[].forEach.call(f.children,function(c){if(c!==klaar)c.hidden=true;});klaar.hidden=false;
var spoed=f.wanneer.value==='nu';
klaar.querySelector('.wmi__klaar-kop').textContent=spoed?'Je staat bovenaan de lijst. De monteur belt je binnen tien minuten op '+f.tel.value.trim()+'.':'Genoteerd. We bellen je vandaag nog om de afspraak vast te zetten.';
klaar.querySelector('.wmi__klaar-tip').textContent=TIP[f.probleem.value];});
var tabs=[].slice.call(s.querySelectorAll('.wmi__tabs [role=tab]'));
function kies(t){tabs.forEach(function(x){var aan=x===t;x.setAttribute('aria-selected',String(aan));x.tabIndex=aan?0:-1;s.querySelector('#'+x.getAttribute('aria-controls')).hidden=!aan;});}
tabs.forEach(function(t,i){t.addEventListener('click',function(){kies(t);});t.addEventListener('keydown',function(e){var n=e.key==='ArrowRight'?1:e.key==='ArrowLeft'?-1:0;if(n){var v=tabs[(i+n+tabs.length)%tabs.length];v.focus();kies(v);}});});
}
init(document.querySelector('.jouw-container'));More complete websites
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 →