Zacht Premium Nieuw

Poeder, nude en karamel met één diep bordeaux als contrast: ovale beeldkaders, pilvormen en een hoge, slanke displayletter. Voor beautysalons, huidklinieken, wellness en mode.

Bekijk op volledig scherm ↗

Beeld: zacht daglicht, natuurlijke materialen, geen glans.

Thema 13

Zacht Premium

Huidtinten, poeder en linnen, en precies één kleur die durft. Rust in de vorm, beslistheid in de knop.

achtergrond#F3E9E1

oppervlak#FBF6F2

tekst#3A2A26

gedempt#8C7569

lijn#E3D2C6

accent#5B1220

accent-2#D9B8A6

signaal#B6855F

GlowAa

64Huidanalyse
32Gezichtsbehandeling
15Inclusief advies voor thuis.
11Melodrama · Epilogue

Het enige contrast

Boek een behandeling

Naam Behandeling

NieuwVrij morgen 10:30Cadeaubon

Utrecht · Wittevrouwen

Huid die rustig wordt, zonder filter.

Behandelingen door een BIG-geregistreerd verpleegkundige, in een kliniek met vier kamers en geen haast.

Past bij beautysalons, huidklinieken, nagelstudio's, wellness, kappers in het hogere segment, modeboetieks.

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.

<!-- Zacht Premium · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tzp-thm"><div class="tzp-layout">
<div class="tzp-oval-col">
  <div class="tzp-oval" role="img" aria-label="Behandelkamer met linnen handdoeken en verzorgingsproducten"></div>
  <p class="tzp-cap">Beeld: zacht daglicht, natuurlijke materialen, geen glans.</p>
</div>
<div class="tzp-main">
  <p class="tzp-kick">Thema 13</p>
  <h3 class="tzp-title">Zacht <em>Premium</em></h3>
  <p class="tzp-mood">Huidtinten, poeder en linnen, en precies één kleur die durft. Rust in de vorm, beslistheid in de knop.</p>
  <div class="tzp-pans">
    <div style="--c:var(--tzp-bg)"><i></i><b>achtergrond</b><code>#F3E9E1</code></div>
    <div style="--c:var(--tzp-surface)"><i></i><b>oppervlak</b><code>#FBF6F2</code></div>
    <div style="--c:var(--tzp-text)"><i></i><b>tekst</b><code>#3A2A26</code></div>
    <div style="--c:var(--tzp-muted)"><i></i><b>gedempt</b><code>#8C7569</code></div>
    <div style="--c:var(--tzp-line)"><i></i><b>lijn</b><code>#E3D2C6</code></div>
    <div style="--c:var(--tzp-accent)"><i></i><b>accent</b><code>#5B1220</code></div>
    <div style="--c:var(--tzp-accent-2)"><i></i><b>accent-2</b><code>#D9B8A6</code></div>
    <div style="--c:var(--tzp-signal)"><i></i><b>signaal</b><code>#B6855F</code></div>
  </div>
  <div class="tzp-type">
    <div class="tzp-type__big">Glow<span>Aa</span></div>
    <ul><li><code>64</code><span style="font:400 40px/1 var(--tzp-display)">Huidanalyse</span></li><li><code>32</code><span style="font:300 26px/1 var(--tzp-display);letter-spacing:.02em">Gezichtsbehandeling</span></li><li><code>15</code><span style="font-size:15px;font-weight:300">Inclusief advies voor thuis.</span></li><li><code>11</code><span style="font-size:11px;letter-spacing:.24em;text-transform:uppercase">Melodrama · Epilogue</span></li></ul>
  </div>
</div>
<div class="tzp-book">
  <p class="tzp-kick tzp-kick--l">Het enige contrast</p>
  <p class="tzp-book__h">Boek een behandeling</p>
  <label class="tzp-f"><span>Naam</span><input type="text" placeholder="Saar de Bruin"></label>
  <label class="tzp-f"><span>Behandeling</span><select><option>Huidanalyse · 45 min</option><option>Hydrafacial · 60 min</option><option>Peeling · 30 min</option></select></label>
  <div class="tzp-btns"><button class="tzp-btn tzp-btn--p" type="button">Kies een moment</button><button class="tzp-btn tzp-btn--s" type="button">Prijslijst</button><button class="tzp-btn tzp-btn--g" type="button">Eerst bellen</button></div>
  <div class="tzp-badges"><span class="tzp-bd tzp-bd--a">Nieuw</span><span class="tzp-bd">Vrij morgen 10:30</span><span class="tzp-bd">Cadeaubon</span></div>
