Proces / stappen
Four numbered steps with a progress line that grows on scroll.
Van idee naar live
in vier stappen.
01
Intake
We duiken in jouw markt, doelgroep en cijfers.
02
Design
Drie richtingen, jij kiest. Geen sjablonen.
03
Bouw
Schone code, geharde infra, alles gemeten.
04
Live & groei
We monitoren, optimaliseren en rapporteren.
How to use it
- Paste the HTML where the page sections 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.
<!-- Proces / stappen · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="prc">
<div class="prc__inner">
<header class="prc__head"><span class="prc__eyebrow">/ hoe het werkt</span><h2 class="prc__h2">Van idee naar live<br>in vier stappen.</h2></header>
<div class="prc__steps">
<div class="prc__line"><span class="prc__fill" data-fill></span></div>
<div class="prc__step"><span class="prc__dot">01</span><h3>Intake</h3><p>We duiken in jouw markt, doelgroep en cijfers.</p></div>
<div class="prc__step"><span class="prc__dot">02</span><h3>Design</h3><p>Drie richtingen, jij kiest. Geen sjablonen.</p></div>
<div class="prc__step"><span class="prc__dot">03</span><h3>Bouw</h3><p>Schone code, geharde infra, alles gemeten.</p></div>
<div class="prc__step"><span class="prc__dot">04</span><h3>Live & groei</h3><p>We monitoren, optimaliseren en rapporteren.</p></div>
</div>
</div>
</section>
</div>/* Proces / stappen · NedDev · eigen werk. */
.prc{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.prc__inner{max-width:900px;margin:0 auto;padding:48px 28px;box-sizing:border-box}
.prc__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.prc__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,44px);line-height:.98;letter-spacing:-.02em;margin:12px 0 36px}
.prc__steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prc__line{position:absolute;top:13px;left:0;right:0;height:2px;background:rgba(10,10,10,.12)}
.prc__fill{display:block;height:100%;width:0;background:#F5480F;transition:width .9s cubic-bezier(.16,1,.3,1)}
.prc__step{position:relative;padding-top:0}
.prc__dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#0a0a0a;color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;margin-bottom:18px}
.prc__step h3{font-family:'Switzer',sans-serif;font-weight:600;font-size:17px;margin:0 0 8px}
.prc__step p{font-family:'Switzer',sans-serif;font-size:13.5px;line-height:1.5;color:#555;margin:0}
@media(max-width:720px){.prc__steps{grid-template-columns:1fr}.prc__line{left:13px;right:auto;top:0;bottom:0;width:2px;height:auto}.prc__fill{width:100%!important;height:0;transition:height .9s ease}.prc__step{padding-left:46px}.prc__dot{position:absolute;left:0;top:0}}// Proces / stappen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.prc')||root;
var fill=root.querySelector('[data-fill]');
function light(){if(matchMedia('(prefers-reduced-motion: reduce)').matches){fill.style.transition='none';}fill.style.width='100%';fill.style.height='100%';}
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){light();io.disconnect();}});},{threshold:.35});io.observe(root.querySelector('.prc__steps'));
}
init(document.querySelector('.jouw-container'));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 →