CTA-band + nieuwsbrief
Donkere CTA-band met groot statement, dubbele actie en inline nieuwsbrief-validatie.
/ klaar om te beginnen?Laten we iets bouwen
Start een project →
Laten we iets bouwen
dat blijft staan.
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.
<!-- CTA-band + nieuwsbrief · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="ctn">
<div class="ctn__inner">
<div class="ctn__top">
<div><span class="ctn__eyebrow">/ klaar om te beginnen?</span><h2 class="ctn__h2">Laten we iets bouwen<br>dat blijft staan.</h2></div>
<a href="#" class="ctn__btn">Start een project →</a>
</div>
<form class="ctn__form" novalidate>
<label class="ctn__label">Of blijf op de hoogte</label>
<div class="ctn__field">
<input class="ctn__input" type="email" placeholder="jouw@email.nl" aria-label="E-mailadres" required>
<button class="ctn__sub" type="submit">Aanmelden</button>
</div>
<span class="ctn__msg" role="status" aria-live="polite"></span>
</form>
</div>
</section>
</div>/* CTA-band + nieuwsbrief · NedDev · eigen werk. */
.ctn{width:100%;box-sizing:border-box;background:#0a0a0a;color:#fff;display:flex;align-items:center}
.ctn__inner{max-width:900px;margin:0 auto;padding:54px 28px;width:100%;box-sizing:border-box}
.ctn__top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14)}
.ctn__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;color:#F5480F}
.ctn__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(30px,5vw,56px);line-height:.96;letter-spacing:-.02em;margin:14px 0 0}
.ctn__btn{font-family:'Switzer',sans-serif;font-weight:600;font-size:15px;background:#F5480F;color:#0a0a0a;padding:15px 28px;border-radius:2px;text-decoration:none;white-space:nowrap;transition:transform .25s}
.ctn__btn:hover{transform:translateY(-3px)}
.ctn__form{margin-top:28px;max-width:440px}
.ctn__label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55);display:block;margin-bottom:10px}
.ctn__field{display:flex;gap:8px}
.ctn__input{flex:1;font-family:'Switzer',sans-serif;font-size:14px;padding:13px 16px;border-radius:2px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff}
.ctn__input::placeholder{color:rgba(255,255,255,.4)}
.ctn__input:focus{outline:none;border-color:#F5480F}
.ctn__sub{font-family:'Switzer',sans-serif;font-weight:600;font-size:14px;background:#fff;color:#0a0a0a;border:0;padding:0 22px;border-radius:2px;cursor:pointer;transition:background .25s}
.ctn__sub:hover{background:#F5480F}
.ctn__msg{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;margin-top:10px;min-height:14px;letter-spacing:.04em}
.ctn__msg.ok{color:#7CFC9A}.ctn__msg.err{color:#F5480F}
@media(max-width:560px){.ctn__field{flex-direction:column}.ctn__sub{padding:13px}}// CTA-band + nieuwsbrief · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ctn')||root;
var form=root.querySelector('.ctn__form'),input=root.querySelector('.ctn__input'),msg=root.querySelector('.ctn__msg');
form.addEventListener('submit',function(e){e.preventDefault();var v=input.value.trim();var ok=/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v);msg.className='ctn__msg '+(ok?'ok':'err');msg.textContent=ok?'✓ Bedankt, je staat op de lijst.':'Vul een geldig e-mailadres in.';if(ok){input.value='';}});
}
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 →