Seventies New

Warm orange, rust brown and mustard, round retro type, stripes that bend around corners and full pill shapes. For hospitality, record shops and brands with a wink.

View full screen ↗

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.

How to use it

Paste the HTML where the themes should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- 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}}

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 →