Mediterraan Nieuw
Terracotta, olijf en kalkwit met bogen, tegelranden en een schuine serif. Voor restaurants, delicatessen, reizen en tuinarchitecten met zonlicht in het merk.
Fotografie: warm middaglicht, kalkmuren, nooit koel gefilterd.
Thema 04
Mediterraan
Kalkwit dat de zon vasthoudt, terracotta onder je voeten en olijfgroen in de schaduw. Langzaam, gastvrij, met de hand gemaakt.
Boska & Synonym
52Zomeravond28Mezze voor twee16Gegrilde inktvis, citroen, oregano.13Dinsdag gesloten
Palet
#F6F1E7#FBF8F2#2E2A22#7B705E#E2D7C3#C0603A#6F7442#1F5E8CEen lange tafel, het hele seizoen.
Grieks-Mediterrane keuken aan de Kralingse Plaslaan. Wij koken met olijfolie van één boer uit Lefkada en vis van de afslag in Scheveningen.
Avond van de week
Donderdag: mezze-tafel
Twaalf kleine gerechten om te delen, inclusief brood uit de houtoven.
€ 34,50 p.p.
Past bij restaurants, delicatessen, wijnhandels, reisbureaus, tuinarchitecten, B&B's.
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.
<!-- Mediterraan · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tmd-thm"><div class="tmd-layout">
<div class="tmd-arch-col">
<div class="tmd-arch"><div class="tmd-arch__img" role="img" aria-label="Binnenplaats met olijfboom en terracotta tegels"></div></div>
<p class="tmd-cap">Fotografie: warm middaglicht, kalkmuren, nooit koel gefilterd.</p>
</div>
<div class="tmd-mid">
<p class="tmd-kick">Thema 04</p>
<h3 class="tmd-title">Medi<em>terraan</em></h3>
<p class="tmd-mood">Kalkwit dat de zon vasthoudt, terracotta onder je voeten en olijfgroen in de schaduw. Langzaam, gastvrij, met de hand gemaakt.</p>
<div class="tmd-type">
<p class="tmd-lbl">Boska & Synonym</p>
<div class="tmd-type__row"><span class="tmd-type__big">Aa</span><span class="tmd-type__it">Aa</span><span class="tmd-type__sans">Aa</span></div>
<ul class="tmd-scale">
<li><code>52</code><span style="font:400 38px/1 var(--tmd-display)">Zomeravond</span></li>
<li><code>28</code><span style="font:400 26px/1.1 var(--tmd-display);font-style:italic">Mezze voor twee</span></li>
<li><code>16</code><span style="font-size:16px">Gegrilde inktvis, citroen, oregano.</span></li>
<li><code>13</code><span style="font-size:13px;letter-spacing:.12em;text-transform:uppercase">Dinsdag gesloten</span></li>
</ul>
</div>
</div>
<div class="tmd-right">
<p class="tmd-lbl">Palet</p>
<div class="tmd-tiles">
<div style="--c:var(--tmd-bg)"><i></i><b>achtergrond</b><code>#F6F1E7</code></div>
<div style="--c:var(--tmd-surface)"><i></i><b>oppervlak</b><code>#FBF8F2</code></div>
<div style="--c:var(--tmd-text)"><i></i><b>tekst</b><code>#2E2A22</code></div>
<div style="--c:var(--tmd-muted)"><i></i><b>gedempt</b><code>#7B705E</code></div>
<div style="--c:var(--tmd-line)"><i></i><b>lijn</b><code>#E2D7C3</code></div>
<div style="--c:var(--tmd-accent)"><i></i><b>accent</b><code>#C0603A</code></div>
<div style="--c:var(--tmd-accent-2)"><i></i><b>accent-2</b><code>#6F7442</code></div>
<div style="--c:var(--tmd-signal)"><i></i><b>signaal</b><code>#1F5E8C</code></div>
</div>
<div class="tmd-btns"><button class="tmd-btn tmd-btn--p" type="button">Reserveren</button><button class="tmd-btn tmd-btn--s" type="button">Menukaart</button><button class="tmd-btn tmd-btn--g" type="button">Route</button></div>
<div class="tmd-fields"><label class="tmd-f"><span>Naam</span><input type="text" placeholder="Eleni Bakker"></label><label class="tmd-f"><span>Personen</span><select><option>2 personen</option><option>4 personen</option><option>6 personen</option></select></label></div>
<div class="tmd-badges"><span class="tmd-bd tmd-bd--a">Vegetarisch</span><span class="tmd-bd tmd-bd--o">Van het seizoen</span><span class="tmd-bd tmd-bd--s">Terras open</span></div>
</div>
</div>
<div class="tmd-band" aria-hidden="true"></div>
<div class="tmd-bottom">
<div class="tmd-hero">
<div class="tmd-hero__nav"><strong>Taverna <em>Lefkas</em></strong><span>Menu</span><span>Wijnen</span><span>Groepen</span><span>Contact</span></div>
<h4>Een lange tafel, het hele seizoen.</h4>
<p>Grieks-Mediterrane keuken aan de Kralingse Plaslaan. Wij koken met olijfolie van één boer uit Lefkada en vis van de afslag in Scheveningen.</p>
<p class="tmd-hero__meta">Wo t/m zo vanaf 17:00 · Terras tot 22:30 · 010 765 4321</p>
</div>
<div class="tmd-card">
<div class="tmd-card__arch"><span>Do</span></div>
<div><p class="tmd-lbl">Avond van de week</p><h4>Donderdag: mezze-tafel</h4><p>Twaalf kleine gerechten om te delen, inclusief brood uit de houtoven.</p><p class="tmd-card__price">€ 34,50 <small>p.p.</small></p></div>
</div>
<p class="tmd-fit"><em>Past bij</em> restaurants, delicatessen, wijnhandels, reisbureaus, tuinarchitecten, B&B's.</p>
</div>
</div>
</div>/* Mediterraan · NedDev · eigen werk. */
/* fonts (Fontshare): boska@400,401,500 + synonym@400,500,600 */
.tmd-thm{--tmd-bg:#F6F1E7;--tmd-surface:#FBF8F2;--tmd-text:#2E2A22;--tmd-muted:#7B705E;--tmd-line:#E2D7C3;--tmd-accent:#C0603A;--tmd-accent-2:#6F7442;--tmd-signal:#1F5E8C;--tmd-arch:999px 999px 0 0;--tmd-display:'Boska',serif;--tmd-body:'Synonym',sans-serif;container:tmd/inline-size;color:var(--tmd-text);font-family:var(--tmd-body);background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.75),transparent 40%),var(--tmd-bg);padding:32px 36px}
.tmd-thm,.tmd-thm *{box-sizing:border-box}
.tmd-layout{display:grid;grid-template-columns:260px 1fr 1.05fr;gap:36px;align-items:start}
.tmd-arch{border-radius:var(--tmd-arch);padding:10px 10px 0;background:var(--tmd-surface);border:1px solid var(--tmd-line);border-bottom:0}
.tmd-arch__img{height:360px;border-radius:var(--tmd-arch);background:url('https://neddev.com/lab-media/thm-mediterraan-1.webp') 30% 60%/cover}
.tmd-cap{margin:10px 0 0;font:italic 400 13px/1.4 var(--tmd-display);color:var(--tmd-muted)}
.tmd-kick,.tmd-lbl{margin:0 0 10px;font:600 11px/1.2 var(--tmd-body);letter-spacing:.18em;text-transform:uppercase;color:var(--tmd-accent)}
.tmd-title{margin:0;font:400 clamp(46px,6cqw,74px)/.95 var(--tmd-display);letter-spacing:-.02em}
.tmd-title em{font-style:italic;color:var(--tmd-accent)}
.tmd-mood{margin:14px 0 22px;font-size:16px;line-height:1.55;color:var(--tmd-muted);max-width:42ch}
.tmd-type{border-top:1px solid var(--tmd-line);padding-top:16px}
.tmd-type__row{display:flex;gap:22px;align-items:baseline;margin-bottom:6px}
.tmd-type__big{font:400 64px/1 var(--tmd-display)}
.tmd-type__it{font:italic 400 64px/1 var(--tmd-display);color:var(--tmd-accent)}
.tmd-type__sans{font:500 52px/1 var(--tmd-body);color:var(--tmd-accent-2)}
.tmd-scale{list-style:none;margin:0;padding:0}
.tmd-scale li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--tmd-line);white-space:nowrap;overflow:hidden}
.tmd-scale code{font:400 10px 'JetBrains Mono',monospace;color:var(--tmd-muted)}
.tmd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;margin-bottom:24px}
.tmd-tiles div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tmd-tiles i{display:block;height:64px;border-radius:999px 999px 4px 4px;background:var(--c);border:1px solid rgba(46,42,34,.14);margin-bottom:6px}
.tmd-tiles b{font-size:12px;font-weight:500}
.tmd-tiles code{font:400 10px 'JetBrains Mono',monospace;color:var(--tmd-muted)}
.tmd-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.tmd-btn{font:500 15px/1 var(--tmd-body);padding:13px 22px;border-radius:999px;border:1.5px solid var(--tmd-accent);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tmd-btn--p{background:var(--tmd-accent);color:var(--tmd-surface)}
.tmd-btn--p:hover{background:#A44E2D;border-color:#A44E2D}
.tmd-btn--s{background:transparent;color:var(--tmd-accent-2);border-color:var(--tmd-accent-2)}
.tmd-btn--s:hover{background:var(--tmd-accent-2);color:var(--tmd-surface)}
.tmd-btn--g{background:none;border-color:transparent;font-family:var(--tmd-display);font-style:italic;font-size:18px;color:var(--tmd-text);padding-left:6px}
.tmd-btn--g:hover{color:var(--tmd-accent)}
.tmd-fields{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin-bottom:16px}
.tmd-f{min-width:0;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tmd-muted)}
.tmd-f input,.tmd-f select{font:400 15px var(--tmd-body);color:var(--tmd-text);padding:12px 14px;border:1px solid var(--tmd-line);border-radius:12px;background:var(--tmd-surface);outline:0;min-width:0}
.tmd-f input:focus,.tmd-f select:focus{border-color:var(--tmd-accent);box-shadow:0 0 0 3px rgba(192,96,58,.15)}
.tmd-badges{display:flex;flex-wrap:wrap;gap:8px}
.tmd-bd{font-size:12px;font-weight:500;padding:5px 12px;border-radius:999px}
.tmd-bd--a{background:rgba(111,116,66,.14);color:var(--tmd-accent-2)}
.tmd-bd--o{background:rgba(192,96,58,.13);color:#9C4A2A}
.tmd-bd--s{background:var(--tmd-signal);color:#fff}
.tmd-band{height:22px;margin:26px -36px 0;background:conic-gradient(from 45deg at 50% 50%,var(--tmd-accent) 0 25%,var(--tmd-surface) 0 50%,var(--tmd-accent) 0 75%,var(--tmd-surface) 0) 0 0/22px 22px;border-top:4px solid var(--tmd-accent-2)}
.tmd-bottom{display:grid;grid-template-columns:1.25fr 1fr;gap:20px 36px;padding-top:24px;align-items:start}
.tmd-hero__nav{display:flex;align-items:baseline;gap:22px;font-size:14px;color:var(--tmd-muted);margin-bottom:16px;flex-wrap:wrap}
.tmd-hero__nav strong{font:400 22px var(--tmd-display);color:var(--tmd-text);margin-right:auto}
.tmd-hero__nav em{font-style:italic;color:var(--tmd-accent)}
.tmd-hero h4{margin:0 0 10px;font:400 clamp(28px,3.4cqw,40px)/1.05 var(--tmd-display)}
.tmd-hero p{margin:0 0 10px;font-size:15px;line-height:1.55;max-width:56ch}
.tmd-hero__meta{color:var(--tmd-accent-2);font-weight:500;font-variant-numeric:tabular-nums}
.tmd-card{display:grid;grid-template-columns:96px 1fr;gap:18px;background:var(--tmd-surface);border:1px solid var(--tmd-line);border-radius:18px;padding:18px;transition:border-color .25s,transform .25s}
.tmd-card:hover{border-color:var(--tmd-accent);transform:translateY(-2px)}
.tmd-card__arch{height:120px;border-radius:var(--tmd-arch);background:var(--tmd-accent-2);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px}
.tmd-card__arch span{font:italic 400 40px/1 var(--tmd-display);color:var(--tmd-surface)}
.tmd-card h4{margin:0 0 6px;font:400 22px/1.15 var(--tmd-display)}
.tmd-card p{margin:0;font-size:14px;line-height:1.5;color:var(--tmd-muted)}
.tmd-card .tmd-lbl{margin-bottom:6px}
.tmd-card .tmd-card__price{margin-top:8px;font:500 18px var(--tmd-body);color:var(--tmd-text);font-variant-numeric:tabular-nums}
.tmd-card__price small{font-size:12px;color:var(--tmd-muted);font-weight:400}
.tmd-fit{grid-column:1/-1;margin:0;font-size:14px;color:var(--tmd-muted);border-top:1px solid var(--tmd-line);padding-top:12px}
.tmd-fit em{font-family:var(--tmd-display);font-size:17px;color:var(--tmd-accent)}
@container tmd (max-width:1000px){.tmd-layout{grid-template-columns:220px 1fr}.tmd-right{grid-column:1/-1}.tmd-arch__img{height:300px}}
@container tmd (max-width:620px){.tmd-thm{padding:20px 16px}.tmd-layout,.tmd-bottom{grid-template-columns:1fr}.tmd-arch{max-width:260px}.tmd-arch__img{height:280px}.tmd-band{margin:0 -16px}.tmd-tiles{grid-template-columns:repeat(4,1fr);gap:10px 8px}.tmd-tiles code{font-size:9px}.tmd-fields{grid-template-columns:1fr}.tmd-hero__nav span{display:none}.tmd-card{grid-template-columns:72px 1fr}.tmd-card__arch{height:96px}.tmd-type__row{gap:14px}.tmd-type__big,.tmd-type__it{font-size:52px}.tmd-type__sans{font-size:42px}}
@media (prefers-reduced-motion:reduce){.tmd-btn,.tmd-card{transition:none}.tmd-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 →