Vacaturepagina servicemonteur · Kuipers Installatietechniek, Apeldoorn New
Job page for a service engineer at an installation company: the promise and salary on the left, a two-step application right next to it, then an ordinary working day, pay in euros, the colleagues on camera, what happens next and a working FAQ.
Eerst even bellen? Arjan Kuipers, 055 123 4567, ook 's avonds tot 20:00
Servicemonteur cv en warmtepomp
Apeldoorn en omgeving, 32 tot 40 uur. Je eigen klanten, je eigen bus en een planning die klopt.
€3.250 tot €3.950 bruto per maand
Plus €285 per week storingsdienst, eens in de zes weken.

Wat je doet
Je dag begint om half acht bij je thuis. De planning staat in de app: vijf of zes adressen, allemaal binnen een half uur rijden van Apeldoorn. Je onderhoudt cv-ketels, zet warmtepompen in bedrijf en lost storingen op. Wat je niet weet, bel je na met Henk of de leverancier.
- Onderhoud en storingen aan ketels van Remeha, Intergas en Nefit
- Warmtepompen en hybride systemen in bedrijf stellen en onderhouden
- Klanten uitleggen hoe hun installatie werkt en wat het kost als iets vervangen moet
- Je werkbon afronden in de app, zodat de factuur dezelfde dag de deur uit gaat
Wat je meebrengt
Een mbo-diploma installatietechniek of iets vergelijkbaars, rijbewijs B en zin om uit te zoeken waarom iets het niet doet. Warmtepompen leren we je, het F-gassencertificaat halen we samen.
Wat je krijgt
€3.250 tot €3.950 bruto per maand bij 40 uur, volgens de cao Metaal en Techniek. Waar je begint hangt af van je ervaring; na een jaar kijken we samen opnieuw.
- Storingsdienst eens in de zes weken: €285 voor die week, overuren tegen 150%
- Een ingerichte bus die je mee naar huis neemt, plus telefoon en tablet
- 25 vakantiedagen en 13 adv-dagen, 8% vakantiegeld, pensioen bij PMT
- Opleidingen in werktijd: warmtepompen, F-gassen en NEN 3140
- Vier dagen van negen uur kan, als je dat liever hebt
Met wie je werkt




