NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Retro-Future Y2K

Cyber Y2K, updated: chrome gradients, iridescent blue-magenta, icy blue and electric lime on deep night blue, with capsule shapes and ticket cut-outs. For streetwear, events and music.

View full screen ↗

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

How to use it

  1. Paste the HTML where the themes should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. No JavaScript needed.
<!-- 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>

More themes

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 →