Brief van de oprichter New
About section as a personal letter on paper, with a signature that draws itself when the block scrolls into view. For businesses where the owner is the face.
's-Gravenzande
3generaties
4,2 hakas, waarvan 1 ha op restwarmte
11soorten tomaten, geen enkele uit een folder
Beste lezer,
Mijn opa begon in 1961 met een halve kas en een paar rijen Moneymaker. Ik heb hier als jongen dozen geplakt voor een kwartje per honderd. Toen ik het bedrijf in 2004 overnam, heb ik één ding beloofd: we telen alleen wat we zelf ook op ons brood willen.
Dat betekent dat we langzamer groeien dan de buren. We plukken pas als de tomaat rood is aan de tros, niet onderweg in de vrachtwagen. Het kost ons meer, en u proeft het verschil. Als u dat niet doet, bel me dan gerust. Mijn nummer staat onderaan.
Met groet uit de kas,
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.
<!-- Brief van de oprichter · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="obr">
<div class="obr__in">
<div class="obr__side">
<span class="obr__eye">Kwekerij Van der Lugt<br>'s-Gravenzande</span>
<p class="obr__stat"><b>3</b>generaties</p>
<p class="obr__stat"><b>4,2 ha</b>kas, waarvan 1 ha op restwarmte</p>
<p class="obr__stat"><b>11</b>soorten tomaten, geen enkele uit een folder</p>
</div>
<div class="obr__paper">
<div class="obr__meta"><span>'s-Gravenzande, oktober 2026</span><span>Aan iedereen die onze tomaten eet</span></div>
<p class="obr__p">Beste lezer,</p>
<p class="obr__p">Mijn opa begon in 1961 met een halve kas en een paar rijen Moneymaker. Ik heb hier als jongen dozen geplakt voor een kwartje per honderd. Toen ik het bedrijf in 2004 overnam, heb ik één ding beloofd: we telen alleen wat we zelf ook op ons brood willen.</p>
<p class="obr__p">Dat betekent dat we langzamer groeien dan de buren. We plukken pas als de tomaat rood is aan de tros, niet onderweg in de vrachtwagen. Het kost ons meer, en u proeft het verschil. Als u dat niet doet, bel me dan gerust. Mijn nummer staat onderaan.</p>
<p class="obr__p">Met groet uit de kas,</p>
<div class="obr__sig">
<svg viewBox="0 0 320 110" aria-label="Handtekening Kees van der Lugt" role="img"><path class="obr__path" d="M18 70c10-30 18-48 22-46 5 3-10 52-6 54 3 2 20-36 32-34 9 2-14 30-4 31 9 1 16-14 22-14 5 0-3 14 3 15 8 1 12-16 20-16 6 0 0 15 6 15 10 0 22-28 30-26 6 2-12 42-4 42 10 0 28-58 40-60 10-2-16 60-6 60 9 0 14-22 24-22 7 0 4 12 10 12 10 0 20-20 28-20 6 0 2 14 10 14 16 0 34-12 52-14M60 92c50-6 140-10 230-14"/></svg>
<div><b>Kees van der Lugt</b><span>Kweker, eigenaar · 06 1234 5678</span></div>
</div>
</div>
</div>
</div>
</div>/* Brief van de oprichter · NedDev · eigen werk. */
.obr{background:#2f4a3a;color:#eef0e4;font-family:'Switzer',sans-serif;box-sizing:border-box}
.obr *{box-sizing:border-box}
.obr__in{max-width:1080px;margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:start}
.obr__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#e86f4f;display:block;margin-bottom:22px;line-height:1.6}
.obr__stat{margin:0 0 18px;font-size:13.5px;line-height:1.4;color:#c7d1c3;border-top:1px solid rgba(238,240,228,.2);padding-top:12px}
.obr__stat b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;color:#eef0e4}
.obr__paper{background:#fbf7ef;color:#1d2b4f;padding:38px 46px 30px;border-radius:2px;box-shadow:0 1px 0 #e7dfcf,0 2px 0 #fbf7ef,0 3px 0 #e2d9c6,0 18px 40px rgba(0,0,0,.28);background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(29,43,79,.06) 27px 28px);position:relative;transform:rotate(-.4deg)}
.obr__meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:400 11px 'JetBrains Mono',monospace;color:#6b7590;margin-bottom:20px;letter-spacing:.04em}
.obr__p{font-family:Georgia,'Times New Roman',serif;font-size:16.5px;line-height:1.68;margin:0 0 14px}
.obr__sig{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-top:4px}
.obr__sig svg{width:240px;height:auto;flex:none}
.obr__path{fill:none;stroke:#1d2b4f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.obr__sig div{display:flex;flex-direction:column;padding-bottom:12px}
.obr__sig b{font-size:15px}
.obr__sig span{font:400 11.5px 'JetBrains Mono',monospace;color:#6b7590}
@media(max-width:760px){.obr__in{grid-template-columns:1fr;gap:20px;padding:28px 16px}.obr__side{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.obr__eye{grid-column:1/-1;margin-bottom:4px}.obr__stat{font-size:11.5px;margin:0}.obr__stat b{font-size:20px}.obr__paper{padding:24px 20px 20px;transform:none}.obr__p{font-size:15px;line-height:1.6}.obr__sig svg{width:190px}}// Brief van de oprichter · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.obr');if(!w)return;
var p=w.querySelector('.obr__path');var L=Math.ceil(p.getTotalLength());
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
p.style.strokeDasharray=L;p.style.strokeDashoffset=L;
function draw(){p.style.transition='none';p.style.strokeDashoffset=L;void p.getBoundingClientRect();p.style.transition='stroke-dashoffset 2.4s cubic-bezier(.45,.05,.35,1) .2s';p.style.strokeDashoffset=0;}
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){draw();io.disconnect();}});},{threshold:.4});io.observe(w.querySelector('.obr__sig'));}else{draw();}
w.querySelector('.obr__sig svg').addEventListener('click',draw);
}
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 →