Seventies Nieuw

Warm oranje, roestbruin en mosterd, ronde retroletters, strepen die de hoek om buigen en volle pilvormen. Voor horeca, platenzaken en merken met een knipoog.

Bekijk op volledig scherm ↗

Thema 02 · retro warm

Seventies

Warm als een draaitafel om middernacht: ronde letters, strepen die de bocht nemen en kleuren uit oma's keuken.

Palet

achtergrond#F4E4C9
oppervlak#FBF1DE
tekst#3B2416
gedempt#7A5B43
lijn#D9BE96
accent#D9601E
accent-2#8A4A23
signaal#E3A21A

Letters · Pally / Chillax

GroovyaBcDeFg 1975

56Vinyl

32Kant B

20Avond met de draaitafel

16Soul en funk, vrijdag vanaf 21:00.

13Entree € 7,50 · vaste gasten gratis

Knoppen en velden

Je naam Avond

UitverkochtNieuw binnen2e hands

Plaat van de week

Soul Kitchen, vol. 3

Heruitgave op 180 grams vinyl, met de originele hoes uit 1974.

€ 29,95LP

Oudegracht 211 · Utrecht

Platen kopen, borrel erbij.

Overdag een platenzaak met 6.000 tweedehands lp's, 's avonds een bar met dj. Woensdag t/m zondag open.

vr 16 oktFunk & Soul Night21:00
za 17 oktPlatenbeurs, 60 bakken11:00
zo 18 oktJazz op zondag15:00

Past bij cafés, platenzaken, vintage-winkels, festivals, lunchrooms, bakkerijen met karakter.

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.

<!-- Seventies · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tsv-thm"><div class="tsv-wrap">
<div class="tsv-head">
  <div class="tsv-stripes" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
  <div class="tsv-head__txt"><p class="tsv-kick">Thema 02 · retro warm</p><h3 class="tsv-title">Seventies</h3><p class="tsv-mood">Warm als een draaitafel om middernacht: ronde letters, strepen die de bocht nemen en kleuren uit oma's keuken.</p></div>
  <div class="tsv-sun" aria-hidden="true"></div>
</div>
<div class="tsv-body">
  <div class="tsv-col tsv-pal">
    <p class="tsv-lbl">Palet</p>
    <ul class="tsv-pills">
      <li style="--c:var(--tsv-bg);--f:var(--tsv-text)"><b>achtergrond</b><code>#F4E4C9</code></li>
      <li style="--c:var(--tsv-surface);--f:var(--tsv-text)"><b>oppervlak</b><code>#FBF1DE</code></li>
      <li style="--c:var(--tsv-text);--f:#FBF1DE"><b>tekst</b><code>#3B2416</code></li>
      <li style="--c:var(--tsv-muted);--f:#FBF1DE"><b>gedempt</b><code>#7A5B43</code></li>
      <li style="--c:var(--tsv-line);--f:var(--tsv-text)"><b>lijn</b><code>#D9BE96</code></li>
      <li style="--c:var(--tsv-accent);--f:#FBF1DE"><b>accent</b><code>#D9601E</code></li>
      <li style="--c:var(--tsv-accent-2);--f:#FBF1DE"><b>accent-2</b><code>#8A4A23</code></li>
      <li style="--c:var(--tsv-signal);--f:var(--tsv-text)"><b>signaal</b><code>#E3A21A</code></li>
    </ul>
  </div>
  <div class="tsv-col tsv-type">
    <p class="tsv-lbl">Letters · Pally / Chillax</p>
    <div class="tsv-spec"><span class="tsv-spec__big">Groovy</span><span class="tsv-spec__alt">aBcDeFg 1975</span></div>
    <div class="tsv-scale">
      <div><code>56</code><span style="font:700 40px/1 var(--tsv-display)">Vinyl</span></div>
      <div><code>32</code><span style="font:700 28px/1 var(--tsv-display)">Kant B</span></div>
      <div><code>20</code><span style="font:500 20px/1.2 var(--tsv-display)">Avond met de draaitafel</span></div>
      <div><code>16</code><span style="font-size:16px">Soul en funk, vrijdag vanaf 21:00.</span></div>
      <div><code>13</code><span style="font-size:13px;color:var(--tsv-muted)">Entree € 7,50 · vaste gasten gratis</span></div>
    </div>
  </div>
  <div class="tsv-col tsv-ui">
    <p class="tsv-lbl">Knoppen en velden</p>
    <div class="tsv-btns"><button class="tsv-btn tsv-btn--p" type="button">Reserveer een tafel</button><button class="tsv-btn tsv-btn--s" type="button">Programma</button><button class="tsv-btn tsv-btn--g" type="button">Lees meer</button></div>
    <label class="tsv-f"><span>Je naam</span><input type="text" placeholder="Ria de Groot"></label>
    <label class="tsv-f"><span>Avond</span><select><option>Vrijdag 16 oktober</option><option>Zaterdag 17 oktober</option></select></label>
    <div class="tsv-badges"><span class="tsv-bd tsv-bd--o">Uitverkocht</span><span class="tsv-bd tsv-bd--m">Nieuw binnen</span><span class="tsv-bd tsv-bd--l">2e hands</span></div>
  </div>
  <div class="tsv-col tsv-card">
    <div class="tsv-rec" aria-hidden="true"><i></i></div>
    <p class="tsv-lbl">Plaat van de week</p>
    <h4>Soul Kitchen, vol. 3</h4>
    <p>Heruitgave op 180 grams vinyl, met de originele hoes uit 1974.</p>
    <div class="tsv-card__ft"><strong>€ 29,95</strong><span class="tsv-bd tsv-bd--l">LP</span></div>
  </div>