</div>
</div>
<div class="tzp-site">
  <div class="tzp-site__nav"><strong>Huidkliniek <em>Saar</em></strong><span>Behandelingen</span><span>Huidanalyse</span><span>Producten</span><span>Over Saar</span><span>Contact</span></div>
  <div class="tzp-site__in">
    <div><p class="tzp-kick">Utrecht · Wittevrouwen</p><h4>Huid die rustig wordt, zonder filter.</h4><p>Behandelingen door een BIG-geregistreerd verpleegkundige, in een kliniek met vier kamers en geen haast.</p></div>
    <div class="tzp-menu">
      <div class="tzp-menu__i"><span>Huidanalyse met camera</span><i></i><b>€ 65</b></div>
      <div class="tzp-menu__i"><span>Hydrafacial deluxe</span><i></i><b>€ 145</b></div>
      <div class="tzp-menu__i"><span>Chemische peeling</span><i></i><b>€ 95</b></div>
      <div class="tzp-card"><p class="tzp-kick">Kuur · 4 behandelingen</p><p class="tzp-card__t">Rust voor gevoelige huid</p><p class="tzp-card__p">€ 420 <s>€ 480</s></p></div>
    </div>
  </div>
</div>
<p class="tzp-fit"><span>Past bij</span> beautysalons, huidklinieken, nagelstudio's, wellness, kappers in het hogere segment, modeboetieks.</p>
</div>
</div>

