Design: Kerámia – HTML sablon (úroveň 3 – vlastní HTML šablona)

Kerámia Műhely

Název designu

Formát

Orientace

Proměnné (klikněte pro vložení)

HTML

<div class="v">
  <div class="top">{{logo}}<div class="brand"><div class="shop">{{eshop_nazev}}</div><div class="web">{{eshop_web}}</div></div></div>
  <h1>Ajándékutalvány</h1>
  <div class="value">{{hodnota}}</div>
  <div class="for" data-fit data-min="8">Kedves <b>{{jmeno_obdarovaneho}}</b>!</div>
  <div class="ded" data-fit data-min="6">„{{venovani}}”</div>
  <div class="meta"><div><span>Kód</span><b class="code">{{kod}}</b></div><div><span>Érvényes</span><b>{{platnost_do}}</b></div><div><span>Feladó</span><b>{{jmeno_kupujiciho}}</b></div></div>
  <div class="qr">{{qr}}</div>
  <div class="cond" data-fit data-min="5.5">{{podminky}} {{text_lablec}}</div>
</div>

CSS

body{background:#f4efe6;font-family:'Cormorant Garamond',Georgia,serif;color:#2c2420}
.v{position:absolute;inset:8mm;border-radius:4mm;background:#fffaf2;box-shadow:inset 0 0 0 .5mm #c9a27a;padding:9mm 11mm}
.v:before{content:'';position:absolute;right:-12mm;top:-12mm;width:70mm;height:70mm;border-radius:50%;background:radial-gradient(circle,#e4b48a 0,#e4b48a 45%,transparent 46%),radial-gradient(circle,transparent 0 58%,#c9a27a 59% 60%,transparent 61%);opacity:.55}
.top{display:flex;align-items:center;gap:4mm}.top .logo{height:12mm}.shop{font-family:Montserrat,Arial;font-size:8pt;letter-spacing:.25em;text-transform:uppercase;color:#9b5a32}.web{font-family:Montserrat,Arial;font-size:7pt;color:#8a7a6c}
h1{font-size:30pt;font-weight:400;font-style:italic;margin-top:4mm}.value{font-size:36pt;font-weight:700;color:#9b5a32;line-height:1}
.for{font-size:15pt;height:9mm;margin-top:3mm;white-space:nowrap;width:120mm}.ded{font-size:14pt;font-style:italic;height:16mm;width:120mm;line-height:1.25}
.meta{display:flex;gap:9mm;margin-top:3mm;font-family:Montserrat,Arial}.meta span{display:block;font-size:6.5pt;letter-spacing:.15em;text-transform:uppercase;color:#8a7a6c}.meta b{font-size:10pt}.code{font-family:'Courier New',monospace;font-size:13pt!important;letter-spacing:.06em}
.qr{position:absolute;right:11mm;bottom:16mm}.qr img{width:30mm;height:30mm}.cond{position:absolute;left:11mm;right:50mm;bottom:7mm;height:9mm;font-family:Montserrat,Arial;font-size:7pt;color:#6b5c50}

Vlastní texty (jeden na řádek: klic=text → v šabloně {{text_klic}})

lablec=Köszönjük, hogy minket választott!

Podmínky uplatnění ({{podminky}})

Bezpečnost: JavaScript, externí soubory a odkazy se odstraní, hodnoty proměnných se escapují, render nemá přístup k síti. Pro automatické zmenšení dlouhého textu dejte prvku atribut data-fit a pevnou výšku (min. velikost data-min="6" v pt).