</div>
<div class="tsv-hero">
  <div class="tsv-hero__nav"><strong>Platenbar <em>Draaitafel</em></strong><span>Platen</span><span>Agenda</span><span>Bar</span><span>Contact</span><button class="tsv-btn tsv-btn--p tsv-btn--sm" type="button">Tafel boeken</button></div>
  <div class="tsv-hero__in">
    <div><p class="tsv-kick">Oudegracht 211 · Utrecht</p><h4 class="tsv-hero__h">Platen kopen, borrel erbij.</h4><p class="tsv-hero__p">Overdag een platenzaak met 6.000 tweedehands lp's, 's avonds een bar met dj. Woensdag t/m zondag open.</p></div>
    <ul class="tsv-agenda"><li><time>vr 16 okt</time><span>Funk &amp; Soul Night</span><b>21:00</b></li><li><time>za 17 okt</time><span>Platenbeurs, 60 bakken</span><b>11:00</b></li><li><time>zo 18 okt</time><span>Jazz op zondag</span><b>15:00</b></li></ul>
  </div>
</div>
<p class="tsv-fit"><strong>Past bij</strong> cafés, platenzaken, vintage-winkels, festivals, lunchrooms, bakkerijen met karakter.</p>
</div></div>
</div>

/* Seventies · NedDev · eigen werk. */
/* fonts (Fontshare): pally@400,500,700 + chillax@400,500,600 */
.tsv-thm{--tsv-bg:#F4E4C9;--tsv-surface:#FBF1DE;--tsv-text:#3B2416;--tsv-muted:#7A5B43;--tsv-line:#D9BE96;--tsv-accent:#D9601E;--tsv-accent-2:#8A4A23;--tsv-signal:#E3A21A;--tsv-radius:28px;--tsv-display:'Pally',sans-serif;--tsv-body:'Chillax',sans-serif;container:tsv/inline-size;background:var(--tsv-bg);color:var(--tsv-text);font-family:var(--tsv-body);padding:28px}
.tsv-thm,.tsv-thm *{box-sizing:border-box}
.tsv-wrap{display:flex;flex-direction:column;gap:18px}
.tsv-head{position:relative;display:grid;grid-template-columns:200px 1fr 220px;gap:28px;align-items:center;background:var(--tsv-surface);border-radius:var(--tsv-radius);overflow:hidden;min-height:200px}
.tsv-stripes{position:relative;align-self:stretch}
.tsv-stripes i{position:absolute;border-style:solid;border-color:transparent;border-top-right-radius:999px;border-width:18px 18px 0 0}
.tsv-stripes i:nth-child(1){left:-18px;top:28px;width:196px;bottom:-18px;border-color:var(--tsv-signal)}
.tsv-stripes i:nth-child(2){left:-18px;top:54px;width:170px;bottom:-18px;border-color:var(--tsv-accent)}
.tsv-stripes i:nth-child(3){left:-18px;top:80px;width:144px;bottom:-18px;border-color:var(--tsv-accent-2)}
.tsv-stripes i:nth-child(4){left:-18px;top:106px;width:118px;bottom:-18px;border-color:var(--tsv-text)}
.tsv-kick,.tsv-lbl{margin:0 0 10px;font:600 12px/1.2 var(--tsv-body);letter-spacing:.06em;color:var(--tsv-accent-2)}
.tsv-title{margin:0;font:700 clamp(54px,8cqw,104px)/.9 var(--tsv-display);letter-spacing:-.03em;color:var(--tsv-accent)}
.tsv-mood{margin:12px 0 0;max-width:46ch;font-size:16px;line-height:1.5}
.tsv-sun{align-self:stretch;background:repeating-radial-gradient(circle at 50% 120%,var(--tsv-accent) 0 18px,var(--tsv-signal) 18px 36px,var(--tsv-accent-2) 36px 54px,var(--tsv-surface) 54px 64px)}
.tsv-body{display:grid;grid-template-columns:1fr 1.15fr 1.1fr .9fr;gap:18px}
.tsv-col{background:var(--tsv-surface);border-radius:var(--tsv-radius);padding:20px;min-width:0}
.tsv-pills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tsv-pills li{display:flex;justify-content:space-between;align-items:center;background:var(--c);color:var(--f);border-radius:999px;padding:7px 14px;border:2px solid var(--tsv-text);font-size:13px}
.tsv-pills b{font-weight:600}
.tsv-pills code{font:500 11px 'JetBrains Mono',monospace}
.tsv-spec{display:flex;flex-direction:column;border-bottom:3px dotted var(--tsv-line);padding-bottom:8px;margin-bottom:8px}
.tsv-spec__big{font:700 64px/1 var(--tsv-display);color:var(--tsv-accent-2);letter-spacing:-.03em}
.tsv-spec__alt{font:500 15px var(--tsv-display);color:var(--tsv-muted)}
.tsv-scale div{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline;padding:4px 0;white-space:nowrap;overflow:hidden}
.tsv-scale span{overflow:hidden;text-overflow:ellipsis}
.tsv-scale code{font:500 10px 'JetBrains Mono',monospace;color:var(--tsv-muted)}
.tsv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tsv-btn{font:600 14px/1 var(--tsv-display);padding:13px 20px;border-radius:999px;border:3px solid var(--tsv-text);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tsv-btn--p{background:var(--tsv-accent);color:var(--tsv-surface);box-shadow:0 4px 0 var(--tsv-text)}
.tsv-btn--p:hover{background:var(--tsv-accent-2);box-shadow:0 2px 0 var(--tsv-text)}
.tsv-btn--s{background:var(--tsv-signal);color:var(--tsv-text)}
.tsv-btn--s:hover{background:var(--tsv-text);color:var(--tsv-signal)}
.tsv-btn--g{background:none;border-color:transparent;color:var(--tsv-accent-2);text-decoration:underline wavy var(--tsv-accent);text-underline-offset:5px}
.tsv-btn--g:hover{color:var(--tsv-accent)}
.tsv-btn--sm{padding:9px 14px;font-size:13px}
.tsv-f{min-width:0;display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500;margin-bottom:10px}
.tsv-f input,.tsv-f select{font:500 15px var(--tsv-body);padding:11px 16px;border-radius:999px;border:2px solid var(--tsv-accent-2);background:var(--tsv-bg);color:var(--tsv-text);outline:0;min-width:0}
.tsv-f input:focus,.tsv-f select:focus{border-color:var(--tsv-accent);box-shadow:0 0 0 4px var(--tsv-signal)}
.tsv-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tsv-bd{display:inline-block;font:700 12px/1 var(--tsv-display);padding:7px 12px;border-radius:999px}
.tsv-bd--o{background:var(--tsv-accent);color:var(--tsv-surface)}
.tsv-bd--m{background:var(--tsv-signal);color:var(--tsv-text)}
.tsv-bd--l{border:2px solid var(--tsv-accent-2);color:var(--tsv-accent-2)}
.tsv-card{display:flex;flex-direction:column;background:var(--tsv-accent-2);color:var(--tsv-surface)}
.tsv-card .tsv-lbl{color:var(--tsv-signal)}
.tsv-rec{width:120px;height:120px;border-radius:50%;margin:0 auto 14px;background:repeating-radial-gradient(circle,#2a1a10 0 2px,#3b2416 2px 4px);display:grid;place-items:center;transition:transform 1.2s}
.tsv-rec i{width:40px;height:40px;border-radius:50%;background:var(--tsv-signal);box-shadow:inset 0 0 0 16px var(--tsv-signal),inset 0 0 0 20px var(--tsv-text)}
.tsv-card:hover .tsv-rec{transform:rotate(200deg)}
.tsv-card h4{margin:0 0 6px;font:700 22px/1.05 var(--tsv-display)}
.tsv-card p:not(.tsv-lbl){margin:0;font-size:14px;line-height:1.45;opacity:.9}
.tsv-card__ft{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;font:700 18px var(--tsv-display)}
.tsv-card .tsv-bd--l{border-color:var(--tsv-signal);color:var(--tsv-signal)}
.tsv-hero{background:var(--tsv-text);color:var(--tsv-surface);border-radius:var(--tsv-radius);padding:18px 26px 26px;position:relative;overflow:hidden}
.tsv-hero::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle,var(--tsv-accent) 0 12px,transparent 12px 24px);opacity:.55}
.tsv-hero__nav{display:flex;align-items:center;gap:22px;font-size:14px;border-bottom:2px solid rgba(251,241,222,.18);padding-bottom:14px;margin-bottom:18px;flex-wrap:wrap}
.tsv-hero__nav strong{font:700 20px var(--tsv-display);margin-right:auto}
.tsv-hero__nav em{font-style:normal;color:var(--tsv-signal)}
.tsv-hero__in{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;position:relative;z-index:1}
.tsv-hero .tsv-kick{color:var(--tsv-signal)}
.tsv-hero__h{margin:0 0 10px;font:700 clamp(30px,4.4cqw,52px)/.98 var(--tsv-display);color:var(--tsv-accent);letter-spacing:-.02em}
.tsv-hero__p{margin:0;max-width:48ch;font-size:15px;line-height:1.55;opacity:.9}
.tsv-agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tsv-agenda li{display:grid;grid-template-columns:80px 1fr auto;gap:12px;align-items:center;background:var(--tsv-surface);color:var(--tsv-text);border-radius:999px;padding:10px 18px;font-size:14px;transition:background .2s}
.tsv-agenda li:hover{background:var(--tsv-signal)}
.tsv-agenda time{font:700 13px var(--tsv-display);color:var(--tsv-accent)}
.tsv-agenda b{font-variant-numeric:tabular-nums}
.tsv-fit{margin:0;font-size:14px;color:var(--tsv-muted)}
.tsv-fit strong{color:var(--tsv-accent-2)}
@container tsv (max-width:980px){.tsv-body{grid-template-columns:1fr 1fr}}
@container tsv (max-width:620px){.tsv-head{grid-template-columns:1fr;padding:22px}.tsv-stripes,.tsv-sun{display:none}.tsv-body{grid-template-columns:1fr}.tsv-hero__in{grid-template-columns:1fr}.tsv-hero__nav span{display:none}.tsv-thm{padding:12px}.tsv-agenda li{grid-template-columns:70px 1fr auto;border-radius:22px;padding:10px 14px}}
@media (prefers-reduced-motion:reduce){.tsv-rec,.tsv-btn{transition:none}.tsv-card:hover .tsv-rec{transform: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 →