/* Zacht Premium · NedDev · eigen werk. */
/* fonts (Fontshare): melodrama@300,400,500 + epilogue@300,400,500 */
.tzp-thm{--tzp-bg:#F3E9E1;--tzp-surface:#FBF6F2;--tzp-text:#3A2A26;--tzp-muted:#8C7569;--tzp-line:#E3D2C6;--tzp-accent:#5B1220;--tzp-accent-2:#D9B8A6;--tzp-signal:#B6855F;--tzp-radius:999px;--tzp-display:'Melodrama',serif;--tzp-body:'Epilogue',sans-serif;container:tzp/inline-size;background:var(--tzp-bg);color:var(--tzp-text);font:300 14px/1.6 var(--tzp-body);padding:34px 38px 26px}
.tzp-thm,.tzp-thm *{box-sizing:border-box}
.tzp-layout{display:grid;grid-template-columns:230px 1fr 300px;gap:36px;align-items:stretch}
.tzp-oval{height:340px;border-radius:50%/42%;background:url('https://neddev.com/lab-media/thm-zacht-premium-1.webp') 62% 50%/cover;box-shadow:0 0 0 8px var(--tzp-surface),0 0 0 9px var(--tzp-line)}
.tzp-cap{margin:18px 0 0;font-size:12px;color:var(--tzp-muted);text-align:center}
.tzp-kick{margin:0 0 8px;font:400 11px var(--tzp-body);letter-spacing:.26em;text-transform:uppercase;color:var(--tzp-signal)}
.tzp-title{margin:0;font:400 clamp(54px,7.4cqw,92px)/.9 var(--tzp-display);letter-spacing:-.01em}
.tzp-title em{font-style:normal;color:var(--tzp-accent)}
.tzp-mood{margin:12px 0 20px;max-width:48ch;font-size:15px;color:var(--tzp-muted)}
.tzp-pans{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:20px}
.tzp-pans div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;min-width:0}
.tzp-pans i{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),transparent 55%),var(--c);box-shadow:0 0 0 1px var(--tzp-line),0 0 0 5px var(--tzp-surface),0 0 0 6px var(--tzp-line);margin-bottom:10px;transition:transform .3s}
.tzp-pans div:hover i{transform:scale(1.08)}
.tzp-pans b{font-size:10px;font-weight:400;letter-spacing:.04em}
.tzp-pans code{font:400 9px 'JetBrains Mono',monospace;color:var(--tzp-muted)}
.tzp-type{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:end;border-top:1px solid var(--tzp-line);padding-top:14px}
.tzp-type__big{font:300 96px/.8 var(--tzp-display);color:var(--tzp-accent)}
.tzp-type__big span{display:block;font:300 22px/1 var(--tzp-body);color:var(--tzp-muted);margin-top:10px}
.tzp-type ul{list-style:none;margin:0;padding:0}
.tzp-type li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:baseline;padding:3px 0;border-bottom:1px solid var(--tzp-line);white-space:nowrap;overflow:hidden}
.tzp-type code{font:400 9px 'JetBrains Mono',monospace;color:var(--tzp-muted)}
.tzp-book{background:var(--tzp-accent);color:var(--tzp-surface);border-radius:150px 150px 24px 24px;padding:44px 26px 24px;display:flex;flex-direction:column}
.tzp-kick--l{color:var(--tzp-accent-2);text-align:center}
.tzp-book__h{margin:0 0 18px;text-align:center;font:400 34px/1 var(--tzp-display)}
.tzp-f{min-width:0;display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tzp-accent-2)}
.tzp-f input,.tzp-f select{font:300 15px var(--tzp-body);letter-spacing:0;text-transform:none;color:var(--tzp-surface);background:rgba(251,246,242,.08);border:1px solid rgba(217,184,166,.45);border-radius:var(--tzp-radius);padding:11px 18px;outline:0;min-width:0}
.tzp-f input::placeholder{color:rgba(251,246,242,.55)}
.tzp-f select option{color:var(--tzp-text)}
.tzp-f input:focus,.tzp-f select:focus{border-color:var(--tzp-accent-2);background:rgba(251,246,242,.14)}
.tzp-btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.tzp-btn{font:400 14px/1 var(--tzp-body);letter-spacing:.02em;padding:13px 20px;border-radius:var(--tzp-radius);border:1px solid var(--tzp-accent-2);cursor:pointer;transition:background .3s,color .3s,padding .3s}
.tzp-btn--p{background:var(--tzp-accent-2);color:var(--tzp-accent);font-weight:500;flex:1 1 100%}
.tzp-btn--p:hover{background:var(--tzp-surface);border-color:var(--tzp-surface)}
.tzp-btn--s{background:transparent;color:var(--tzp-surface)}
.tzp-btn--s:hover{background:rgba(217,184,166,.2)}
.tzp-btn--g{background:none;border-color:transparent;color:var(--tzp-accent-2);text-decoration:underline;text-underline-offset:4px;padding-left:6px}
.tzp-btn--g:hover{color:var(--tzp-surface)}
.tzp-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tzp-bd{font:400 11px/1 var(--tzp-body);padding:6px 11px;border-radius:var(--tzp-radius);background:rgba(251,246,242,.1);color:var(--tzp-accent-2)}
.tzp-bd--a{background:var(--tzp-accent-2);color:var(--tzp-accent);font-weight:500}
.tzp-site{margin-top:28px;background:var(--tzp-surface);border-radius:28px;padding:16px 26px 22px;border:1px solid var(--tzp-line)}
.tzp-site__nav{display:flex;gap:24px;align-items:baseline;font-size:13px;color:var(--tzp-muted);padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--tzp-line);flex-wrap:wrap}
.tzp-site__nav strong{font:400 24px var(--tzp-display);color:var(--tzp-text);margin-right:auto}
.tzp-site__nav em{font-style:normal;color:var(--tzp-accent)}
.tzp-site__in{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:start}
.tzp-site h4{margin:0 0 8px;font:400 clamp(30px,3.6cqw,44px)/.98 var(--tzp-display)}
.tzp-site__in>div>p:not(.tzp-kick){margin:0;color:var(--tzp-muted);max-width:46ch}
.tzp-menu{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.tzp-menu__i{grid-column:1;display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:14px;font-weight:400}
.tzp-menu__i span{flex:0 1 auto}
.tzp-menu__i b{white-space:nowrap}
.tzp-menu__i i{flex:1 0 12px;border-bottom:1px dotted var(--tzp-muted);transform:translateY(-4px)}
.tzp-menu__i b{font-weight:500;font-variant-numeric:tabular-nums}
.tzp-card{grid-column:2;grid-row:1/span 3;background:var(--tzp-bg);border-radius:24px;padding:16px 18px;border:1px solid var(--tzp-line);transition:border-color .3s}
.tzp-card:hover{border-color:var(--tzp-accent)}
.tzp-card__t{margin:0 0 8px;font:400 24px/1.05 var(--tzp-display)}
.tzp-card__p{margin:0;font-weight:500;color:var(--tzp-accent);font-variant-numeric:tabular-nums}
.tzp-card__p s{font-weight:300;color:var(--tzp-muted);margin-left:6px}
.tzp-fit{margin:16px 0 0;font-size:13px;color:var(--tzp-muted)}
.tzp-fit span{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tzp-accent);margin-right:6px}
@container tzp (max-width:1060px){.tzp-layout{grid-template-columns:200px 1fr}.tzp-book{grid-column:1/-1;border-radius:24px;padding:24px}.tzp-pans{grid-template-columns:repeat(4,1fr);row-gap:12px}}
@container tzp (max-width:620px){.tzp-thm{padding:20px 16px}.tzp-layout,.tzp-site__in,.tzp-type{grid-template-columns:1fr}.tzp-oval{height:300px;max-width:240px;margin:0 auto}.tzp-menu{grid-template-columns:1fr}.tzp-card{grid-column:1;grid-row:auto}.tzp-site__nav span{display:none}.tzp-type__big{font-size:76px}}
@media (prefers-reduced-motion:reduce){.tzp-btn,.tzp-pans i,.tzp-card{transition: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 →