NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Retro-Future Y2K

Cyber-Y2K in de versie van nu: chroom-verloop, iriserend blauw-magenta, ijsblauw en elektrisch limoen op diep nachtblauw, met capsulevormen en ticket-uitsnedes. Voor streetwear, events en muziek.

Bekijk op volledig scherm ↗

THEMA 07RETRO-FUTURE

Y2K
chroom

Het jaar 2000 zoals het nooit was: glanzend chroom, iriserende randen en limoen dat oplicht in het donker.

DROP 07

Nachtjas met reflecterende biezen

Sora voor tekst: rond, technisch en helder op donker. Regelafstand 1,6 voor rust tussen al het glimmen.

  • Clash Display 700 · 88
  • Clash Display 600 · 30
  • Sora 600 · 20
  • Sora 300 · 15

NOORDLICHTstreetwear · Amsterdam-Noord

Drop 07 · Glimwinter

Datum
za 15.11
Tijd
12:00
Stuks
220
Nachtjas ReflectMaat S tot XL · € 189

Palet

Achtergrond#070A1F
Oppervlak#121735
Tekst#EEF3FF
Gedempt#98A2CC
Lijn#2A3264
Accent · ijsblauw#A6ECFF
Accent 2 · limoen#C8FF00
Signaal · magenta#FF3EC8
Chroom-verloop5 stops

Knoppen

Invoer

Badges

nieuwpre-orderlaatste 12unisex

Past bij streetwear en sneakers · festivals en clubavonden · muziek en merch · gaming-events · jongerenmerken

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Geen JavaScript nodig.
<!-- Retro-Future Y2K · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ty2"><div class="ty2__in">
  <div class="ty2__orbit" aria-hidden="true"><i></i><i></i></div>
  <div class="ty2__left">
    <p class="ty2__eye"><span class="ty2__cap">THEMA 07</span><span class="ty2__cap ty2__cap--o">RETRO-FUTURE</span></p>
    <h3 class="ty2__name">Y2K<br><span>chroom</span></h3>
    <p class="ty2__mood">Het jaar 2000 zoals het nooit was: glanzend chroom, iriserende randen en limoen dat oplicht in het donker.</p>
    <div class="ty2__type">
      <p class="ty2__t1">DROP 07</p>
      <p class="ty2__t2">Nachtjas met reflecterende biezen</p>
      <p class="ty2__t3">Sora voor tekst: rond, technisch en helder op donker. Regelafstand 1,6 voor rust tussen al het glimmen.</p>
      <ul class="ty2__scale"><li>Clash Display 700 · 88</li><li>Clash Display 600 · 30</li><li>Sora 600 · 20</li><li>Sora 300 · 15</li></ul>
    </div>
  </div>
  <div class="ty2__ticket">
    <div class="ty2__tk-top">
      <p class="ty2__tk-brand">NOORDLICHT<small>streetwear · Amsterdam-Noord</small></p>
      <p class="ty2__tk-t">Drop 07 · Glimwinter</p>
      <dl class="ty2__tk-dl"><div><dt>Datum</dt><dd>za 15.11</dd></div><div><dt>Tijd</dt><dd>12:00</dd></div><div><dt>Stuks</dt><dd>220</dd></div></dl>
      <div class="ty2__prod"><span class="ty2__prod-img"></span><span><b>Nachtjas Reflect</b><small>Maat S tot XL · € 189</small></span></div>
    </div>
    <div class="ty2__tk-cut"></div>
    <div class="ty2__tk-bot">
      <button class="ty2__btn ty2__btn--p" type="button">Zet herinnering</button>
      <span class="ty2__barcode"></span>
    </div>
  </div>
  <div class="ty2__pal">
    <p class="ty2__lbl">Palet</p>
    <div class="ty2__cap-sw" style="--c:#070A1F"><i></i><span>Achtergrond</span><code>#070A1F</code></div>
    <div class="ty2__cap-sw" style="--c:#121735"><i></i><span>Oppervlak</span><code>#121735</code></div>
    <div class="ty2__cap-sw" style="--c:#EEF3FF"><i></i><span>Tekst</span><code>#EEF3FF</code></div>
    <div class="ty2__cap-sw" style="--c:#98A2CC"><i></i><span>Gedempt</span><code>#98A2CC</code></div>
    <div class="ty2__cap-sw" style="--c:#2A3264"><i></i><span>Lijn</span><code>#2A3264</code></div>
    <div class="ty2__cap-sw" style="--c:#A6ECFF"><i></i><span>Accent · ijsblauw</span><code>#A6ECFF</code></div>
    <div class="ty2__cap-sw" style="--c:#C8FF00"><i></i><span>Accent 2 · limoen</span><code>#C8FF00</code></div>
    <div class="ty2__cap-sw" style="--c:#FF3EC8"><i></i><span>Signaal · magenta</span><code>#FF3EC8</code></div>
    <div class="ty2__cap-sw ty2__cap-sw--chrome"><i></i><span>Chroom-verloop</span><code>5 stops</code></div>
  </div>
  <div class="ty2__strip">
    <div class="ty2__cell">
      <p class="ty2__lbl">Knoppen</p>
      <div class="ty2__btns">
        <button class="ty2__btn ty2__btn--p" type="button">Shop de drop</button>
        <button class="ty2__btn ty2__btn--s" type="button">Lookbook</button>
        <button class="ty2__btn ty2__btn--g" type="button">Maattabel</button>
        <button class="ty2__btn ty2__btn--p is-hover" type="button">Hover</button>
      </div>
    </div>
    <div class="ty2__cell">
      <p class="ty2__lbl">Invoer</p>
      <div class="ty2__form"><input class="ty2__input" type="text" value="jij@voorbeeld.nl" aria-label="E-mail"><select class="ty2__sel" aria-label="Maat"><option>Maat M</option><option>Maat L</option></select></div>
    </div>
    <div class="ty2__cell">
      <p class="ty2__lbl">Badges</p>
      <div class="ty2__badges"><span class="ty2__bdg ty2__bdg--l">nieuw</span><span class="ty2__bdg ty2__bdg--i">pre-order</span><span class="ty2__bdg ty2__bdg--m">laatste 12</span><span class="ty2__bdg">unisex</span></div>
    </div>
  </div>
  <p class="ty2__fit"><b>Past bij</b> streetwear en sneakers · festivals en clubavonden · muziek en merch · gaming-events · jongerenmerken</p>
</div></div>
</div>

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 →