Ik kwam van een landelijk bedrijf en reed elke dag tweehonderd kilometer. Hier kom ik nooit verder dan Deventer, en om vijf uur ben ik thuis.
Hoe het verder gaat
Binnen twee werkdagen belt Arjan je. Klikt het, dan spreek je een ochtend af om mee te rijden met Henk of Ruben, zodat je ziet hoe een dag echt loopt. Daarna praat je met Arjan over salaris en uren, en heb je binnen een week een voorstel op papier.
Liever eerst iets vragen? Bel Arjan op 055 123 4567.
Moet ik al warmtepompen kennen?
Nee. Ketels kennen is genoeg om te beginnen. In je eerste half jaar volg je de warmtepompcursus bij de leverancier, in werktijd.
Hoe vaak heb ik storingsdienst?
Eens in de zes weken, van maandag tot maandag. Gemiddeld rijd je dan twee keer 's avonds uit.
Hoe groot is het werkgebied?
Apeldoorn, Epe, Twello, Voorst en Hoenderloo. Een enkele keer Deventer of Zutphen.
Kan ik parttime werken?
Ja, vanaf 32 uur. Storingsdienst draai je dan naar rato mee.
Zin om mee te rijden?
Solliciteer in twee minutenKuipers
Kuipers Installatietechniek B.V.
IJsselstraat 22
7317 AV Apeldoorn
Erkend
InstallQ-erkend
Erkend leerbedrijf SBB
Techniek Nederland
KvK 08123456 · BTW NL004567891B01 · Privacy
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.
<!-- Vacaturepagina servicemonteur · Kuipers Installatietechniek, Apeldoorn · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kpv">
<div class="kpv__top"><div class="kpv__in kpv__top-in">
<p class="kpv__top-txt">Eerst even bellen? Arjan Kuipers, <a href="tel:0551234567">055 123 4567</a>, ook 's avonds tot 20:00</p>
<p class="kpv__top-txt"><a href="mailto:werkenbij@voorbeeld.nl">werkenbij@voorbeeld.nl</a></p>
</div></div>
<div class="kpv__head" role="banner"><div class="kpv__in kpv__head-in">
<a href="#" class="kpv__logo" aria-label="Kuipers Installatietechniek, naar home">Kuipers<span>installatietechniek</span></a>
<nav class="kpv__nav" aria-label="Hoofdmenu">
<a href="#" aria-current="page">Vacatures</a><a href="#">Opleiden</a><a href="#kpv-collegas">Collega's</a><a href="#">Over Kuipers</a><a href="#">Contact</a>
</nav>
<a href="#kpv-sol" class="kpv__btn kpv__btn--head">Solliciteer</a>
<button class="kpv__menu-knop" type="button" aria-expanded="false" aria-controls="kpv-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="kpv__menu" id="kpv-menu" hidden>
<a href="#" aria-current="page">Vacatures</a><a href="#">Opleiden</a><a href="#kpv-collegas">Collega's</a><a href="#">Over Kuipers</a><a href="#">Contact</a><a href="#kpv-sol" class="kpv__btn">Solliciteer direct</a>
</div>
</div>
<div class="kpv__hero"><div class="kpv__in kpv__hero-in">
<div class="kpv__belofte">
<h1 class="kpv__h1">Servicemonteur cv en warmtepomp</h1>
<p class="kpv__lead">Apeldoorn en omgeving, 32 tot 40 uur. Je eigen klanten, je eigen bus en een planning die klopt.</p>
<p class="kpv__loon">€3.250 tot €3.950 bruto per maand</p>
<p class="kpv__sub">Plus €285 per week storingsdienst, eens in de zes weken.</p>
</div>
<div class="kpv__sol" id="kpv-sol">
<form class="kpv__form" novalidate>
<div class="kpv__stap" data-stap="a">
<h2 class="kpv__h3">Solliciteren kost twee minuten</h2>
<p class="kpv__uitleg">Een cv of brief hoeft niet. Arjan belt je zelf.</p>
<label class="kpv__veld"><span>Naam</span><input name="naam" autocomplete="name"><em class="kpv__fout" hidden>Vul je naam in.</em></label>
<label class="kpv__veld"><span>Telefoonnummer</span><input name="tel" type="tel" autocomplete="tel"><em class="kpv__fout" hidden>Vul een nummer van tien cijfers in.</em></label>
<label class="kpv__veld"><span>Ervaring als monteur</span><select name="erv"><option value="">Kies wat past</option><option>Net van school of nog bezig</option><option>Een tot drie jaar</option><option>Meer dan drie jaar</option><option>Ik kom uit een ander vak</option></select><em class="kpv__fout" hidden>Kies je ervaring.</em></label>
<button type="button" class="kpv__btn kpv__verder">Verder</button>
</div>
<div class="kpv__stap" data-stap="b" hidden>
<h2 class="kpv__h3 kpv__bijna">Bijna klaar</h2>
<p class="kpv__uitleg">Nog twee dingen, allebei mag je overslaan.</p>
<label class="kpv__veld"><span>Wanneer zou je kunnen beginnen?</span><select name="start"><option>Zo snel mogelijk</option><option>Binnen een maand</option><option>Over twee maanden of later</option><option>Weet ik nog niet</option></select></label>
<label class="kpv__veld"><span>Iets wat Arjan moet weten</span><textarea name="noot" rows="3" placeholder="Bijvoorbeeld: ik wil vier dagen werken, of ik heb al een F-gassencertificaat."></textarea></label>
<div class="kpv__knoppen"><button type="submit" class="kpv__btn">Verstuur sollicitatie</button><button type="button" class="kpv__terug">Terug</button></div>
</div>
</form>
<p class="kpv__klaar" role="status" hidden></p>
</div>
</div></div>
<div class="kpv__beeld"><img src="https://neddev.com/lab-media/page-vacature-monteur-1.webp" alt="Een servicemonteur onderhoudt een cv-ketel in een bijkeuken" width="1408" height="768"></div>
<div class="kpv__doen"><div class="kpv__in kpv__doen-in">
<div class="kpv__doen-txt">
<h2 class="kpv__h2">Wat je doet</h2>
<p>Je dag begint om half acht bij je thuis. De planning staat in de app: vijf of zes adressen, allemaal binnen een half uur rijden van Apeldoorn. Je onderhoudt cv-ketels, zet warmtepompen in bedrijf en lost storingen op. Wat je niet weet, bel je na met Henk of de leverancier.</p>
<ul class="kpv__lijst">
<li>Onderhoud en storingen aan ketels van Remeha, Intergas en Nefit</li>
<li>Warmtepompen en hybride systemen in bedrijf stellen en onderhouden</li>
<li>Klanten uitleggen hoe hun installatie werkt en wat het kost als iets vervangen moet</li>
<li>Je werkbon afronden in de app, zodat de factuur dezelfde dag de deur uit gaat</li>
</ul>
<h3 class="kpv__h3">Wat je meebrengt</h3>
<p>Een mbo-diploma installatietechniek of iets vergelijkbaars, rijbewijs B en zin om uit te zoeken waarom iets het niet doet. Warmtepompen leren we je, het F-gassencertificaat halen we samen.</p>
</div>
<div class="kpv__doen-fotos">
<img src="https://neddev.com/lab-media/page-vacature-monteur-3.webp" alt="Een monteur installeert een buitenunit van een warmtepomp naast een rijtjeshuis" width="900" height="491" loading="lazy">
<img src="https://neddev.com/lab-media/page-vacature-monteur-6.webp" alt="Een monteur controleert het bedieningspaneel van een warmtepomp" width="900" height="491" loading="lazy">
</div>
</div></div>
<div class="kpv__krijg"><div class="kpv__in kpv__krijg-in">
<img src="https://neddev.com/lab-media/page-vacature-monteur-2.webp" alt="De open achterdeuren van een witte servicebus met opgeruimde stellingen vol onderdelen" width="900" height="491" loading="lazy">
<div>
<h2 class="kpv__h2">Wat je krijgt</h2>
<p class="kpv__groot">€3.250 tot €3.950 bruto per maand bij 40 uur, volgens de cao Metaal en Techniek. Waar je begint hangt af van je ervaring; na een jaar kijken we samen opnieuw.</p>
<ul class="kpv__lijst">
<li>Storingsdienst eens in de zes weken: €285 voor die week, overuren tegen 150%</li>
<li>Een ingerichte bus die je mee naar huis neemt, plus telefoon en tablet</li>
<li>25 vakantiedagen en 13 adv-dagen, 8% vakantiegeld, pensioen bij PMT</li>
<li>Opleidingen in werktijd: warmtepompen, F-gassen en NEN 3140</li>
<li>Vier dagen van negen uur kan, als je dat liever hebt</li>
</ul>
</div>
</div></div>
<div class="kpv__collegas" id="kpv-collegas"><div class="kpv__in">
<h2 class="kpv__h2">Met wie je werkt</h2>
<div class="kpv__mozaiek">
<figure class="kpv__m kpv__m--groot"><img src="https://neddev.com/lab-media/page-vacature-monteur-11.webp" alt="Vijf monteurs drinken koffie aan een lange houten tafel in de kantine" width="900" height="491" loading="lazy"><figcaption>Vrijdagochtend drinkt de hele ploeg koffie op de zaak. We zijn met veertien monteurs, de meesten wonen in en rond Apeldoorn.</figcaption></figure>
<figure class="kpv__m"><img src="https://neddev.com/lab-media/page-vacature-monteur-5.webp" alt="Een ervaren monteur legt een jongere collega een ketelonderdeel uit" width="900" height="491" loading="lazy"><figcaption>Henk werkt hier 31 jaar en rijdt de eerste weken met je mee.</figcaption></figure>
<figure class="kpv__m"><img src="https://neddev.com/lab-media/page-vacature-monteur-10.webp" alt="Een planner met headset achter twee beeldschermen" width="900" height="491" loading="lazy"><figcaption>Sanne plant je dag. Loopt een klus uit, dan schuift zij de rest.</figcaption></figure>
<figure class="kpv__m"><img src="https://neddev.com/lab-media/page-vacature-monteur-7.webp" alt="Een magazijn met stellingen vol buizen, fittingen en dozen" width="900" height="491" loading="lazy"><figcaption>Het magazijn vult je bus 's avonds aan. Je hoeft 's ochtends niet langs de zaak.</figcaption></figure>
</div>
<blockquote class="kpv__citaat"><p>Ik kwam van een landelijk bedrijf en reed elke dag tweehonderd kilometer. Hier kom ik nooit verder dan Deventer, en om vijf uur ben ik thuis.</p><footer>Ruben Postma, servicemonteur bij Kuipers sinds 2022</footer></blockquote>
</div></div>
<div class="kpv__vervolg"><div class="kpv__in kpv__vervolg-in">
<div>
<h2 class="kpv__h2">Hoe het verder gaat</h2>
<p>Binnen twee werkdagen belt Arjan je. Klikt het, dan spreek je een ochtend af om mee te rijden met Henk of Ruben, zodat je ziet hoe een dag echt loopt. Daarna praat je met Arjan over salaris en uren, en heb je binnen een week een voorstel op papier.</p>
<p>Liever eerst iets vragen? Bel Arjan op <a href="tel:0551234567">055 123 4567</a>.</p>
</div>
<div class="kpv__faq">
<details><summary>Moet ik al warmtepompen kennen?</summary><p>Nee. Ketels kennen is genoeg om te beginnen. In je eerste half jaar volg je de warmtepompcursus bij de leverancier, in werktijd.</p></details>
<details><summary>Hoe vaak heb ik storingsdienst?</summary><p>Eens in de zes weken, van maandag tot maandag. Gemiddeld rijd je dan twee keer 's avonds uit.</p></details>
<details><summary>Hoe groot is het werkgebied?</summary><p>Apeldoorn, Epe, Twello, Voorst en Hoenderloo. Een enkele keer Deventer of Zutphen.</p></details>
<details><summary>Kan ik parttime werken?</summary><p>Ja, vanaf 32 uur. Storingsdienst draai je dan naar rato mee.</p></details>
</div>
</div></div>
<div class="kpv__slot"><div class="kpv__in kpv__slot-in">
<h2 class="kpv__h2">Zin om mee te rijden?</h2>
<a href="#kpv-sol" class="kpv__btn">Solliciteer in twee minuten</a>
</div></div>
<div class="kpv__voet" role="contentinfo"><div class="kpv__in">
<div class="kpv__voet-raster">
<div><p class="kpv__voet-logo">Kuipers</p><p>Kuipers Installatietechniek B.V.<br>IJsselstraat 22<br>7317 AV Apeldoorn</p></div>
<div><p class="kpv__voet-kop">Werken bij</p><a href="#">Alle vacatures</a><a href="#">Opleiden en leren</a><a href="#">Stage en BBL</a></div>
<div><p class="kpv__voet-kop">Kuipers</p><a href="#">Over ons</a><a href="#">Voor klanten</a><a href="#">Contact</a></div>
<div><p class="kpv__voet-kop">Erkend</p><p>InstallQ-erkend<br>Erkend leerbedrijf SBB<br>Techniek Nederland</p></div>
</div>
<p class="kpv__voet-klein">KvK 08123456 · BTW NL004567891B01 · <a href="#">Privacy</a></p>
</div></div>
</div>
</div>/* Vacaturepagina servicemonteur · Kuipers Installatietechniek, Apeldoorn · NedDev · eigen werk. */
/* fonts (Fontshare): sentient@400,500 */
.kpv{--bg:#6E1423;--opp:#7C1C2C;--tekst:#FFF5F5;--gedempt:#F0C9CD;--lijn:#8E3342;--accent:#FF9F80;--op-accent:#000000;--r:8px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:44px;--fs6:72px;--sectie:clamp(56px,7vw,104px);--kader:1660px;--lees:720px;--zij:20px;
container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Sentient',Georgia,serif;font-weight:400;font-size:var(--fs2);line-height:1.6}
.kpv *{box-sizing:border-box}
.kpv [hidden]{display:none!important}
.kpv a{color:inherit}
.kpv img{display:block;max-width:100%;height:auto}
.kpv figure,.kpv blockquote{margin:0}
.kpv__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.kpv__top{border-bottom:1px solid var(--lijn)}
.kpv__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.kpv__top-txt{margin:0;font-size:var(--fs1);color:var(--gedempt);padding:3px 0}
.kpv__top-txt a{color:var(--tekst);display:inline-block;padding:3px 0;text-underline-offset:3px}
.kpv__head{position:sticky;top:0;z-index:20}
.kpv__head-in{display:flex;align-items:center;gap:28px;height:76px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.kpv__logo{text-decoration:none;font-weight:500;font-size:var(--fs4);display:flex;align-items:baseline;gap:8px}
.kpv__logo span{font-size:var(--fs1);color:var(--gedempt);font-weight:400}
.kpv__nav{display:flex;gap:24px;margin-left:auto}
.kpv__nav a{text-decoration:none;color:var(--gedempt);transition:color .18s}
.kpv__nav a:hover,.kpv__nav a[aria-current]{color:var(--tekst)}
.kpv__nav a[aria-current]{border-bottom:2px solid var(--accent);padding-bottom:4px}
.kpv__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-family:inherit;font-weight:500;font-size:var(--fs2);padding:13px 22px;border-radius:var(--r);border:0;cursor:pointer;transition:background-color .18s}
.kpv__btn:hover{background:#ffb79e}
.kpv__menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--lijn);border-radius:var(--r);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.kpv__menu-knop span{display:block;width:20px;height:2px;background:var(--tekst)}
.kpv__menu{display:flex;flex-direction:column;padding:8px var(--zij) 20px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.kpv__menu a{padding:12px 0;text-decoration:none;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.kpv__menu .kpv__btn{margin-top:16px;text-align:center;border:0}
.kpv__hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:center;padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,80px)}
.kpv__h1{font-weight:500;font-size:var(--fs6);line-height:1.02;letter-spacing:-.025em;margin:0 0 24px;max-width:13ch}
.kpv__lead{font-size:var(--fs3);color:var(--gedempt);margin:0 0 32px;max-width:40ch}
.kpv__loon{font-size:var(--fs4);margin:0;line-height:1.2}
.kpv__sub{margin:6px 0 0;color:var(--gedempt)}
.kpv__sol{background:var(--opp);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(24px,3vw,40px)}
.kpv__stap{display:grid;gap:16px}
.kpv__h3{font-weight:500;font-size:var(--fs4);line-height:1.2;margin:0}
.kpv__uitleg{margin:-8px 0 4px;color:var(--gedempt)}
.kpv__veld{display:grid;gap:6px}
.kpv__veld>span{font-size:var(--fs2)}
.kpv__veld input,.kpv__veld select,.kpv__veld textarea{font:inherit;color:#1D070C;background:var(--tekst);border:2px solid transparent;border-radius:var(--r);padding:11px 14px;min-height:48px;width:100%}
.kpv__veld input:focus,.kpv__veld select:focus,.kpv__veld textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.kpv__veld.is-fout input,.kpv__veld.is-fout select{border-color:var(--accent)}
.kpv__fout{font-style:normal;color:var(--accent);font-size:var(--fs1)}
.kpv__stap .kpv__btn{justify-self:start}
.kpv__knoppen{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.kpv__terug{font:inherit;background:none;border:0;color:var(--tekst);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:12px 4px}
.kpv__klaar{font-size:var(--fs3);margin:0}
.kpv__beeld img{width:100%;height:clamp(280px,40vw,560px);object-fit:cover}
.kpv__doen{padding:var(--sectie) 0}
.kpv__doen-in{display:grid;grid-template-columns:minmax(0,var(--lees)) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:start}
.kpv__h2{font-weight:500;font-size:var(--fs5);line-height:1.08;letter-spacing:-.02em;margin:0 0 24px}
.kpv__doen-txt>p{margin:0 0 20px;font-size:var(--fs3);line-height:1.55}
.kpv__doen-txt .kpv__h3{margin:36px 0 12px}
.kpv__lijst{margin:0 0 8px;padding:0 0 0 22px;color:var(--gedempt)}
.kpv__lijst li{margin-bottom:10px;padding-left:4px}
.kpv__lijst li::marker{color:var(--accent)}
.kpv__doen-fotos{display:grid;gap:16px}
.kpv__doen-fotos img{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:4/3}
.kpv__doen-fotos img:last-child{width:70%;aspect-ratio:1}
.kpv__krijg{background:var(--opp);padding:var(--sectie) 0}
.kpv__krijg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,112px);align-items:center}
.kpv__krijg-in>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.kpv__groot{font-size:var(--fs3);margin:0 0 24px;max-width:46ch}
.kpv__collegas{padding:var(--sectie) 0}
.kpv__mozaiek{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:20px}
.kpv__m--groot{grid-row:span 2}
.kpv__m img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.kpv__m--groot img{aspect-ratio:auto;height:clamp(300px,34vw,520px)}
.kpv__m figcaption{margin-top:10px;color:var(--gedempt);font-size:var(--fs2);max-width:46ch}
.kpv__m:nth-child(4){grid-column:2/4}
.kpv__m:nth-child(4) img{aspect-ratio:21/9}
.kpv .kpv__citaat{margin-top:clamp(40px,5vw,72px);max-width:880px;padding-left:24px;border-left:2px solid var(--accent)}
.kpv__citaat p{font-size:var(--fs4);line-height:1.35;margin:0 0 12px}
.kpv__citaat footer{color:var(--gedempt)}
.kpv__vervolg{background:var(--opp);padding:var(--sectie) 0}
.kpv__vervolg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px)}
.kpv__vervolg-in p{margin:0 0 16px;font-size:var(--fs3);max-width:46ch}
.kpv__faq details{border-top:1px solid var(--lijn)}
.kpv__faq details:last-child{border-bottom:1px solid var(--lijn)}
.kpv__faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-size:var(--fs3);position:relative}
.kpv__faq summary::-webkit-details-marker{display:none}
.kpv__faq summary::after{content:'';position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-75%) rotate(45deg);transition:transform .18s}
.kpv__faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.kpv__faq details p{margin:0 0 20px;color:var(--gedempt);font-size:var(--fs2)}
.kpv__slot{padding:clamp(48px,6vw,88px) 0;border-bottom:1px solid var(--lijn)}
.kpv__slot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.kpv__slot-in .kpv__h2{margin:0}
.kpv__voet{padding:56px 0 40px;font-size:var(--fs1);color:var(--gedempt)}
.kpv__voet-raster{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px;padding-bottom:40px;border-bottom:1px solid var(--lijn)}
.kpv__voet p{margin:0}
.kpv__voet a{display:block;text-decoration:none;padding:3px 0}
.kpv__voet a:hover{color:var(--tekst)}
.kpv__voet-logo{font-size:var(--fs4);color:var(--tekst);margin-bottom:10px!important}
.kpv__voet-kop{color:var(--tekst);font-weight:500;margin-bottom:8px!important}
.kpv__voet-klein{padding-top:20px}
.kpv__voet-klein a{display:inline;text-decoration:underline}
@container (max-width:980px){
.kpv__nav,.kpv__btn--head{display:none}
.kpv__menu-knop{display:flex}
.kpv__hero-in,.kpv__doen-in,.kpv__krijg-in,.kpv__vervolg-in{grid-template-columns:minmax(0,1fr)}
.kpv__doen-fotos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kpv__doen-fotos img:last-child{width:100%;aspect-ratio:4/3}
.kpv__krijg-in>img{aspect-ratio:16/10}
.kpv__mozaiek{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.kpv__m--groot{grid-row:auto;grid-column:1/-1}
.kpv__m:nth-child(4){grid-column:1/-1}
.kpv__voet-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:640px){
.kpv>*{--fs4:24px;--fs5:34px;--fs6:36px}
.kpv__h1{hyphens:auto;overflow-wrap:break-word}
.kpv__top-in{flex-direction:column;gap:0}
.kpv__mozaiek,.kpv__doen-fotos{grid-template-columns:minmax(0,1fr)}
.kpv__m--groot img{height:auto;aspect-ratio:4/3}
.kpv__m:nth-child(4) img{aspect-ratio:4/3}
.kpv__doen-txt>p,.kpv__vervolg-in p{font-size:var(--fs2)}
.kpv__voet-raster{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.kpv *{transition:none!important}}// Vacaturepagina servicemonteur · Kuipers Installatietechniek, Apeldoorn · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.kpv');if(!s)return;
var knop=s.querySelector('.kpv__menu-knop'),menu=s.querySelector('.kpv__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');}});
var f=s.querySelector('.kpv__form'),a=f.querySelector('[data-stap=a]'),b=f.querySelector('[data-stap=b]'),klaar=s.querySelector('.kpv__klaar');
function zet(el,fout){var l=el.closest('.kpv__veld');l.classList.toggle('is-fout',fout);l.querySelector('.kpv__fout').hidden=!fout;}
s.querySelector('.kpv__verder').addEventListener('click',function(){
var fn=!f.naam.value.trim(),ft=f.tel.value.replace(/[^0-9]/g,'').length<10,fe=!f.erv.value;
zet(f.naam,fn);zet(f.tel,ft);zet(f.erv,fe);
if(fn||ft||fe){(fn?f.naam:ft?f.tel:f.erv).focus();return;}
a.hidden=true;b.hidden=false;s.querySelector('.kpv__bijna').textContent='Bijna klaar, '+f.naam.value.trim().split(' ')[0];f.start.focus();});
s.querySelector('.kpv__terug').addEventListener('click',function(){b.hidden=true;a.hidden=false;f.naam.focus();});
f.addEventListener('submit',function(e){e.preventDefault();if(!a.hidden){s.querySelector('.kpv__verder').click();return;}
var naam=f.naam.value.trim().split(' ')[0],tel=f.tel.value.trim();f.hidden=true;klaar.hidden=false;
klaar.textContent='Dank je, '+naam+'. Je sollicitatie is binnen. Arjan belt je binnen twee werkdagen op '+tel+' om een ochtend meerijden af te spreken.';});
}
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 →