Brief van de oprichter Nieuw
Over-ons als persoonlijke brief op papier, met een handtekening die zichzelf tekent zodra het blok in beeld komt. Voor bedrijven waar de eigenaar het gezicht is.
'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,
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- 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'));
Meer uit paginasecties
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →