Memphis Nieuw

Roze, turquoise en geel met kronkels, stippen, zigzag en harde zwarte randen met verschoven schaduw. Voor jonge merken, kinderopvang, foodconcepten en events.

Bekijk op volledig scherm ↗

thema 06

Memphis

Geen netjes, wel raak. Patronen die botsen, kleuren die durven en randen die je ziet.

Kleuren

achtergrond#FFF6E9 oppervlak#FFFFFF tekst#161616 gedempt#57534E lijn#161616 accent#FF5C8A accent-2#2EC4B6 signaal#FFD23F

Britney + Satoshi

Boba!

Taro latte 32

Zelf je toppings kiezen 20

Tapioca, popping boba of jelly. 15

Nieuw deze maand 12

4 vaste patronen, nooit meer dan 2 per scherm

Doen

Je naamSmaak

nieuwvegan-20% na 16:00

€ 5,40

Mango Madness

Groene thee, verse mango, popping boba. Large 700 ml.

700 ml

Bubbelthee in 40 smaken, op Stratumseind en in de Piusstraat.

Elke dag open van 12:00 tot 22:00. Studenten 10% korting met collegekaart.

past bij: bubbeltea- en ijszaken, kinderopvang, speelgoedwinkels, festivals, jongerenmerken, studentenverenigingen

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.

<!-- Memphis · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tmf-thm">
<svg class="tmf-svg" width="0" height="0" aria-hidden="true"><defs><path id="tmf-sq" d="M2 12c6-10 12 10 18 0s12 10 18 0 12 10 18 0 12 10 18 0" fill="none" stroke-width="5" stroke-linecap="round"/></defs></svg>
<div class="tmf-board">
  <div class="tmf-intro">
    <svg class="tmf-deco tmf-deco--sq" viewBox="0 0 76 24" aria-hidden="true"><use href="#tmf-sq" stroke="var(--tmf-accent-2)"/></svg>
    <i class="tmf-deco tmf-deco--tri" aria-hidden="true"></i><i class="tmf-deco tmf-deco--dot" aria-hidden="true"></i>
    <p class="tmf-kick">thema 06</p>
    <h3 class="tmf-title">Mem<span>phis</span></h3>
    <p class="tmf-mood">Geen netjes, wel raak. Patronen die botsen, kleuren die durven en randen die je ziet.</p>
  </div>
  <div class="tmf-pal">
    <p class="tmf-lbl">Kleuren</p>
    <div class="tmf-chips">
      <span class="tmf-chip tmf-chip--sq" style="--c:var(--tmf-bg)"><i></i><b>achtergrond</b><code>#FFF6E9</code></span>
      <span class="tmf-chip tmf-chip--o" style="--c:var(--tmf-surface)"><i></i><b>oppervlak</b><code>#FFFFFF</code></span>
      <span class="tmf-chip tmf-chip--sq" style="--c:var(--tmf-text)"><i></i><b>tekst</b><code>#161616</code></span>
      <span class="tmf-chip tmf-chip--tri" style="--c:var(--tmf-muted)"><i></i><b>gedempt</b><code>#57534E</code></span>
      <span class="tmf-chip tmf-chip--z" style="--c:var(--tmf-line)"><i></i><b>lijn</b><code>#161616</code></span>
      <span class="tmf-chip tmf-chip--o" style="--c:var(--tmf-accent)"><i></i><b>accent</b><code>#FF5C8A</code></span>
      <span class="tmf-chip tmf-chip--tri" style="--c:var(--tmf-accent-2)"><i></i><b>accent-2</b><code>#2EC4B6</code></span>
      <span class="tmf-chip tmf-chip--sq" style="--c:var(--tmf-signal)"><i></i><b>signaal</b><code>#FFD23F</code></span>
    </div>
  </div>
  <div class="tmf-type">
    <p class="tmf-lbl">Britney + Satoshi</p>
    <p class="tmf-type__big">Boba!</p>
    <div class="tmf-type__rows"><p style="font:700 30px/1 var(--tmf-display)">Taro latte <code>32</code></p><p style="font:700 20px/1.1 var(--tmf-body)">Zelf je toppings kiezen <code>20</code></p><p style="font-size:15px">Tapioca, popping boba of jelly. <code>15</code></p><p style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em">Nieuw deze maand <code>12</code></p></div>
    <div class="tmf-pats" aria-label="Patronen"><i class="tmf-pat tmf-pat--dot"></i><i class="tmf-pat tmf-pat--zig"></i><i class="tmf-pat tmf-pat--str"></i><i class="tmf-pat tmf-pat--grid"></i><span>4 vaste patronen, nooit meer dan 2 per scherm</span></div>
  </div>
  <div class="tmf-ui">
    <p class="tmf-lbl">Doen</p>
    <div class="tmf-btns"><button class="tmf-btn tmf-btn--p" type="button">Bestel nu</button><button class="tmf-btn tmf-btn--s" type="button">Menu</button><button class="tmf-btn tmf-btn--g" type="button">Vestigingen</button></div>
    <div class="tmf-fields"><label class="tmf-f"><span>Je naam</span><input type="text" placeholder="Noor"></label><label class="tmf-f"><span>Smaak</span><select><option>Mango</option><option>Taro</option><option>Lychee</option></select></label></div>
    <div class="tmf-badges"><span class="tmf-bd tmf-bd--a">nieuw</span><span class="tmf-bd tmf-bd--b">vegan</span><span class="tmf-bd tmf-bd--c">-20% na 16:00</span></div>
  </div>
  <div class="tmf-card">
    <span class="tmf-card__stamp">€ 5,40</span>
    <div class="tmf-card__art" aria-hidden="true"><i></i><i></i><i></i></div>
    <h4>Mango Madness</h4>
    <p>Groene thee, verse mango, popping boba. Large 700 ml.</p>
    <div class="tmf-card__ft"><span class="tmf-bd tmf-bd--b">700 ml</span><button class="tmf-btn tmf-btn--p tmf-btn--sm" type="button">+ In bakje</button></div>
  </div>
  <div class="tmf-hero">
    <div class="tmf-hero__nav"><strong>Bubbels<span>&amp;</span>Co</strong><span>Menu</span><span>Eindhoven</span><span>Tilburg</span><span>Feestje?</span></div>
    <div class="tmf-hero__in">
      <h4>Bubbelthee in 40 smaken, op <mark>Stratumseind</mark> en in de Piusstraat.</h4>
      <div class="tmf-hero__side"><p>Elke dag open van 12:00 tot 22:00. Studenten 10% korting met collegekaart.</p><button class="tmf-btn tmf-btn--p" type="button">Bekijk alle 40 smaken</button></div>
    </div>
  </div>
  <p class="tmf-fit"><b>past bij:</b> bubbeltea- en ijszaken, kinderopvang, speelgoedwinkels, festivals, jongerenmerken, studentenverenigingen</p>
</div>
</div>
</div>

/* Memphis · NedDev · eigen werk. */
/* fonts (Fontshare): britney@400,700 + satoshi@400,500,700 */
.tmf-thm{--tmf-bg:#FFF6E9;--tmf-surface:#FFFFFF;--tmf-text:#161616;--tmf-muted:#57534E;--tmf-line:#161616;--tmf-accent:#FF5C8A;--tmf-accent-2:#2EC4B6;--tmf-signal:#FFD23F;--tmf-border:2.5px solid var(--tmf-line);--tmf-shadow:6px 6px 0 var(--tmf-line);--tmf-display:'Britney',sans-serif;--tmf-body:'Satoshi',sans-serif;container:tmf/inline-size;color:var(--tmf-text);font-family:var(--tmf-body);padding:30px;background-color:var(--tmf-bg);background-image:radial-gradient(var(--tmf-line) 1.4px,transparent 1.6px);background-size:22px 22px;position:relative;overflow:hidden}
.tmf-thm,.tmf-thm *{box-sizing:border-box}
.tmf-svg{position:absolute}
.tmf-board{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;grid-auto-flow:dense;gap:22px;position:relative}
.tmf-board>div{background:var(--tmf-surface);border:var(--tmf-border);box-shadow:var(--tmf-shadow);padding:20px;min-width:0}
.tmf-kick,.tmf-lbl{margin:0 0 10px;font:700 12px/1 var(--tmf-body);letter-spacing:.08em;text-transform:uppercase}
.tmf-lbl{display:inline-block;background:var(--tmf-signal);border:2px solid var(--tmf-line);padding:5px 8px;transform:rotate(-2deg)}
.tmf-intro{grid-column:span 2;position:relative;overflow:hidden;background:var(--tmf-accent)!important;border-radius:0 80px 0 0}
.tmf-title{margin:0;font:700 clamp(58px,8cqw,104px)/.9 var(--tmf-display);letter-spacing:-.02em;color:var(--tmf-surface);-webkit-text-stroke:2.5px var(--tmf-line);text-shadow:5px 5px 0 var(--tmf-line);position:relative}
.tmf-title span{color:var(--tmf-signal)}
.tmf-mood{margin:14px 0 0;max-width:38ch;font-size:16px;font-weight:500;line-height:1.45;position:relative}
.tmf-deco{position:absolute;display:block}
.tmf-deco--sq{width:150px;right:30px;top:24px;transform:rotate(-14deg)}
.tmf-deco--tri{right:60px;bottom:26px;width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--tmf-signal);filter:drop-shadow(4px 4px 0 var(--tmf-line));transform:rotate(18deg)}
.tmf-deco--dot{right:190px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:repeating-linear-gradient(45deg,var(--tmf-line) 0 3px,transparent 3px 10px);border:2.5px solid var(--tmf-line)}
.tmf-pal{grid-column:span 2}
.tmf-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 10px}
.tmf-chip{display:flex;flex-direction:column;gap:2px;min-width:0}
.tmf-chip i{display:block;width:46px;height:46px;background:var(--c);border:2px solid var(--tmf-line);margin-bottom:6px;transition:transform .2s}
.tmf-chip:hover i{transform:rotate(12deg) scale(1.08)}
.tmf-chip--o i{border-radius:50%}
.tmf-chip--tri i{border:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--c)}
.tmf-chip--z i{border:0;background:linear-gradient(135deg,var(--c) 25%,transparent 25%) -11px 0/22px 22px,linear-gradient(225deg,var(--c) 25%,transparent 25%) -11px 0/22px 22px,linear-gradient(315deg,var(--c) 25%,transparent 25%) 0 0/22px 22px,linear-gradient(45deg,var(--c) 25%,var(--tmf-signal) 25%) 0 0/22px 22px}
.tmf-chip b{font-size:12px;font-weight:700}
.tmf-chip code{font:500 10px 'JetBrains Mono',monospace;color:var(--tmf-muted)}
.tmf-type{grid-column:span 2;background:var(--tmf-accent-2)!important;transform:rotate(-1deg)}
.tmf-type__big{margin:0 0 8px;font:700 84px/.9 var(--tmf-display);color:var(--tmf-signal);-webkit-text-stroke:2px var(--tmf-line)}
.tmf-type__rows p{margin:0;padding:6px 0;border-top:2px dashed var(--tmf-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tmf-type__rows code{font:500 10px 'JetBrains Mono',monospace;letter-spacing:0;text-transform:none;background:var(--tmf-surface);padding:1px 4px;border-radius:3px;vertical-align:middle}
.tmf-ui{grid-column:span 1}
.tmf-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.tmf-btn{font:700 15px/1 var(--tmf-body);padding:12px 18px;border:2.5px solid var(--tmf-line);border-radius:14px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.tmf-btn--p{background:var(--tmf-signal);color:var(--tmf-text);box-shadow:4px 4px 0 var(--tmf-line)}
.tmf-btn--p:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tmf-line)}
.tmf-btn--s{background:var(--tmf-accent-2);color:var(--tmf-text);border-radius:999px}
.tmf-btn--s:hover{background:var(--tmf-accent)}
.tmf-btn--g{background:none;border-color:transparent;padding-left:0;padding-right:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3c3-4 7 4 10 0s7 4 10 0' fill='none' stroke='%23FF5C8A' stroke-width='2'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:0 100%;background-size:16px 6px}
.tmf-btn--g:hover{color:var(--tmf-accent)}
.tmf-fields{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.tmf-f{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700}
.tmf-f input,.tmf-f select{font:500 15px var(--tmf-body);padding:10px 12px;border:2.5px solid var(--tmf-line);border-radius:10px;background:var(--tmf-bg);color:var(--tmf-text);outline:0;min-width:0}
.tmf-f input:focus,.tmf-f select:focus{box-shadow:4px 4px 0 var(--tmf-accent)}
.tmf-badges{display:flex;flex-wrap:wrap;gap:6px}
.tmf-bd{font:700 12px/1 var(--tmf-body);padding:6px 10px;border:2px solid var(--tmf-line)}
.tmf-bd--a{background:var(--tmf-accent);border-radius:999px;transform:rotate(-4deg)}
.tmf-bd--b{background:var(--tmf-accent-2)}
.tmf-bd--c{background:var(--tmf-signal);border-radius:4px 14px}
.tmf-card{grid-column:span 1;position:relative;background:var(--tmf-signal)!important;border-radius:28px 0 28px 0;transition:transform .2s}
.tmf-card:hover{transform:rotate(2deg)}
.tmf-card__stamp{position:absolute;right:-12px;top:-14px;width:74px;height:74px;border-radius:50%;background:var(--tmf-accent);border:2.5px solid var(--tmf-line);display:grid;place-items:center;font:700 15px var(--tmf-body);transform:rotate(12deg)}
.tmf-card__art{height:96px;position:relative;margin-bottom:10px}
.tmf-card__art i{position:absolute;display:block;border:2.5px solid var(--tmf-line)}
.tmf-card__art i:nth-child(1){left:10px;top:4px;width:60px;height:88px;background:var(--tmf-surface);border-radius:4px 4px 18px 18px}
.tmf-card__art i:nth-child(2){left:22px;top:52px;width:12px;height:12px;border-radius:50%;background:var(--tmf-text);box-shadow:16px 8px 0 0 var(--tmf-text),6px 20px 0 0 var(--tmf-text)}
.tmf-card__art i:nth-child(3){left:46px;top:-14px;width:6px;height:40px;background:var(--tmf-accent-2);transform:rotate(14deg)}
.tmf-card h4{margin:0 0 6px;font:700 24px/1 var(--tmf-display)}
.tmf-card p{margin:0;font-size:14px;line-height:1.45}
.tmf-pats{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.tmf-pats span{font-size:12px;font-weight:700}
.tmf-pat{display:block;width:44px;height:44px;border:2.5px solid var(--tmf-line);background-color:var(--tmf-surface)}
.tmf-pat--dot{background-image:radial-gradient(var(--tmf-line) 2px,transparent 2.5px);background-size:9px 9px}
.tmf-pat--zig{background:linear-gradient(135deg,var(--tmf-accent) 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,var(--tmf-accent) 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(315deg,var(--tmf-accent) 25%,transparent 25%) 0 0/12px 12px,linear-gradient(45deg,var(--tmf-accent) 25%,var(--tmf-surface) 25%) 0 0/12px 12px}
.tmf-pat--str{background:repeating-linear-gradient(-45deg,var(--tmf-line) 0 3px,var(--tmf-signal) 3px 9px);border-radius:50%}
.tmf-pat--grid{background:linear-gradient(var(--tmf-line) 2px,transparent 2px) 0 0/11px 11px,linear-gradient(90deg,var(--tmf-line) 2px,var(--tmf-surface) 2px) 0 0/11px 11px}
.tmf-card{display:flex;flex-direction:column}
.tmf-card__ft{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tmf-btn--sm{padding:9px 12px;font-size:13px}
.tmf-hero{grid-column:span 4;padding:0!important;background:var(--tmf-text)!important;color:var(--tmf-surface)}
.tmf-hero__nav{display:flex;align-items:center;gap:22px;padding:14px 22px;border-bottom:2.5px dashed var(--tmf-signal);font-weight:500;font-size:14px;flex-wrap:wrap}
.tmf-hero__nav strong{font:700 22px var(--tmf-display);margin-right:auto}
.tmf-hero__nav strong span{color:var(--tmf-accent)}
.tmf-hero__in{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;padding:22px;align-items:end}
.tmf-hero h4{margin:0;font:700 clamp(28px,3.6cqw,44px)/1.02 var(--tmf-display)}
.tmf-hero mark{background:var(--tmf-accent-2);color:var(--tmf-text);padding:0 6px;border-radius:999px}
.tmf-hero__side p{margin:0 0 14px;font-size:15px;line-height:1.5;color:#e9e3da}
.tmf-fit{grid-column:span 4;margin:0;font-size:14px;background:var(--tmf-surface);border:2px solid var(--tmf-line);padding:10px 14px;justify-self:start}
@container tmf (max-width:980px){.tmf-board{grid-template-columns:1fr 1fr}.tmf-intro,.tmf-pal,.tmf-type,.tmf-hero,.tmf-fit{grid-column:span 2}}
@container tmf (max-width:620px){.tmf-thm{padding:16px}.tmf-board{grid-template-columns:1fr;gap:18px}.tmf-board>*{grid-column:1/-1!important}.tmf-hero__in{grid-template-columns:1fr}.tmf-hero__nav span{display:none}.tmf-deco--sq{width:90px;right:10px}.tmf-deco--dot{display:none}.tmf-chips{grid-template-columns:repeat(4,1fr);gap:10px 6px}.tmf-chip i{width:38px;height:38px}.tmf-chips{grid-template-columns:1fr 1fr}.tmf-chip{display:grid;grid-template-columns:38px 1fr;column-gap:8px;align-items:center}.tmf-chip i{grid-row:span 2;margin:0}.tmf-type__rows p{white-space:normal}.tmf-card__stamp{right:8px}.tmf-type__big{font-size:64px}}
@media (prefers-reduced-motion:reduce){.tmf-btn,.tmf-card,.tmf-chip i{transition:none}.tmf-card:hover{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 →