Značková barva je --blue #0000ff. Používá se na odkazy, štítky, ikony, odrážky a v přechodu linear-gradient(135deg,#0000ff,#0066ff) na hlavním tlačítku a číslech kroků.
Úvod a závěrečný pás mají přechod linear-gradient(160deg,#0000ff,#1d4dff 55%,#2d7bff) s bílým textem. Text na něm je bílý nebo #e6eeff.
Podklad stránky je --paper #ffffff, střídavé sekce --mint #eef2f0, tmavší mátová --mint-2 #dde7e4.
Text je --ink #0a0a0a, popisky a štítky --slate-2 #55625e. Linky a okraje karet --line #e2e8e5.
Zelená #00B341 a červená #E53030 jsou jen pro odrážky srovnání, ne pro dekoraci.
Písmo
Jediná rodina je Regular ve váhách 400, 500, 600 a 700 s alternativou ss01. Tělo má 19 px a řádkování 1.6.
Nadpisy h1 až h4 jsou váha 700 s řádkováním 1.1. h2 a třída .hl mají modrý přechod místo plné barvy.
Štítky nad nadpisy jsou malé, váha 600, velká písmena a rozestup .13em, barva --blue nebo --slate-2.
Čísla (ceny, kroky, statistiky) mají třídu .num a tabulární číslice.
Rozvržení
Obsah je v .wrap s maximální šířkou --maxw 1560 px a bočním okrajem --pad.
Sekce .sec mají svislý okraj clamp(56px,7vw,104px). Každá druhá sekce je .sec--mint.
Mřížky: .grid--3 pro tři karty, .steps pro tři kroky, .pillars pro čtyři sloupce, .featrow pro text vedle obrázku. Na telefonu vše do jednoho sloupce pod 860 px.
Nadpis sekce je .sec-head a na střed .sec-head--center s perexem .lede.
Tvary
Karty a obrázky mají rádius --r 12 px, cenová karta a formulář 16 px, velké karty .who__card 24 px.
Tlačítka a štítky jsou plně kulaté (--r-pill 999px), ikony a čísla kroků 50 %.
Stíny se nepoužívají, kromě jemného stínu na bublině v úvodu a na ovládání lightboxu. Karty dělí linka 1 px --line.
Obrázky
Úvod a ukázky funkcí jsou vrstvené obrázky .pxl s poměrem 4:3, kde karta rozhraní leží přes fotku.
Fotky v kartách .who__card jsou svisle ořezané, v novinkách .news poměr 16:9.
Loga klientů jsou SVG v jedné řadě, výška clamp(36px,3.7vw,49px).
Tlačítka
Hlavní akce je btn btn--primary s modrým přechodem. Doplňková je btn--ghost s přechodovým obrysem.
Na modrém podkladu se používá btn--white a btn--outline.
Odkaz na demo je .pill s šipkou. Na obrazovce má být jedno hlavní tlačítko.
Jazyk
Web je česky a anglicky, systém umí i slovensky a německy. Oslovení je „vy“, tón přímý a věcný.
Za jednopísmennými předložkami a před jednotkami jsou nezlomitelné mezery, ceny se píší 29 990 Kč.
Barvy
Značka
--blue#0000ffOdkazy, štítky, ikony, odrážky a rámeček zaměření.
přechod tlačítkalinear-gradient(135deg,#0000ff 0%,#0066ff 100%)Hlavní tlačítko, čísla kroků, obrys ghost tlačítka.
přechod herolinear-gradient(160deg,#0000ff 0%,#1d4dff 55%,#2d7bff 100%)Pozadí úvod a závěrečného pásu.
přechod textulinear-gradient(135deg,#000cff 0,#2874fc 100%)Výplň nadpisů h2, tříd .hl a ceny.
Plochy
--mint#eef2f0Podklad střídavých sekcí a formuláře.
--paper#ffffffPodklad stránky a karet.
--mint-2#dde7e4Podklad karet s fotkou před načtením.
#eef3ff#eef3ffZvýrazněný řádek BOOKING STUDIO ve srovnání.
#f1f4f8#f1f4f8Podklad štítku na kartě.
Text
--ink#0a0a0aText a nadpisy. Stejnou hodnotu má --slate.
--slate-2#55625ePopisky, štítky a údaje.
Linky
--line#e2e8e5Okraje karet, polí a dělicí linky.
Na modrém
#e6eeff#e6eeffPerex v úvodu a závěrečném pásu.
#cfe0ff#cfe0ffŠtítek nad nadpisem v úvodu.
Stavy
#00B341#00B341Zelená odrážka ve srovnání.
#E53030#E53030Červená odrážka ve srovnání.
#4CAF50#4CAF50Zpráva o odeslaném formuláři.
#E91E63#E91E63Zpráva o chybě formuláře.
Typografie
Rozměry
Mezery a šířky
Název
Hodnota
Ukázka
Použití
--pad
clamp(20px,4vw,52px)
Boční okraj stránky.
--maxw
1560px
Maximální šířka obsahu.
sekce
clamp(56px,7vw,104px)
Svislý okraj .sec.
mezera mřížky
clamp(18px,2.2vw,30px)
Mezera v .grid a .feat.
výška navigace
74px
66 px na telefonu.
Rádiusy
Název
Hodnota
Ukázka
Použití
--r
12px
Karty, kroky, obrázky.
--r-pill
999px
Tlačítka, pilulky, štítek karty.
karta ceny a formulář
16px
.price, .form, srovnání, menu jazyka.
karta s fotkou
24px
.who__card.
pole formuláře
10px
Vstupy, výběry, víceřádková pole.
Značka a obrazové prvky
LogoObrázek heroLogo Hostel PavlovLogo Freedom Art
Komponenty
Úvod
Navigace
Lepivá lišta s logem, odkazy, telefonem, tlačítkem a přepínačem jazyka. Třídy: nav, nav__in, brand, nav__links, nav__tel, lang.
Modrý přechodový úvod se štítkem, nadpisem, dvěma tlačítky a vrstveným obrázkem s bublinou. Třídy: v2hero, v2hero__eyebrow, v2hero__lede, v2hero__btns, pxl--hero.
Štítek na kartě a seznam s modrými odrážkami s fajfkou. Třídy: card__chip, news__tag, ticks.
HTML kód
<div style="padding:32px"><span class="card__chip" style="margin-top:0">bez channel manageru</span><p class="news__tag" style="margin-top:24px">Říjen 2026</p><ul class="ticks"><li>Cena za noc u každého volného dne</li><li>Obsazené termíny nejdou vybrat</li><li>Termín nebo pokoj můžete uzavřít jedním kliknutím</li></ul></div>
Sekce
Pruh důvěry
Čtyři čísla ve sloupcích s popiskem velkými písmeny. Třídy: trust, trust__in, stat, stat__flags.
Nadpis sekce na střed a čtyři sloupce s ikonou v mátovém čtverci. Třídy: sec-head--center, pillars, pillar, pillar__ico.
HTML kód
<main><section class="sec" id="funkce">
<div class="wrap">
<div class="sec-head sec-head--center">
<h2>Ať provozujete penzion, apartmány nebo kurzy, rezervace za vás vyřídí systém</h2>
<p class="lede">Všechno je v ceně, nic se nedokupuje ani nezapíná za příplatek. Prvotní nastavení uděláme za vás, měnit si to pak můžete jednoduše sami.</p>
</div>
<div class="pillars">
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M241.91,137.42,142.59,38.1a13.94,13.94,0,0,0-9.9-4.1H40a6,6,0,0,0-6,6v92.69a13.94,13.94,0,0,0,4.1,9.9l99.32,99.32a14,14,0,0,0,19.8,0l84.69-84.69A14,14,0,0,0,241.91,137.42Zm-8.49,11.31-84.69,84.69a2,2,0,0,1-2.83,0L46.59,134.1a2,2,0,0,1-.59-1.41V46h86.69a2,2,0,0,1,1.41.59l99.32,99.31A2,2,0,0,1,233.42,148.73ZM94,84A10,10,0,1,1,84,74,10,10,0,0,1,94,84Z"></path></svg></div><h3>Bez provizí a paušálů</h3><p>Jednorázová cena 29 990 Kč a dál nikomu nic neplatíte. Ani z rezervace, ani měsíčně.</p></div>
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z"></path></svg></div><h3>Vaše data u vás</h3><p>Běží na vašem hostingu, ne v cizím systému. Kontakty hostů máte v administraci i v exportech.</p></div>
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M245.37,213.32l-56-112a6,6,0,0,0-10.74,0l-22.3,44.6A90,90,0,0,1,105,127.19,101.73,101.73,0,0,0,133.82,62H160a6,6,0,0,0,0-12H102V32a6,6,0,0,0-12,0V50H32a6,6,0,0,0,0,12h89.79A89.71,89.71,0,0,1,96,119.23,89.81,89.81,0,0,1,75.11,86,6,6,0,1,0,63.8,90,101.66,101.66,0,0,0,87,127.2,89.56,89.56,0,0,1,32,146a6,6,0,0,0,0,12,101.55,101.55,0,0,0,64-22.63,102.11,102.11,0,0,0,54.53,22.17l-27.89,55.78a6,6,0,0,0,10.74,5.36L147.71,190h72.58l14.34,28.68A6,6,0,0,0,240,222a5.87,5.87,0,0,0,2.68-.64A6,6,0,0,0,245.37,213.32ZM153.71,178,184,117.42,214.29,178Z"></path></svg></div><h3>Česky, slovensky, anglicky, německy</h3><p>Web, rezervace i všechny e-maily pro hosty ve čtyřech jazycích. Přepínač jazyků je součástí systému.</p></div>
<div class="pillar"><div aria-hidden="true" class="pillar__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z"></path></svg></div><h3>Podpora přímo od autorů</h3><p>Když něco potřebujete, píšete nebo voláte nám do Brna. Žádné call centrum, žádná podpora jen v angličtině.</p></div>
</div>
</div>
</section></main>
Mřížka funkcí
Devět bílých karet s ikonou, nadpisem a odrážkami, při najetí modrý okraj. Třídy: feat, feat__b, feat__ico, ticks.
HTML kód
<main><section class="sec" id="funkce"><div class="wrap"><div class="feat-all" hidden="" id="featAll">
<div class="feat">
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Zm-39.76-86.24a6,6,0,0,1,0,8.48l-48,48a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L116,167.51l43.76-43.75A6,6,0,0,1,168.24,123.76Z"></path></svg></div>
<h3>Rezervace a obsazenost</h3>
<ul class="ticks">
<li>Kalendář obsazenosti s cenou u každého dne</li>
<li>Systém sám hlídá kapacitu, u ubytování i minimální délku pobytu</li>
<li>Termín zavřete jedním kliknutím</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M241.91,137.42,142.59,38.1a13.94,13.94,0,0,0-9.9-4.1H40a6,6,0,0,0-6,6v92.69a13.94,13.94,0,0,0,4.1,9.9l99.32,99.32a14,14,0,0,0,19.8,0l84.69-84.69A14,14,0,0,0,241.91,137.42Zm-8.49,11.31-84.69,84.69a2,2,0,0,1-2.83,0L46.59,134.1a2,2,0,0,1-.59-1.41V46h86.69a2,2,0,0,1,1.41.59l99.32,99.31A2,2,0,0,1,233.42,148.73ZM94,84A10,10,0,1,1,84,74,10,10,0,0,1,94,84Z"></path></svg></div>
<h3>Ceny, sezóny a doplňky</h3>
<ul class="ticks">
<li>Základní cena, sezónní ceny i vlastní cena pro konkrétní dny</li>
<li>Za pokoj, nebo za osobu se zvláštní sazbou pro děti</li>
<li>U ubytování i poplatek obci</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32A14,14,0,0,0,18,64V192a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM32,62H224a2,2,0,0,1,2,2V90H30V64A2,2,0,0,1,32,62ZM224,194H32a2,2,0,0,1-2-2V102H226v90A2,2,0,0,1,224,194Zm-18-26a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h32A6,6,0,0,1,206,168Zm-64,0a6,6,0,0,1-6,6H120a6,6,0,0,1,0-12h16A6,6,0,0,1,142,168Z"></path></svg></div>
<h3>Platby a fakturace</h3>
<ul class="ticks">
<li>Platba bankovním převodem s QR kódem na částku i variabilní symbol</li>
<li>Platba na místě, nebo úplně bez plateb, třeba u akce zdarma</li>
<li>Firemní zákazník zadá IČO a údaje se samy načtou ze systému ARES</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z"></path></svg></div>
<h3>E-maily</h3>
<ul class="ticks">
<li>Potvrzení zákazníkovi i vám, s platebními údaji a QR kódem</li>
<li>Připomínka před pobytem nebo akcí, čas odeslání si nastavíte sami</li>
<li>Volitelný odkaz na zrušení rezervace přímo v e-mailu</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M237.28,97.87A14.18,14.18,0,0,0,224.76,88l-60.25-4.87-23.22-56.2a14.37,14.37,0,0,0-26.58,0L91.49,83.11,31.24,88a14.18,14.18,0,0,0-12.52,9.89A14.43,14.43,0,0,0,23,113.32L69,152.93l-14,59.25a14.4,14.4,0,0,0,5.59,15,14.1,14.1,0,0,0,15.91.6L128,196.12l51.58,31.71a14.1,14.1,0,0,0,15.91-.6,14.4,14.4,0,0,0,5.59-15l-14-59.25L233,113.32A14.43,14.43,0,0,0,237.28,97.87Zm-12.14,6.37-48.69,42a6,6,0,0,0-1.92,5.92l14.88,62.79a2.35,2.35,0,0,1-.95,2.57,2.24,2.24,0,0,1-2.6.1L131.14,184a6,6,0,0,0-6.28,0L70.14,217.61a2.24,2.24,0,0,1-2.6-.1,2.35,2.35,0,0,1-1-2.57l14.88-62.79a6,6,0,0,0-1.92-5.92l-48.69-42a2.37,2.37,0,0,1-.73-2.65,2.28,2.28,0,0,1,2.07-1.65l63.92-5.16a6,6,0,0,0,5.06-3.69l24.63-59.6a2.35,2.35,0,0,1,4.38,0l24.63,59.6a6,6,0,0,0,5.06,3.69l63.92,5.16a2.28,2.28,0,0,1,2.07,1.65A2.37,2.37,0,0,1,225.14,104.24Z"></path></svg></div>
<h3>Hodnocení hostů</h3>
<ul class="ticks">
<li>U ubytování odejde žádost o hodnocení sama po odjezdu</li>
<li>Host oznámkuje hvězdičkami šest oblastí, od čistoty po okolí</li>
<li>Nic se nezveřejní bez vašeho schválení</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224.42,104.2c-3.9-4.07-7.93-8.27-9.55-12.18-1.5-3.63-1.58-9-1.67-14.68-.14-9.38-.3-20-7.42-27.12S188,42.94,178.66,42.8c-5.68-.09-11-.17-14.68-1.67-3.91-1.62-8.11-5.65-12.18-9.55C145.16,25.22,137.64,18,128,18s-17.16,7.22-23.8,13.58c-4.07,3.9-8.27,7.93-12.18,9.55-3.63,1.5-9,1.58-14.68,1.67-9.38.14-20,.3-27.12,7.42S42.94,68,42.8,77.34c-.09,5.68-.17,11-1.67,14.68-1.62,3.91-5.65,8.11-9.55,12.18C25.22,110.84,18,118.36,18,128s7.22,17.16,13.58,23.8c3.9,4.07,7.93,8.27,9.55,12.18,1.5,3.63,1.58,9,1.67,14.68.14,9.38.3,20,7.42,27.12S68,213.06,77.34,213.2c5.68.09,11,.17,14.68,1.67,3.91,1.62,8.11,5.65,12.18,9.55C110.84,230.78,118.36,238,128,238s17.16-7.22,23.8-13.58c4.07-3.9,8.27-7.93,12.18-9.55,3.63-1.5,9-1.58,14.68-1.67,9.38-.14,20-.3,27.12-7.42s7.28-17.74,7.42-27.12c.09-5.68.17-11,1.67-14.68,1.62-3.91,5.65-8.11,9.55-12.18C230.78,145.16,238,137.64,238,128S230.78,110.84,224.42,104.2Zm-8.66,39.29c-4.67,4.87-9.5,9.91-12,15.91-2.38,5.74-2.48,12.52-2.58,19.08-.11,7.44-.23,15.14-3.9,18.82s-11.38,3.79-18.82,3.9c-6.56.1-13.34.2-19.08,2.58-6,2.48-11,7.31-15.91,12-5.25,5-10.68,10.24-15.49,10.24s-10.24-5.21-15.5-10.24c-4.86-4.67-9.9-9.5-15.9-12-5.74-2.38-12.52-2.48-19.08-2.58-7.44-.11-15.14-.23-18.82-3.9s-3.79-11.38-3.9-18.82c-.1-6.56-.2-13.34-2.58-19.08-2.48-6-7.31-11-12-15.91C35.21,138.24,30,132.81,30,128s5.21-10.24,10.24-15.49c4.67-4.87,9.5-9.91,12-15.91,2.38-5.74,2.48-12.52,2.58-19.08.11-7.44.23-15.14,3.9-18.82s11.38-3.79,18.82-3.9c6.56-.1,13.34-.2,19.08-2.58,6-2.48,11-7.31,15.91-12C117.76,35.21,123.19,30,128,30s10.24,5.21,15.5,10.24c4.86,4.67,9.9,9.5,15.9,12,5.74,2.38,12.52,2.48,19.08,2.58,7.44.11,15.14.23,18.82,3.9s3.79,11.38,3.9,18.82c.1,6.56.2,13.34,2.58,19.08,2.48,6,7.31,11,12,15.91,5,5.25,10.24,10.68,10.24,15.49S220.79,138.24,215.76,143.49ZM118,96a22,22,0,1,0-22,22A22,22,0,0,0,118,96ZM86,96a10,10,0,1,1,10,10A10,10,0,0,1,86,96Zm74,42a22,22,0,1,0,22,22A22,22,0,0,0,160,138Zm0,32a10,10,0,1,1,10-10A10,10,0,0,1,160,170Zm12.24-77.76-80,80a6,6,0,0,1-8.48-8.48l80-80a6,6,0,0,1,8.48,8.48Z"></path></svg></div>
<h3>Dárkové poukazy a slevy</h3>
<ul class="ticks">
<li>Poukaz v přednastavených hodnotách, nebo s vlastní částkou</li>
<li>Automaticky se vygenerují ve vašich barvách i s vaším logem</li>
<li>Jde vyčerpat i po částech, zůstatek systém hlídá automaticky</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M230,208a6,6,0,0,1-6,6H32a6,6,0,0,1-6-6V48a6,6,0,0,1,12,0V161.52l53.76-53.76a6,6,0,0,1,8.48,0L128,135.51,185.52,78H160a6,6,0,0,1,0-12h40a6,6,0,0,1,6,6v40a6,6,0,0,1-12,0V86.48l-61.76,61.76a6,6,0,0,1-8.48,0L96,120.49l-58,58V202H224A6,6,0,0,1,230,208Z"></path></svg></div>
<h3>Přehledy a exporty</h3>
<ul class="ticks">
<li>Tržby po měsících se srovnáním se stejným obdobím loni</li>
<li>Obsazenost, oblíbené položky i průměrná cena, vše přehledně i v grafech</li>
<li>Export do Excelu, CSV a PDF</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M199.37,55.31A101.32,101.32,0,0,0,128,26h-1A102,102,0,0,0,26,128c0,42.09,26.07,77.44,68,92.26A30.21,30.21,0,0,0,104.11,222,30.06,30.06,0,0,0,134,192a18,18,0,0,1,18-18h46.21a29.82,29.82,0,0,0,29.25-23.31A102.71,102.71,0,0,0,230,127.11,101.25,101.25,0,0,0,199.37,55.31ZM215.76,148a17.89,17.89,0,0,1-17.55,14H152a30,30,0,0,0-30,30,18,18,0,0,1-24,17C61,195.86,38,164.85,38,128a90,90,0,0,1,89.07-90H128a90.34,90.34,0,0,1,90,89.22A90.46,90.46,0,0,1,215.76,148ZM138,76a10,10,0,1,1-10-10A10,10,0,0,1,138,76ZM94,100A10,10,0,1,1,84,90,10,10,0,0,1,94,100Zm0,56a10,10,0,1,1-10-10A10,10,0,0,1,94,156Zm88-56a10,10,0,1,1-10-10A10,10,0,0,1,182,100Z"></path></svg></div>
<h3>Web pod vaší značkou</h3>
<ul class="ticks">
<li>Barvy, logo i úvodní fotka podle vaší identity</li>
<li>Pořadí sekcí si můžete sami přeskládat, co nechcete, vypnete</li>
<li>Galerie, výhody, nejbližší akce, časté dotazy i aktuality nebo články</li>
</ul>
</div>
<div class="feat__b">
<div aria-hidden="true" class="feat__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M208,42H48A14,14,0,0,0,34,56v56c0,51.94,25.12,83.4,46.2,100.64,22.73,18.6,45.27,24.89,46.22,25.15a6,6,0,0,0,3.16,0c.95-.26,23.49-6.55,46.22-25.15C196.88,195.4,222,163.94,222,112V56A14,14,0,0,0,208,42Zm2,70c0,37.76-13.94,68.39-41.44,91.06A131.17,131.17,0,0,1,128,225.72a130.94,130.94,0,0,1-40.56-22.66C59.94,180.39,46,149.76,46,112V56a2,2,0,0,1,2-2H208a2,2,0,0,1,2,2ZM172.24,99.76a6,6,0,0,1,0,8.48l-56,56a6,6,0,0,1-8.48,0l-24-24a6,6,0,0,1,8.48-8.48L112,151.51l51.76-51.75A6,6,0,0,1,172.24,99.76Z"></path></svg></div>
<h3>Vaše data zůstanou vaše</h3>
<ul class="ticks">
<li>Vše běží na vašem hostingu, ne v cizím systému</li>
<li>Automatické zálohy rezervací i nastavení</li>
<li>Administraci můžete ovládat jednoduše z počítače i mobilu</li>
</ul>
</div>
</div>
</div></div></section></main>
Pro koho
Dvě velké karty s fotkou, štítkem, nadpisem a výčtem na mátovém podkladu. Třídy: sec--mint, who, who__card, who__body, who__chips, who__go.
HTML kód
<main><section class="sec sec--mint" id="prokoho">
<div class="wrap">
<div class="sec-head sec-head--center">
<h2>BOOKING STUDIO funguje <br/>pro ubytování i akce</h2>
<p class="lede">Dvě varianty jednoho systému. Projděte si rezervaci přesně tak, jako by to dělal váš zákazník.</p>
</div>
<div class="who">
<a class="who__card" href="#" rel="noopener" target="_blank">
<img alt="Ustlaná postel v pokoji penzionu s nočním stolkem a lampičkou" height="2000" sizes="(max-width:1024px) calc(100vw - 40px), 740px" src="img/hotelovy-pokoj.webp" srcset="img/hotelovy-pokoj-800.webp 800w, img/hotelovy-pokoj.webp 1333w" width="1333"/>
<div class="who__body"><p class="who__tag">BOOKING STUDIO pro ubytování</p><h3>Penziony, apartmány, <br/>chalupy i malé hotely</h3><div class="who__chips"><span>Kalendář volných pokojů</span><span>Ceny podle sezóny</span><span>Snídaně a další služby</span><span>Pronájem celého objektu</span><span>Poplatek z pobytu</span><span>Hodnocení od hostů</span></div><span class="who__go">Otevřít demo <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="who__card" href="#" rel="noopener" target="_blank">
<img alt="Dva účastníci keramického kurzu drží hotový hrnek nad hrnčířským kruhem" height="2000" sizes="(max-width:1024px) calc(100vw - 40px), 740px" src="img/kurz-keramiky.webp" srcset="img/kurz-keramiky-800.webp 800w, img/kurz-keramiky.webp 1333w" width="1333"/>
<div class="who__body"><p class="who__tag">BOOKING STUDIO pro akce a kurzy</p><h3>Kurzy, workshopy, <br/>přednášky i jednorázové akce</h3><div class="who__chips"><span>Konkrétní dny a časy</span><span>Připomínka před akcí</span><span>Jednorázové i pravidelné termíny</span><span>Víc termínů na výběr</span><span>Platba převodem nebo na místě</span><span>Dárkové poukazy</span></div><span class="who__go">Otevřít demo <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
</div>
</div>
</section></main>
Loga klientů
Vodorovná řada log s popiskem pod každým. Třídy: klienti, klienti__pop, klienti__rada, klienti__kl, klienti__logo.
Střídavě text s odrážkami vlevo a vrstvený obrázek vpravo. Třídy: featrow, featrow--rev, featrow__txt, featrow__img, pxl, pill.
HTML kód
<main><section class="sec sec--rows">
<div class="wrap">
<div class="featrow">
<div class="featrow__txt">
<h2>Zákazník vidí ceny rovnou v kalendáři</h2>
<p class="lede"><strong>Nemusí nikam psát ani volat.</strong> Vybere termín, počet osob a doplňkové služby na jedné obrazovce.</p>
<ul class="ticks">
<li>Cena za noc u každého volného dne</li>
<li>Obsazené termíny nejdou vybrat</li>
<li>Systém sám hlídá kapacitu, u ubytování i minimální délku pobytu</li>
<li>Základní cena, sezónní ceny i vlastní cena pro konkrétní dny</li>
<li>Doplňkové služby se účtují za noc, za pobyt nebo za osobu</li>
<li>Termín nebo pokoj můžete uzavřít jedním kliknutím</li>
</ul>
<a class="pill" href="#" rel="noopener" target="_blank">Otevřít demo pro ubytování</a>
</div>
<div class="featrow__img"><div aria-label="Kalendář rezervace s cenou u každého volného dne a shrnutím pobytu" class="pxl zoom" data-full="/img/rezervacni-system-pro-ubytovani-kalendar.jpg" role="img">
<img alt="" class="pxl__l" data-tr="50" data-y0="16" height="900" src="img/vrstvy/kalendar-foto.webp" width="1200"/>
<img alt="" class="pxl__l pxl-karta pxl-karta--kal" data-tr="-86" data-y0="-32" height="563" src="img/vrstvy/kalendar-karta.webp" width="675"/>
</div></div>
</div>
<div class="featrow featrow--rev">
<div class="featrow__txt">
<h2>Grafika ve vašich firemních barvách</h2>
<p class="lede"><strong>Barvy, logo i fotky nastavíme podle vaší identity.</strong> Vypadá to jako váš web, ne jako cizí šablona.</p>
<ul class="ticks">
<li>Barvy, logo i úvodní fotka podle vaší identity</li>
<li>Fotogalerie, kapacita a popis u každé položky</li>
<li>U pokojů lůžka, výměra a vybavení včetně vlastních položek</li>
<li>Zobrazení na řádky, nebo mřížka o dvou či třech sloupcích</li>
<li>Pořadí sekcí si můžete sami přeskládat, co nechcete, vypnete</li>
<li>Galerie, výhody, nejbližší akce, časté dotazy i aktuality nebo články</li>
</ul>
<a class="pill" href="#" rel="noopener" target="_blank">Podívat se na ukázku</a>
</div>
<div class="featrow__img"><div aria-label="Rezervační systém ve firemních barvách a s vlastním logem" class="pxl zoom" data-full="/img/rezervacni-system-vlastni-vzhled.jpg" role="img">
<img alt="" class="pxl__l" data-tr="-12" data-y0="-2" height="900" src="img/vrstvy/vzhled-foto.webp" width="1200"/>
<img alt="" class="pxl__l pxl-karta pxl-karta--vzh" data-tr="100" data-y0="45" height="530" src="img/vrstvy/vzhled-karta.webp" width="392"/>
</div></div>
</div>
<div class="featrow">
<div class="featrow__txt">
<h2>Potvrzení, připomínky a poukazy bez vaší práce</h2>
<p class="lede"><strong>Rezervaci i platbu vyřídí host sám,</strong> e-maily za vás odešle systém.</p>
<ul class="ticks">
<li>Platba převodem s QR kódem na částku i variabilní symbol</li>
<li>Platba na místě, nebo úplně bez plateb, třeba u akce zdarma</li>
<li>Potvrzení zákazníkovi i vám, s platebními údaji a QR kódem</li>
<li>Připomínka před pobytem nebo akcí, čas odeslání si nastavíte sami</li>
<li>Firemní zákazník zadá IČO a údaje se samy načtou ze systému ARES</li>
<li>Dárkové poukazy ve vašich barvách, jdou vyčerpat i po částech</li>
</ul>
<a class="pill" href="#" rel="noopener" target="_blank">Otevřít demo pro akce</a>
</div>
<div class="featrow__img"><div aria-label="Rezervační systém pro akce a kurzy: karta workshopu s délkou, cenou a datem spuštění rezervací, vedle nabídka dárkového poukazu" class="pxl zoom" data-full="/img/rezervacni-system-pro-akce.jpg" role="img">
<img alt="" class="pxl__l" data-tr="44" data-y0="10" height="900" src="img/vrstvy/akce-foto.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="-100" data-y0="-45" height="900" src="img/vrstvy/akce-karta.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="130" data-y0="40" height="900" src="img/vrstvy/akce-poukaz.webp" width="1200"/>
</div></div>
</div>
<div class="featrow featrow--rev">
<div class="featrow__txt">
<h2>Přehledy, statistiky a exporty, které ocení i účetní</h2>
<p class="lede"><strong>Kdo dorazil a kolik zaplatil, máte na jednom místě.</strong> Žádné skládání z e-mailů a poznámek.</p>
<ul class="ticks">
<li>Tržby po měsících se srovnáním se stejným obdobím loni</li>
<li>Obsazenost, oblíbené položky i průměrná cena, vše přehledně i v grafech</li>
<li>Export do Excelu, CSV a PDF</li>
<li>U ubytování odejde žádost o hodnocení sama po odjezdu, nic se nezveřejní bez vašeho schválení</li>
<li>Automatické zálohy rezervací i nastavení</li>
<li>Vše běží na vašem hostingu, ne v cizím systému</li>
</ul>
<a class="pill" href="#">Co všechno je v ceně</a>
</div>
<div class="featrow__img"><div aria-label="Rezervační systém pro ubytování: karta pokoje s fotkou, lůžky, vybavením a cenou za noc" class="pxl zoom" data-full="/img/rezervacni-system-pro-ubytovani.jpg" role="img">
<img alt="" class="pxl__l" data-tr="50" data-y0="16" height="900" src="img/vrstvy/ubytovani-foto.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="-86" data-y0="-32" height="900" src="img/vrstvy/ubytovani-karta.webp" width="1200"/>
<img alt="" class="pxl__l" data-tr="-58" data-y0="-24" height="900" src="img/vrstvy/ubytovani-odznak.webp" width="1200"/>
</div></div>
</div>
</div>
</section></main>
Ceník
Cenová karta
Karta s modrým obrysem, štítkem, velkou cenou a výčtem toho, co je v ceně. Třídy: price, price__tag, price__v, price__u, price__note.
HTML kód
<main><section class="sec" id="cena"><div class="wrap"><div class="pricewrap"><div class="price">
<p class="price__tag">Jednorázová cena</p>
<p class="price__v num">29 990 Kč</p>
<p class="price__u">Kompletní systém, nastavení a naplnění daty v ceně.</p>
<ul class="ticks">
<li><strong>Nastavení a spuštění</strong> na vaší doméně</li>
<li><strong>Tři roky aktualizací</strong> systému v ceně</li>
<li><strong>E-mailová i telefonická podpora</strong> po celou dobu aktualizací</li>
<li>Web ve vašich barvách a s vaším logem</li>
<li><strong>Neomezeně</strong> pokojů, termínů i rezervací</li>
<li><strong>Česká, slovenská, anglická i německá verze</strong></li>
<li>Neomezený počet správců</li>
<li>Zaškolení a předání administrace</li>
</ul>
<p class="price__note"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M142,176a6,6,0,0,1-6,6,14,14,0,0,1-14-14V128a2,2,0,0,0-2-2,6,6,0,0,1,0-12,14,14,0,0,1,14,14v40a2,2,0,0,0,2,2A6,6,0,0,1,142,176ZM124,94a10,10,0,1,0-10-10A10,10,0,0,0,124,94Zm106,34A102,102,0,1,1,128,26,102.12,102.12,0,0,1,230,128Zm-12,0a90,90,0,1,0-90,90A90.1,90.1,0,0,0,218,128Z"></path></svg><span><strong>Po třech letech systém běží dál.</strong> Nic se nevypíná a o data nepřijdete. Uvedené ceny jsou konečné, nejsme plátci DPH.</span></p>
</div></div></div></section></main>
Poptávkový formulář
Mátová karta s nadpisem, telefonem a poli pod sebou. Třídy: form, form__sub, form__tel, frow, field, form__note.
HTML kód
<main><section class="sec" id="cena"><div class="wrap"><div class="pricewrap"><div class="form" id="poptavka">
<h3 class="hl">Vyzkoušejte BOOKING STUDIO</h3>
<p class="form__sub">Nechte nám kontakt a my se vám co nejdříve ozveme. Projdeme spolu, jak rezervace řešíte teď a co by se dalo zjednodušit. Nic tím neobjednáváte.</p>
<p class="form__tel"><strong>Chcete to raději probrat telefonicky?</strong> Zavolejte nám na <a href="#">+420 775 350 332</a></p>
<form accept-charset="UTF-8" id="leadForm" novalidate="">
<div aria-live="polite" class="form-status" role="status"></div>
<input name="utm_source" type="hidden"/><input name="utm_medium" type="hidden"/>
<input name="utm_campaign" type="hidden"/><input name="utm_term" type="hidden"/>
<input name="utm_content" type="hidden"/><input name="gclid" type="hidden"/>
<input name="fbclid" type="hidden"/>
<input name="msclkid" type="hidden"/>
<input name="referrer" type="hidden"/><input name="page" type="hidden"/><input name="lang" type="hidden" value="cs"/>
<div aria-hidden="true" class="form-trap">
<label for="website">Webová stránka</label>
<input autocomplete="off" id="website" name="website" tabindex="-1" type="text"/>
</div>
<div class="frow">
<div class="field">
<label for="jmeno">Jméno a příjmení</label>
<input autocomplete="name" id="jmeno" name="jmeno" required="" type="text"/>
</div>
<div class="field">
<label for="email">E-mail</label>
<input autocomplete="email" id="email" name="email" required="" type="email"/>
</div>
</div>
<div class="frow">
<div class="field">
<label for="telefon">Telefon</label>
<input autocomplete="tel" id="telefon" name="telefon" required="" type="tel"/>
</div>
<div class="field">
<label for="web">Adresa vašeho webu (nepovinné)</label>
<input autocomplete="url" id="web" inputmode="url" name="web" placeholder="" type="text"/>
</div>
<div class="field">
<label for="varianta">Co provozujete</label>
<select id="varianta" name="varianta" required="">
<option value="">Vyberte</option>
<option>Penzion</option>
<option>Hotel</option>
<option>Apartmány</option>
<option>Chalupa nebo chata</option>
<option>Akce, kurzy nebo workshopy</option>
<option>Něco jiného</option>
</select>
</div>
</div>
<button class="btn btn--primary" type="submit">Odeslat poptávku</button>
<p class="form__note">Odesláním souhlasíte se <a href="#" rel="noopener" target="_blank">zpracováním osobních údajů</a>.</p>
</form>
</div></div></div></section></main>
Kroky spolupráce
Tři bílé karty s kulatým číslem a tlačítkem pod nimi. Třídy: steps, step, step__n, step__lead, steps-cta.
HTML kód
<main><section class="sec sec--mint">
<div class="wrap">
<div class="sec-head">
<h2>Jak probíhá spolupráce</h2>
</div>
<div class="steps">
<div class="step">
<span class="step__n num">01</span>
<h3>Projdete si demo</h3>
<p class="step__lead">Uvidíte přesně to, co váš zákazník</p>
<p>Projděte si celou rezervaci od výběru termínu po potvrzovací e-mail nebo e-mail s žádostí o hodnocení.</p>
</div>
<div class="step">
<span class="step__n num">02</span>
<h3>Vše nastavíme za vás</h3>
<p class="step__lead">Nemusíte nic vyplňovat sami</p>
<p>Pokoje nebo termíny, ceny, sezóny, doplňky - vše nastavíme za vás. Vy nám jen řeknete, jak váš provoz funguje.</p>
</div>
<div class="step">
<span class="step__n num">03</span>
<h3>Rezervace vám chodí samy</h3>
<p class="step__lead">Vy se jen díváte, kdo dorazí</p>
<p>Host si sám zarezervuje, zaplatí převodem nebo na místě a potvrzení dostane on i vy. Před termínem mu odejde připomínka, ať nezapomene.</p>
</div>
</div>
<div class="steps-cta"><a class="btn btn--primary" href="#">Chci rezervační systém</a></div>
</div>
</section></main>
Srovnání
Tři souhrnné karty s cenou a podrobná tabulka řádků se zelenými a červenými odrážkami. Třídy: cmp-sum, cmp-sum__card--good, cmp, cmp__row, cmp__good, cmp__bad.
HTML kód
<main><section class="sec sec--mint" id="problem">
<div class="wrap">
<div class="sec-head">
<h2>Proč nespoléhat jen na Booking a Airbnb</h2>
<p class="lede">Booking a Airbnb dokážou naplnit sezónu. Problém začne ve chvíli, kdy jsou vaším jediným kanálem. <br/>Pak si diktují podmínky, protože nemáte kam jinam poslat zákazníka, který chce rezervovat.</p>
</div>
<div class="cmp-sum">
<p class="cmp-sum__h">Celkem za tři roky</p>
<div class="cmp-sum__cards">
<div class="cmp-sum__card cmp-sum__card--good"><span><b>BOOKING STUDIO</b><small>jednorázově, vše v ceně</small></span><strong>29 990 Kč</strong></div>
<div class="cmp-sum__card"><span><b>Booking / Airbnb</b><small>provize z každé rezervace*</small></span><strong>~162 000 Kč</strong></div>
<div class="cmp-sum__card"><span><b>WordPress</b><small>web, pluginy, licence a údržba*</small></span><strong>~65 000 Kč</strong></div>
</div>
<button aria-controls="cmpDet" aria-expanded="false" class="btn btn--ghost cmp-sum__btn" id="cmpBtn" type="button">Zobrazit podrobné srovnání</button>
</div>
<div class="cmp-wrap" id="cmpDet"><div class="cmp">
<div class="cmp__row">
<div class="cmp__label">Kdo to celé udělá</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Všechno zařídíme my</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Musíte si to zařídit sami</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Musíte si najít někoho, kdo to postaví</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Nastavení a spuštění</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Do tří dnů a bez vaší práce</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Několik večerů v nastavení portálu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Několik týdnů až měsíců</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Co zaplatíte na začátku</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i><strong>29 990 Kč</strong> jednorázově</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">Booking / Airbnb</i>Nic, registrace je zdarma</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Od <strong>20 000 Kč</strong> za web a pluginy</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label"><span>Co doplácíte během tří let</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i><strong>0 Kč</strong>, vše je v ceně</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Zhruba <strong>162 000 Kč</strong> na provizích</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Zhruba <strong>45 000 Kč</strong> za licence a údržbu</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Provize z rezervací</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Žádná</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>3 až 15 % z každé rezervace</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">WordPress</i>Žádná</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Aktualizace a údržba</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Tři roky v ceně</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">Booking / Airbnb</i>Řeší portál, dokud platíte</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>WordPress, šablona a každý plugin zvlášť</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Když se něco pokazí</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Ozvete se přímo nám</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Podpora mizivá, nebo jen anglicky</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Sháníte, kdo to opraví</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Kontakt na zákazníka a data</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Máte vy, v systému i exportech</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Jen v systému portálu, ne u vás</span></div>
<div class="cmp__good"><span><i class="cmp__kdo">WordPress</i>Máte vy, ale nejspíš netušíte kde</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Rezervační funkce</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Upravíme podle vašeho provozu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Jen to, co umí portál v základu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Skládačka pluginů od různých autorů</span></div>
</div>
<div class="cmp__row">
<div class="cmp__label">Recenze zákazníků</div>
<div class="cmp__good"><span><i class="cmp__kdo">BOOKING STUDIO</i>Součást systému</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">Booking / Airbnb</i>Zůstávají portálu</span></div>
<div class="cmp__bad"><span><i class="cmp__kdo">WordPress</i>Jen s dalším pluginem</span></div>
</div>
</div></div>
<p class="cmp__pozn"><span class="cmp__hv">*</span> Modelový příklad: 10 rezervací měsíčně po 3 000 Kč a 15% provizi portálu.</p>
</div>
</section></main>
Obsah
Časté dotazy
Dva sloupce rozbalovacích otázek s plusem v modré, první otázka rozbalená. Třídy: faq, faq__col, details, summary.
HTML kód
<section class="sec sec--mint"><div class="wrap"><div class="sec-head"><h2>Časté dotazy</h2></div><div class="faq"><div class="faq__col"><details open=""><summary>Musím kvůli tomu měnit celý web?</summary><p>Nemusíte. Rezervace můžou běžet jako samostatná stránka na vaší doméně a z webu na ni jen odkážete.</p></details><details><summary>Zvládnu systém spravovat sám?</summary><p>Ceny, termíny, doplňky i texty zvládnete měnit sami.</p></details></div><div class="faq__col"><details><summary>Kde jsou uložená data zákazníků?</summary><p>U vás, ne v cizím systému.</p></details><details><summary>Jak zákazník zaplatí?</summary><p>Převodem, na místě, nebo obojí.</p></details></div></div></div></section>
Tři věci jinak
Tři bílé karty s ikonou, nadpisem, textem a štítkem dole. Třídy: grid grid--3, card, card__ico, card__chip.
HTML kód
<main><section class="sec" id="jinak">
<div class="wrap">
<div class="sec-head">
<h2>Tři věci, které děláme jinak</h2>
<p class="lede"><strong>BOOKING STUDIO stavíme pro malé provozy, takže do něj nedáváme věci, které by většina nevyužila, ale všichni by je platili.</strong> U tří z nich je dobré vědět předem, jak je řešíme. A když některou potřebujete zrovna vy, projdeme si to spolu a systém přizpůsobíme.</p>
</div>
<div class="grid grid--3">
<div class="card">
<div aria-hidden="true" class="card__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M222,48V96a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h33.52L183.47,72a81.51,81.51,0,0,0-57.53-24h-.46A81.5,81.5,0,0,0,68.19,71.28a6,6,0,1,1-8.38-8.58,93.38,93.38,0,0,1,65.67-26.76H126a93.45,93.45,0,0,1,66,27.53l18,18V48a6,6,0,0,1,12,0ZM187.81,184.72a81.5,81.5,0,0,1-57.29,23.34h-.46a81.51,81.51,0,0,1-57.53-24L54.48,166H88a6,6,0,0,0,0-12H40a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V174.48l18,18.05a93.45,93.45,0,0,0,66,27.53h.52a93.38,93.38,0,0,0,65.67-26.76,6,6,0,1,0-8.38-8.58Z"></path></svg></div>
<h3>Rezervace z portálů</h3>
<p>Portálu dáte jen část kapacity a zbytek prodáváte u sebe, každý pokoj má jeden kalendář ve vašem systému. Automatické propojení s Bookingem nebo Airbnb (channel manager) v ceně není a nechystáme ho, pro malý provoz se nevyplatí.</p>
<span class="card__chip">bez channel manageru</span>
</div>
<div class="card">
<div aria-hidden="true" class="card__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M224,50H32A14,14,0,0,0,18,64V192a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V64A14,14,0,0,0,224,50ZM32,62H224a2,2,0,0,1,2,2V90H30V64A2,2,0,0,1,32,62ZM224,194H32a2,2,0,0,1-2-2V102H226v90A2,2,0,0,1,224,194Zm-18-26a6,6,0,0,1-6,6H168a6,6,0,0,1,0-12h32A6,6,0,0,1,206,168Zm-64,0a6,6,0,0,1-6,6H120a6,6,0,0,1,0-12h16A6,6,0,0,1,142,168Z"></path></svg></div>
<h3>Platby</h3>
<p>Host zaplatí převodem s QR kódem, který mu načte částku i variabilní symbol, nebo až na místě. Bez poplatků z transakce a bez smlouvy s bankou. Platební brána pro karty v systému není; u akcí zdarma jde platby úplně vypnout.</p>
<span class="card__chip">bez platební brány</span>
</div>
<div class="card">
<div aria-hidden="true" class="card__ico"><svg aria-hidden="true" fill="currentColor" viewbox="0 0 256 256"><path d="M182,104a6,6,0,0,1-6,6H80a6,6,0,0,1,0-12h96A6,6,0,0,1,182,104Zm-6,26H80a6,6,0,0,0,0,12h96a6,6,0,0,0,0-12Zm54-74V208a6,6,0,0,1-2.85,5.1,5.93,5.93,0,0,1-3.15.9,6,6,0,0,1-2.68-.63L192,198.71l-29.32,14.66a6,6,0,0,1-5.36,0L128,198.71,98.68,213.37a6,6,0,0,1-5.36,0L64,198.71,34.68,213.37A6,6,0,0,1,26,208V56A14,14,0,0,1,40,42H216A14,14,0,0,1,230,56Zm-12,0a2,2,0,0,0-2-2H40a2,2,0,0,0-2,2V198.29l23.32-11.66a6,6,0,0,1,5.36,0L96,201.29l29.32-14.66a6,6,0,0,1,5.36,0L160,201.29l29.32-14.66a6,6,0,0,1,5.36,0L218,198.29Z"></path></svg></div>
<h3>Faktury</h3>
<p>Fakturační údaje od zákazníka vám systém pošle e-mailem a doklad vystavíte ve svém účetním programu jako doteď. Faktury a daňové doklady systém sám nevystavuje, ať se účetnictví neduplikuje.</p>
<span class="card__chip">bez fakturace</span>
</div>
</div>
</div>
</section></main>
Karty novinek
Mřížka karet s fotkou 16:9, datem, nadpisem, perexem a odkazem se šipkou. Třídy: news, news__body, news__tag, who__go.
HTML kód
<main><section class="sec sec--mint" id="novinky">
<div class="wrap">
<div class="sec-head">
<h2>Co je v systému nového</h2>
<p class="lede">BOOKING STUDIO pořád vylepšujeme. Tohle jsme do systému přidali naposledy.</p>
</div>
<div class="grid grid--3">
<a class="news" href="#">
<img alt="Lidé s deštníky na deštivé ulici" height="450" src="img/novinka-pocasi.webp" width="800"/>
<div class="news__body"><p class="news__tag">Říjen 2026</p><h3>Předpověď počasí přímo na webu</h3><p>Hosté uvidí teplotu, vítr a předpověď na čtyři dny v hlavičce webu i v článcích.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" href="#">
<img alt="Podzimní les poprášený prvním sněhem" height="450" src="img/novinka-fotky.webp" width="800"/>
<div class="news__body"><p class="news__tag">Říjen 2026</p><h3>Úvodní fotka, která se mění s ročním obdobím</h3><p>Do hlavičky webu nahrajete víc fotek a systém je střídá. V zimě ukáže zimní, v létě letní.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" href="#">
<img alt="Hosté u recepce hostelu" height="450" src="img/novinka-jazyky.webp" width="800"/>
<div class="news__body"><p class="news__tag">Září 2026</p><h3>Web ve čtyřech jazycích</h3><p>Hosté si web přepnou do češtiny, slovenštiny, angličtiny nebo němčiny a <span class="news__nz">e-maily</span> i poukazy dostanou ve svém jazyce.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" hidden="" href="#">
<img alt="Ruce držící telefon s mřížkou fotek" height="450" src="img/novinka-sdileni.webp" width="800"/>
<div class="news__body"><p class="news__tag">Září 2026</p><h3>Rychlejší web a hezčí náhled při sdílení</h3><p>Fotky se při nahrání samy zmenší a převedou do úsporného formátu. Odkaz na váš web má při sdílení pěkný náhled.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" hidden="" href="#">
<img alt="Ruka zapichuje špendlík do mapy města" height="450" src="img/novinka-misto.webp" width="800"/>
<div class="news__body"><p class="news__tag">Září 2026</p><h3>Místo konání u každé služby</h3><p>Ke každé akci zadáte, kde se koná. Návštěvníci si podle místa filtrují nabídku a najdou ho i v potvrzení.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
<a class="news" hidden="" href="#">
<img alt="Telefon s ikonou e-mailové aplikace" height="450" src="img/novinka-emaily.webp" width="800"/>
<div class="news__body"><p class="news__tag">Srpen 2026</p><h3>E-maily, které ladí s vaším webem</h3><p>Potvrzení rezervace má pruh s názvem vašeho ubytování, fotku pokoje a patičku s kontakty.</p><span class="who__go">Přečíst novinku <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M5 12h13M13 6l6 6-6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></span></div>
</a>
</div>
<p class="news-all"><button aria-expanded="false" id="newsBtn" type="button">Všechny novinky <svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M12 5v13M6 13l6 6 6-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg></button></p>
</div>
</section></main>
Článek
Úzký sloupec s odkazem zpět, datem, nadpisem, perexem, širokou fotkou a textem s podnadpisy. Třídy: clanek, clanek__zpet, clanek__datum, clanek__foto, clanek__text.
HTML kód
<main class="clanek">
<div class="wrap">
<a class="clanek__zpet" href="#"><svg aria-hidden="true" fill="none" viewbox="0 0 24 24"><path d="M19 12H6M11 6l-6 6 6 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4"></path></svg>Všechny novinky</a>
<p class="clanek__datum">16. 8. 2026</p>
<h1>E-maily, které ladí s vaším webem</h1>
<p class="lede">Potvrzení rezervace i další zprávy ze systému mají nový vzhled: pruh s vaším názvem, fotku a patičku s kontakty.</p>
<img alt="" class="clanek__foto zoom" data-full="/img/novinky/novinka-emaily.webp" fetchpriority="high" height="900" sizes="(max-width:926px) 100vw, 822px" src="img/novinky/novinka-emaily.webp" srcset="img/novinka-emaily.webp 800w, img/novinky/novinka-emaily.webp 1600w" width="1600"/>
<div class="clanek__text"><p>Potvrzení rezervace je často první zpráva, kterou od vás host dostane. Proto jsme e-mailům ze systému dali vzhled, který ladí s vaším webem.</p><hr/><h3>Co v e-mailu host uvidí</h3><ul><li>Nahoře pruh s názvem vašeho ubytování v barvě webu.</li><li>Fotku pokoje, který si host rezervoval.</li><li>Dole patičku s adresou a telefonem.</li></ul><p><b>Potvrzení, které dostane host:</b></p><img alt="Ukázka potvrzovacího e-mailu pro hosta" class="zoom na-vysku" height="3440" src="img/novinky/mail-host-cs.webp" width="1440"/><p><b>Oznámení o nové rezervaci pro správce:</b></p><img alt="Ukázka e-mailu správci o nové rezervaci" class="zoom ctverec" height="1392" src="img/novinky/mail-spravce-cs.webp" width="1440"/><hr/><h3>Platí pro všechny zprávy</h3><p>Nový vzhled dostane každý e-mail, který systém odešle, od potvrzení rezervace po připomínku. Texty zpráv si dál upravujete v administraci v záložce E-maily, o vzhled se systém postará sám.</p><hr/><h3>V jazyce rezervace</h3><p>E-maily odcházejí v jazyce, ve kterém host rezervoval. Každý jazyk má vlastní texty, které upravíte po přepnutí jazyka v administraci.</p><img alt="Úprava textu e-mailu s náhledem v administraci, záložka E-maily" class="zoom na-vysku" height="2000" src="img/novinky/adm-emaily-cs.webp" width="1600"/><hr/><p>E-maily jsou postavené tak, aby se správně zobrazily i v Outlooku, který s grafikou e-mailů tradičně zápasí.</p></div>
<div class="btn-row"><a class="btn btn--primary" href="#">Chci rezervační systém</a><a class="btn btn--ghost" href="#">Všechny novinky</a></div>
</div>
</main>
Navigace
Závěrečná výzva
Modrý přechodový pás s nadpisem, větou a dvěma tlačítky. Třídy: endcta, endcta__btns, btn--white, btn--outline.
HTML kód
<main><section class="endcta">
<div class="wrap">
<h2>Rezervace, ze kterých nikomu neplatíte provizi</h2>
<p>Projděte si demo, nebo nám nechte kontakt. Nic tím neobjednáváte.</p>
<div class="endcta__btns">
<a class="btn btn--white" href="#">Vyzkoušet živé demo</a>
<a class="btn btn--outline" href="#">Chci rezervační systém</a>
</div>
</div>
</section></main>
Patička
Logo, údaje o firmě, kontakt s velkým telefonem a spodní lišta s odkazy. Třídy: foot, foot__top, foot__brand, foot__contact, foot__bar.
