Acid Rave Nieuw
Fluorgroen, roze en UV-cyaan op diep zwart, met flyertypografie, een lopende tickerband en een line-up als tijdtabel. Voor clubs, festivals, evenementen en nachtcultuur.
TH/10 · ACID RAVE
ACIDRAVE
Licht uit, volume aan. Fluor op zwart, letters die schreeuwen en een raster dat meebeweegt op 140 bpm.
- BPM
- 140
- UUR
- 08
- AREAS
- 02
KLEUR / 8
achtergrond
#050505oppervlak
#121212tekst
#F2F2F2gedempt
#8A8A8Alijn
#2A2A2Aaccent
#C6FF00accent-2
#FF2BD6signaal
#00E5FFTYPE / TANKER + EXCON
BPM
72LINE-UP36AREA 2 OPEN16Lockers bij de ingang, € 4.1218+ · ID VERPLICHT
UI
UITVERKOCHTLAATSTE 80AREA 2
ZUURSTOFAgendaArchiefHuisregelsCrew
ZA 14 NOV · HAL ZUID · ROTTERDAM
Acht uur. Twee areas. Eén stroboscoop te veel.
- MILA VOSSAREA 1
- DE KORTSLUITINGLIVE
- ACID OMAAREA 1
- TB-303 CLUBB2B
PAST BIJ / clubs · festivals · poppodia · studentenfeesten · streetwear · platenlabels
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.
- Geen JavaScript nodig.
<!-- Acid Rave · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tar-thm">
<div class="tar-tick" aria-hidden="true"><div class="tar-tick__in"><span>ZUURSTOF</span><span>14.11.2026</span><span>23:00 TOT 07:00</span><span>HAL ZUID ROTTERDAM</span><span>ZUURSTOF</span><span>14.11.2026</span><span>23:00 TOT 07:00</span><span>HAL ZUID ROTTERDAM</span></div></div>
<div class="tar-grid">
<div class="tar-intro">
<p class="tar-tag">TH/10 · ACID RAVE</p>
<h3 class="tar-title"><span>ACID</span><span>RAVE</span></h3>
<p class="tar-mood">Licht uit, volume aan. Fluor op zwart, letters die schreeuwen en een raster dat meebeweegt op 140 bpm.</p>
<dl class="tar-stats"><div><dt>BPM</dt><dd>140</dd></div><div><dt>UUR</dt><dd>08</dd></div><div><dt>AREAS</dt><dd>02</dd></div></dl>
</div>
<div class="tar-pal">
<p class="tar-tag">KLEUR / 8</p>
<div class="tar-sws">
<div style="--c:var(--tar-bg)"><i></i><b>achtergrond</b><code>#050505</code></div>
<div style="--c:var(--tar-surface)"><i></i><b>oppervlak</b><code>#121212</code></div>
<div style="--c:var(--tar-text)"><i></i><b>tekst</b><code>#F2F2F2</code></div>
<div style="--c:var(--tar-muted)"><i></i><b>gedempt</b><code>#8A8A8A</code></div>
<div style="--c:var(--tar-line)"><i></i><b>lijn</b><code>#2A2A2A</code></div>
<div style="--c:var(--tar-accent)"><i></i><b>accent</b><code>#C6FF00</code></div>
<div style="--c:var(--tar-accent-2)"><i></i><b>accent-2</b><code>#FF2BD6</code></div>
<div style="--c:var(--tar-signal)"><i></i><b>signaal</b><code>#00E5FF</code></div>
</div>
</div>
<div class="tar-type">
<p class="tar-tag">TYPE / TANKER + EXCON</p>
<p class="tar-type__big">BPM</p>
<ul><li><code>72</code><span style="font:400 40px/1 var(--tar-display)">LINE-UP</span></li><li><code>36</code><span style="font:400 26px/1 var(--tar-display);color:var(--tar-accent-2)">AREA 2 OPEN</span></li><li><code>16</code><span style="font:500 16px var(--tar-body)">Lockers bij de ingang, € 4.</span></li><li><code>12</code><span style="font:700 12px var(--tar-body);letter-spacing:.2em">18+ · ID VERPLICHT</span></li></ul>
</div>
<div class="tar-ui">
<p class="tar-tag">UI</p>
<div class="tar-ui__a"><div class="tar-btns"><button class="tar-btn tar-btn--p" type="button">TICKETS</button><button class="tar-btn tar-btn--s" type="button">LINE-UP</button><button class="tar-btn tar-btn--g" type="button">INFO & FAQ</button></div>
<div class="tar-badges"><span class="tar-bd tar-bd--a">UITVERKOCHT</span><span class="tar-bd tar-bd--b">LAATSTE 80</span><span class="tar-bd">AREA 2</span></div></div>
<div class="tar-ui__b"><label class="tar-f"><span>E-MAIL VOOR DE PRESALE</span><input type="email" placeholder="jij@voorbeeld.nl"></label>
<label class="tar-f"><span>TICKET</span><select><option>Early bird · € 24,50</option><option>Regular · € 29,50</option><option>Late · € 34,50</option></select></label></div>
</div>
<div class="tar-flyer">
<div class="tar-flyer__nav"><strong>ZUURSTOF</strong><span>Agenda</span><span>Archief</span><span>Huisregels</span><span>Crew</span></div>
<div class="tar-flyer__in">
<div><p class="tar-tag tar-tag--g">ZA 14 NOV · HAL ZUID · ROTTERDAM</p><h4>Acht uur. Twee areas. Eén stroboscoop te veel.</h4><button class="tar-btn tar-btn--p" type="button">TICKETS VANAF € 24,50</button></div>
<ol class="tar-lineup"><li><time>23:00</time><b>MILA VOSS</b><em>AREA 1</em></li><li><time>01:00</time><b>DE KORTSLUITING</b><em>LIVE</em></li><li><time>03:00</time><b>ACID OMA</b><em>AREA 1</em></li><li><time>05:00</time><b>TB-303 CLUB</b><em>B2B</em></li></ol>
</div>
</div>
</div>
<p class="tar-fit">PAST BIJ / clubs · festivals · poppodia · studentenfeesten · streetwear · platenlabels</p>
</div>
</div>/* Acid Rave · NedDev · eigen werk. */
/* fonts (Fontshare): tanker@400 + excon@400,500,700 */
.tar-thm{--tar-bg:#050505;--tar-surface:#121212;--tar-text:#F2F2F2;--tar-muted:#8A8A8A;--tar-line:#2A2A2A;--tar-accent:#C6FF00;--tar-accent-2:#FF2BD6;--tar-signal:#00E5FF;--tar-radius:0;--tar-display:'Tanker',sans-serif;--tar-body:'Excon',sans-serif;container:tar/inline-size;color:var(--tar-text);font:400 14px/1.5 var(--tar-body);background-color:var(--tar-bg);background-image:linear-gradient(var(--tar-line) 1px,transparent 1px),linear-gradient(90deg,var(--tar-line) 1px,transparent 1px);background-size:40px 40px;overflow:hidden}
.tar-thm,.tar-thm *{box-sizing:border-box}
.tar-tick{background:var(--tar-accent);color:var(--tar-bg);overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--tar-bg)}
.tar-tick__in{display:inline-flex;gap:40px;padding:8px 0;font:400 22px/1 var(--tar-display);animation:tar-run 22s linear infinite}
.tar-tick__in span::after{content:"+";margin-left:40px}
@keyframes tar-run{to{transform:translateX(-50%)}}
.tar-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:0;margin:24px;border:1px solid var(--tar-muted)}
.tar-grid>div{padding:18px 20px;border-right:1px solid var(--tar-muted);border-bottom:1px solid var(--tar-muted);min-width:0;background:rgba(5,5,5,.86)}
.tar-tag{margin:0 0 12px;font:700 11px/1 var(--tar-body);letter-spacing:.2em;color:var(--tar-muted)}
.tar-tag--g{color:var(--tar-accent)}
.tar-intro{grid-row:span 3;position:relative;overflow:hidden;display:flex;flex-direction:column}
.tar-stats{margin:auto 0 0;padding-top:22px;display:flex;gap:0;position:relative;z-index:1}
.tar-stats div{flex:1;border-top:2px solid var(--tar-accent);padding-top:6px}
.tar-stats dt{font:700 10px var(--tar-body);letter-spacing:.2em;color:var(--tar-muted)}
.tar-stats dd{margin:0;font:400 56px/1 var(--tar-display);color:var(--tar-text);font-variant-numeric:tabular-nums}
.tar-ui{grid-column:2/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;align-content:start}
.tar-ui .tar-tag{grid-column:1/-1}
.tar-ui__a,.tar-ui__b{min-width:0}
.tar-title{margin:0;font:400 clamp(90px,15cqw,190px)/.8 var(--tar-display);letter-spacing:-.01em;display:flex;flex-direction:column}
.tar-title span:first-child{color:var(--tar-accent);transform:scaleY(1.18);transform-origin:top left;margin-bottom:.12em}
.tar-title span:last-child{color:transparent;-webkit-text-stroke:2px var(--tar-accent-2)}
.tar-mood{margin:22px 0 0;font-size:16px;max-width:34ch;color:var(--tar-text)}
.tar-intro::after{content:"";position:absolute;right:-110px;top:250px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--tar-signal) 2px,transparent 2.5px) 0 0/10px 10px;opacity:.6}
.tar-sws{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px}
.tar-sws div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tar-sws i{display:block;height:40px;background:var(--c);border:1px solid var(--tar-muted);margin-bottom:5px}
.tar-sws div:nth-child(n+6) i{box-shadow:0 0 18px -2px var(--c)}
.tar-sws b{font-size:11px;font-weight:500}
.tar-sws code{font:500 10px 'JetBrains Mono',monospace;color:var(--tar-muted)}
.tar-type__big{margin:0;font:400 84px/.85 var(--tar-display);color:var(--tar-bg);-webkit-text-stroke:1.5px var(--tar-signal);text-shadow:4px 4px 0 var(--tar-accent-2)}
.tar-type ul{list-style:none;margin:8px 0 0;padding:0}
.tar-type li{display:grid;grid-template-columns:24px 1fr;gap:6px;align-items:baseline;padding:4px 0;border-top:1px dashed var(--tar-line);white-space:nowrap;overflow:hidden}
.tar-type code{font:500 10px 'JetBrains Mono',monospace;color:var(--tar-muted)}
.tar-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tar-btn{font:400 18px/1 var(--tar-display);letter-spacing:.04em;padding:12px 16px 10px;border:2px solid var(--tar-accent);border-radius:var(--tar-radius);cursor:pointer;transition:transform .1s,text-shadow .1s,background .1s}
.tar-btn--p{background:var(--tar-accent);color:var(--tar-bg)}
.tar-btn--p:hover{background:var(--tar-accent-2);border-color:var(--tar-accent-2);transform:skewX(-8deg)}
.tar-btn--s{background:transparent;color:var(--tar-accent)}
.tar-btn--s:hover{text-shadow:2px 0 var(--tar-accent-2),-2px 0 var(--tar-signal)}
.tar-btn--g{background:none;border-color:transparent;padding-left:0;color:var(--tar-text)}
.tar-btn--g:hover{color:var(--tar-signal)}
.tar-f{min-width:0;display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font:700 10px var(--tar-body);letter-spacing:.18em;color:var(--tar-muted)}
.tar-f input,.tar-f select{font:500 15px var(--tar-body);color:var(--tar-text);background:var(--tar-surface);border:1px solid var(--tar-line);border-bottom:2px solid var(--tar-accent);border-radius:0;padding:10px;outline:0;letter-spacing:0;min-width:0}
.tar-f select option{background:var(--tar-surface)}
.tar-f input:focus,.tar-f select:focus{border-color:var(--tar-accent-2);box-shadow:0 0 14px -2px var(--tar-accent-2)}
.tar-badges{display:flex;flex-wrap:wrap;gap:6px}
.tar-bd{font:700 10px/1 var(--tar-body);letter-spacing:.14em;padding:6px 10px;border:1px solid var(--tar-text);border-radius:999px}
.tar-bd--a{background:var(--tar-accent-2);border-color:var(--tar-accent-2);color:var(--tar-bg)}
.tar-bd--b{border-color:var(--tar-signal);color:var(--tar-signal)}
.tar-flyer{grid-column:2/-1;padding:0!important;background:var(--tar-accent)!important;color:var(--tar-bg)}
.tar-flyer__nav{display:flex;gap:18px;align-items:center;padding:10px 18px;border-bottom:2px solid var(--tar-bg);font:700 12px var(--tar-body);letter-spacing:.12em;text-transform:uppercase;flex-wrap:wrap}
.tar-flyer__nav strong{font:400 22px var(--tar-display);margin-right:auto;letter-spacing:.02em}
.tar-flyer__in{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px 18px 18px}
.tar-flyer .tar-tag--g{color:var(--tar-bg)}
.tar-flyer h4{margin:0 0 14px;font:400 clamp(26px,3.2cqw,40px)/.92 var(--tar-display)}
.tar-flyer .tar-btn--p{background:var(--tar-bg);color:var(--tar-accent);border-color:var(--tar-bg)}
.tar-flyer .tar-btn--p:hover{background:var(--tar-accent-2);color:var(--tar-bg)}
.tar-lineup{list-style:none;margin:0;padding:0;border-top:2px solid var(--tar-bg)}
.tar-lineup li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;padding:7px 0;border-bottom:2px solid var(--tar-bg);transition:padding .15s}
.tar-lineup li:hover{padding-left:8px;background:var(--tar-bg);color:var(--tar-accent)}
.tar-lineup time{font:700 13px var(--tar-body);font-variant-numeric:tabular-nums}
.tar-lineup b{font:400 21px/1 var(--tar-display)}
.tar-lineup em{font:700 10px var(--tar-body);font-style:normal;letter-spacing:.14em}
.tar-fit{margin:0 24px 22px;font:700 11px var(--tar-body);letter-spacing:.16em;color:var(--tar-muted)}
@container tar (max-width:980px){.tar-grid{grid-template-columns:1fr 1fr}.tar-intro{grid-row:auto;grid-column:1/-1}.tar-flyer,.tar-ui{grid-column:1/-1}}
@container tar (max-width:620px){.tar-grid{grid-template-columns:1fr;margin:14px}.tar-grid>div{grid-column:1/-1}.tar-flyer__in,.tar-ui{grid-template-columns:1fr}.tar-flyer__nav span{display:none}.tar-fit{margin:0 14px 16px}.tar-title{font-size:96px}.tar-intro::after{display:none}.tar-sws{grid-template-columns:1fr 1fr}.tar-sws div{display:grid;grid-template-columns:40px 1fr;column-gap:8px;align-items:center}.tar-sws i{grid-row:span 2;height:32px;margin:0}.tar-ui__a{margin-bottom:12px}.tar-type li{white-space:normal}}
@media (prefers-reduced-motion:reduce){.tar-tick__in{animation:none}.tar-btn,.tar-lineup li{transition:none}}
Meer uit thema's
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 →