# Design system Hostel Pavlov

Tento soubor popisuje design system Hostel Pavlov. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly.

Levné ubytování v Pavlově u Mikulova, přímo na Pálavě. 15 pokojů s ceníkem a rezervací, česky i německy.

Písmo: Lexend. Živý web: https://www.hostelpavlov.cz/. Katalog: https://www.romankacerek.cz/dev/designsystem/hostelpavlov/. Sestaveno 11. 11. 2026.

## Soubory

Načti je v tomto pořadí:

- https://www.romankacerek.cz/dev/designsystem/hostelpavlov/site/assets/css/web.css
- https://www.romankacerek.cz/dev/designsystem/hostelpavlov/site/assets/js/web.js

Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/hostelpavlov/site/.

## Pravidla

### Základní pravidla

- Celý web je v jedné rodině Lexend s variabilní váhou 400 až 700.
- Značková barva je `--brand` #091C00, tělo textu `--text` #3b4238, pískový podklad sekcí `--sand` #f0f5f9.
- Dělení obstarávají čárkované linky `--dash`, ne stíny ani plné čáry.
- Karty, obrázky a tlačítka mají rádius 12 px. Kulaté prvky 50 % nebo 999px.
- Hlavní akce je `btn--primary`, doplňková `btn--line`. Na obrazovce úvod jsou nejvýš dvě.
- Vnější okraj je `--pad` a mezera sloupců `--gap`, obojí plynule přes `clamp()`.

### Jazyk

- Web má českou a německou verzi. Texty mají nezlomitelné mezery za jednopísmennými předložkami.

## Barvy

| Název | Hodnota | V tmavém tématu | Použití |
| --- | --- | --- | --- |
| --brand | #091C00 |  | Značka, tlačítka, tmavé plochy. |
| --sand | #f0f5f9 |  | Podklad sekcí sec--sand. |
| bílá | #ffffff |  | Podklad stránky a karet. |
| #e6ebef | #e6ebef |  | Tmavší písek. |
| --ink | #0b1208 |  | Nadpisy. |
| --text | #3b4238 |  | Tělo textu. |
| --muted | #6b7266 |  | Popisky a data. |
| --line | rgba(9,28,0,.12) |  | Tenké plné linky. |
| --dash | rgba(9,28,0,.22) |  | Barva čárkovaných linek, 1px dashed. |
| --arrow | #767676 |  | Šipky posuvníků. |
| --arrow-hover | #555555 |  | Šipky při najetí. |
| chyba | #b3261e |  | Chyba formuláře. |

## Typografie

| Styl | Hodnoty | Použití |
| --- | --- | --- |
| H1 | viz CSS | Nadpis v úvodu |
| H2 | viz CSS | Nadpis sekce |
| H3 | viz CSS | Karta služby |
| Nadpis článku | viz CSS | Úvod článku |
| Štítek | viz CSS | Nad nadpisem sekce |
| Perex úvodu | viz CSS | Úvod v úvodu |
| Text | viz CSS | Tělo textu |

## Mezery a šířky

| Název | Hodnota | Použití |
| --- | --- | --- |
| --pad | clamp(20px,4.5vw,72px) | Boční okraj stránky. |
| --gap | clamp(32px,5vw,88px) | Mezera sloupců. |
| --navh | 84px | Výška navigace, 70 px na telefonu. |

## Rádiusy

| Název | Hodnota | Použití |
| --- | --- | --- |
| karty a tlačítka | 12px | Výchozí rádius. |
| štítky | 999px | Přepínač jazyka a kulaté prvky. |

## Komponenty: Úvod

### Úvod s kartou

Úvod stránky s navigací, obrázkem a kartou s hlavní akcí. Třídy: `hero hero--karta`, `hero__kicker`, `hero__lead`.

```html
<header class="hero hero--karta">
<nav aria-label="Hlavní menu" class="nav">
<a class="nav__logo" href="#"><img alt="Hostel Pavlov" class="logo-img" height="45" src="assets/logo.svg" width="120"/></a>
<div class="nav__links">
<a href="#">Pokoje a ceník</a>
<a href="#">Fotogalerie</a>
<a href="#">Naše tipy</a>
<a href="#">Časté otázky</a>
<a href="#">Kontakt</a>
<a class="btn btn--primary" href="#">Rezervace</a>
<details class="lang"><summary aria-label="Jazyk: Česky" class="lang__btn"><svg aria-hidden="true" class="flag" height="20" viewbox="0 0 20 20" width="20"><path d="M0 0h20v10H0z" fill="#fff"></path><path d="M0 10h20v10H0z" fill="#d7141a"></path><path d="M0 0l10 10L0 20z" fill="#11457e"></path></svg><span>CZ</span><svg aria-hidden="true" class="lang__arr" height="7" viewbox="0 0 12 8" width="11"><path d="M1 1.5l5 5 5-5"></path></svg></summary><ul class="lang__menu"><li><span aria-current="true" class="lang__item is-current"><svg aria-hidden="true" class="flag" height="20" viewbox="0 0 20 20" width="20"><path d="M0 0h20v10H0z" fill="#fff"></path><path d="M0 10h20v10H0z" fill="#d7141a"></path><path d="M0 0l10 10L0 20z" fill="#11457e"></path></svg>Česky</span></li><li><a class="lang__item" href="#" hreflang="de" lang="de"><svg aria-hidden="true" class="flag" height="20" viewbox="0 0 20 20" width="20"><path d="M0 0h20v20H0z" fill="#c8102e"></path><path d="M0 6.67h20v6.66H0z" fill="#fff"></path></svg>Deutsch</a></li></ul></details>
<button aria-controls="mobMenu" aria-expanded="false" aria-label="Otevřít menu" class="burger" type="button"><span aria-hidden="true" class="burger__lines"><span></span><span></span><span></span></span><span class="burger__txt">Menu</span></button>
</div>
</nav>
<div class="hero__photo">
<img alt="Pavlov s vinicemi a Novomlýnskými nádržemi při západu slunce" fetchpriority="high" height="812" sizes="100vw" src="assets/foto/hero-pavlov.webp" srcset="assets/foto/hero-pavlov-960.webp 960w, assets/foto/hero-pavlov.webp 1920w" width="1920"/>
</div>
<div class="hero__body">
<p class="hero__kicker">Ubytování Pavlov, Pálava</p>
<h1>Hostel Pavlov, levné ubytování v Pavlově u Mikulova</h1>
<p class="hero__lead">Příjemný pobyt v srdci chráněné krajinné oblasti Pálava, kousek od vinných sklepů, Novomlýnských nádrží i Mikulova.</p>
<div class="hero__cta">
<a class="btn btn--primary" href="#">Rezervace</a>
<a class="btn btn--line" href="#">+420 608 463 563</a>
</div>
</div>
<a class="pill" href="#"><span><b>Od 550 Kč za noc</b><small>děti do 3 let zdarma</small></span></a>
</header>
```

### Úvod článku

Úvod podstránky se zdrojovou cestou a velkým nadpisem. Třídy: `art-hero art-hero--big`.

```html
<header class="art-hero art-hero--big">
<nav aria-label="Hlavní menu" class="nav">
<a class="nav__logo" href="#"><img alt="Hostel Pavlov" class="logo-img" height="45" src="assets/logo.svg" width="120"/></a>
<div class="nav__links">
<a href="#">Pokoje a ceník</a>
<a href="#">Fotogalerie</a>
<a href="#">Naše tipy</a>
<a href="#">Časté otázky</a>
<a aria-current="page" class="is-active" href="#">Kontakt</a>
<a class="btn btn--primary" href="#">Rezervace</a>
<details class="lang"><summary aria-label="Jazyk: Česky" class="lang__btn"><svg aria-hidden="true" class="flag" height="20" viewbox="0 0 20 20" width="20"><path d="M0 0h20v10H0z" fill="#fff"></path><path d="M0 10h20v10H0z" fill="#d7141a"></path><path d="M0 0l10 10L0 20z" fill="#11457e"></path></svg><span>CZ</span><svg aria-hidden="true" class="lang__arr" height="7" viewbox="0 0 12 8" width="11"><path d="M1 1.5l5 5 5-5"></path></svg></summary><ul class="lang__menu"><li><span aria-current="true" class="lang__item is-current"><svg aria-hidden="true" class="flag" height="20" viewbox="0 0 20 20" width="20"><path d="M0 0h20v10H0z" fill="#fff"></path><path d="M0 10h20v10H0z" fill="#d7141a"></path><path d="M0 0l10 10L0 20z" fill="#11457e"></path></svg>Česky</span></li><li><a class="lang__item" href="#" hreflang="de" lang="de"><svg aria-hidden="true" class="flag" height="20" viewbox="0 0 20 20" width="20"><path d="M0 0h20v20H0z" fill="#c8102e"></path><path d="M0 6.67h20v6.66H0z" fill="#fff"></path></svg>Deutsch</a></li></ul></details>
<button aria-controls="mobMenu" aria-expanded="false" aria-label="Otevřít menu" class="burger" type="button"><span aria-hidden="true" class="burger__lines"><span></span><span></span><span></span></span><span class="burger__txt">Menu</span></button>
</div>
</nav>
<div class="wrap">
<nav aria-label="Drobečková navigace" class="crumbs"><a href="#">Úvod</a><svg aria-hidden="true" class="crumbs__sep" viewbox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg><span aria-current="page">Kontakt</span></nav>
<h1>Napište nám termín a počet osob, nebo rovnou zavolejte.</h1>
</div>
</header>
```

## Komponenty: Prvky

### Tlačítka

Plné tlačítko je hlavní akce, obrysové doplňková. Třídy: `btn btn--primary`, `btn btn--line`.

```html
<div style="display:flex;flex-wrap:wrap;gap:12px;padding:24px"><a class="btn btn--primary" href="#">Rezervace</a><a class="btn btn--line" href="#">+420 608 463 563</a></div>
```

## Komponenty: Sekce

### Výhody

Pruh výhod hned pod úvodem. Třída: `perks`.

```html
<main><section aria-label="Proč u nás" class="perks">
<div class="wrap">
<ul>
<li><b>15 pokojů</b><span>pro až 45 hostů</span></li>
<li><b>550 Kč</b><span>za dospělého a noc</span></li>
<li><b>Parkoviště</b><span>zdarma u hostelu</span></li>
<li><b>Wi-Fi</b><span>zdarma pro hosty</span></li>
</ul>
</div>
</section></main>
```

### Sekce s pokoji

Nadpis s perexem a posuvník fotek pokojů. Třídy: `sec`, `head`.

```html
<main><section class="sec" id="pokoje">
<div class="wrap">
<div class="head">
<h2>Vybavení a pokoje Hostelu Pavlov</h2>
<p>K dispozici je 15 pokojů s kapacitou až 45 hostů, terasa s posezením a bezplatné parkoviště přímo u hostelu.</p>
</div>
<div class="pokoje__photos" data-lb="">
<img alt="Pokoj s manželskou postelí a samostatnými lůžky" data-full="assets/foto/pokoj-1-velka.webp" height="800" src="assets/foto/pokoj-1.webp" width="600"/>
<img alt="Apartmán s kuchyňským koutem a lednicí" data-full="assets/foto/pokoj-kuchynka-1-velka.webp" height="800" src="assets/foto/pokoj-kuchynka-1.webp" width="600"/>
<img alt="Koupelna se sprchovým koutem a WC" data-full="assets/foto/koupelna-1-velka.webp" height="600" src="assets/foto/koupelna-1.webp" width="800"/>
</div>
<div class="pokoje__list"><ul class="svc__list">
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Lednice s mrazicím boxem na každém pokoji</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Společná kuchyň</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Kuchyňský kout v nově zrekonstruovaných apartmánech</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Vlastní sociální zařízení v nově zrekonstruovaných apartmánech</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Sociální zařízení a pračka</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Terasa s posezením</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Parkoviště zdarma pro auto, kolo i motorku</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Wi-Fi zdarma</li>
<li><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg>Obchod s potravinami nedaleko</li>
</ul>
</div>
<div class="sec__cta"><a class="btn btn--line" href="#">Pokoje a ceník</a></div>
</div>
</section></main>
```

### Služby

Mřížka služeb s ikonami. Třídy: `sluzby`, `sluzby__kicker`.

```html
<main><section class="sec sluzby" id="sluzby">
<div class="wrap sluzby__in">
<div class="sluzby__intro">
<p class="sluzby__kicker">Ubytování pod Pálavou</p>
<h2>Služby Hostelu Pavlov</h2>
<p>Parkování, Wi-Fi i kuchyň máte v ceně. Do restaurací, sklepů i obchodu dojdete pěšky.</p>
</div>
<ul class="sluzby__list">
<li><img alt="" height="32" src="assets/ikonky/parkoviste.svg" width="32"/><h3>Bezplatné parkoviště</h3><p>Pro vaše auto, kolo i motorku.</p></li>
<li><img alt="" height="32" src="assets/ikonky/wifi.svg" width="32"/><h3>Wi-Fi připojení zdarma</h3><p>Pro všechny ubytované hosty.</p></li>
<li><img alt="" height="32" src="assets/ikonky/terasa.svg" width="32"/><h3>Posezení na terase</h3><p>S kávou nebo sklenkou vína.</p></li>
<li><img alt="" height="32" src="assets/ikonky/restaurace-vinne-sklipky.svg" width="32"/><h3>Restaurace a vinné sklípky</h3><p>Přímo v Pavlově, dojdete pěšky.</p></li>
<li><img alt="" height="32" src="assets/ikonky/obchody.svg" width="32"/><h3>Obchod s potravinami</h3><p>Nedaleko hostelu.</p></li>
<li><img alt="" height="32" src="assets/ikonky/kuchyne.svg" width="32"/><h3>Kuchyňský kout i společná kuchyň</h3><p>Nově zrekonstruované apartmány mají vlastní kuchyňský kout. Pro ostatní hosty je tu společná kuchyň a pračka.</p></li>
</ul>
</div>
</section></main>
```

### Ceník

Cenové karty pokojů. Třída: `price`.

```html
<main><section class="sec" id="cenik">
<div class="wrap">
<div class="head">
<h2>Ceník ubytování v Hostelu Pavlov</h2>
<p>Ceny jsou za osobu a noc, včetně DPH.</p>
</div>
<ul class="prices">
<li class="price"><img alt="" height="48" src="assets/ikonky/dospely.svg" width="48"/><h3>Dospělý</h3><b>550 Kč</b><small>za noc</small></li>
<li class="price"><img alt="" height="48" src="assets/ikonky/pristylka.svg" width="48"/><h3>Dítě nad 9 let</h3><b>550 Kč</b><small>za noc</small></li>
<li class="price"><img alt="" height="48" src="assets/ikonky/deti.svg" width="48"/><h3>Dítě 3-9 let</h3><b>450 Kč</b><small>za noc</small></li>
</ul>
<ul class="notes">
<li><strong>Děti do 3 let zdarma</strong> bez nároku na lůžko.</li>
<li><strong>Poplatek z pobytu</strong> 30 Kč za dospělého a noc.</li>
<li><strong>Úklid</strong> 100 Kč za osobu a pobyt, jen při pobytu na 3 noci a méně. Od 4 nocí úklid neplatíte.</li>
</ul>
</div>
</section></main>
```

### Poptávkový formulář

Formulář s výpočtem ceny na pískovém podkladu. Třídy: `sec--sand`, `field`, `field-row`, `field__err`.

```html
<main><section class="sec sec--sand" id="poptavka">
<div class="wrap order">
<div>
<h2>Zavolejte, nebo nám napište</h2>
<p class="order__lead">Po telefonu vám volné pokoje potvrdíme nejrychleji. Když se nedovoláte, pošlete rezervaci s termínem a ozveme se vám.</p>
<div class="contact">
<span aria-hidden="true" class="contact__ic"><svg class="contact__svg" viewbox="0 0 24 24"><path class="ic-ring__w1" d="M15.5 3.2a6.5 6.5 0 015.3 5.3"></path><path class="ic-ring__w2" d="M15.2 6.6a3 3 0 012.2 2.2"></path><path class="ic-ring__phone" d="M5.2 3.5h3.3l1.7 4.3-2.1 1.3a10.5 10.5 0 005.8 5.8l1.3-2.1 4.3 1.7v3.3a1.8 1.8 0 01-1.8 1.8A15.8 15.8 0 013.4 5.3a1.8 1.8 0 011.8-1.8z"></path></svg></span>
<a class="contact__tel" href="#">+420 608 463 563</a>
<a class="contact__tel" href="#">+420 773 635 563</a>
<a class="contact__mail" href="#">info@hostelpavlov.cz</a>
</div>
</div>
<form data-ceny='{"dospely":550,"dite":450,"poplatek":30,"uklid":100,"uklidDo":3}' data-poptavka="">
<h3 class="form__title">Rezervace ubytování</h3>
<p class="form__err" data-err="" hidden="" role="alert">Rezervaci se nepodařilo odeslat. Zkontrolujte prosím jméno, telefon, e-mail a termín, nebo nám zavolejte na +420 608 463 563.</p>
<div class="field">
<label for="f-name">Jméno a příjmení</label>
<input aria-describedby="f-name-err" autocomplete="name" data-msg="Vyplňte prosím jméno a příjmení." id="f-name" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="f-name-err"></p>
</div>
<div class="field-row">
<div class="field">
<label for="f-tel">Telefon</label>
<input aria-describedby="f-tel-err" autocomplete="tel" data-msg="Vyplňte prosím telefon." data-msg-format="Zkontrolujte prosím telefonní číslo." id="f-tel" name="telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-tel-err"></p>
</div>
<div class="field">
<label for="f-mail">E-mail</label>
<input aria-describedby="f-mail-err" autocomplete="email" data-msg="Vyplňte prosím e-mail." data-msg-format="Zkontrolujte prosím e-mail, třeba jestli v něm nechybí zavináč." id="f-mail" name="email" required="" type="email"/>
<p class="field__err" hidden="" id="f-mail-err"></p>
</div>
</div>
<div class="field-row">
<div class="field">
<label for="f-from">Příjezd</label>
<input aria-describedby="f-from-err" data-msg="Vyberte prosím datum příjezdu." data-msg-format="Příjezd nemůže být v minulosti." id="f-from" name="prijezd" required="" type="date"/>
<p class="field__err" hidden="" id="f-from-err"></p>
</div>
<div class="field">
<label for="f-to">Odjezd</label>
<input aria-describedby="f-to-err" data-after="f-from" data-msg="Vyberte prosím datum odjezdu." data-msg-format="Odjezd musí být až po příjezdu." id="f-to" name="odjezd" required="" type="date"/>
<p class="field__err" hidden="" id="f-to-err"></p>
</div>
</div>
<div class="field-row">
<div class="field">
<label for="f-adults">Dospělí</label>
<input aria-describedby="f-adults-err" data-msg="Zadejte prosím počet dospělých." data-msg-format="Zadejte prosím počet od 1 do 45." id="f-adults" max="45" min="1" name="dospeli" required="" type="number" value="2"/>
<p class="field__err" hidden="" id="f-adults-err"></p>
</div>
<div class="field">
<label for="f-teens">Děti nad 9 let</label>
<input aria-describedby="f-teens-err" data-msg-format="Zadejte prosím počet od 0 do 45." id="f-teens" max="45" min="0" name="deti_nad9" type="number" value="0"/>
<p class="field__err" hidden="" id="f-teens-err"></p>
</div>
</div>
<div class="field-row">
<div class="field">
<label for="f-kids">Děti 3-9 let</label>
<input aria-describedby="f-kids-err" data-msg-format="Zadejte prosím počet od 0 do 45." id="f-kids" max="45" min="0" name="deti" type="number" value="0"/>
<p class="field__err" hidden="" id="f-kids-err"></p>
</div>
<div class="field">
<label for="f-babies">Děti do 3 let</label>
<input aria-describedby="f-babies-err" data-msg-format="Zadejte prosím počet od 0 do 45." id="f-babies" max="45" min="0" name="batolata" type="number" value="0"/>
<p class="field__err" hidden="" id="f-babies-err"></p>
</div>
</div>
<div class="calc" data-calc="" hidden="">
<p class="calc__title">Orientační cena pobytu</p>
<ul class="calc__rows" data-calc-rows=""></ul>
<p aria-live="polite" class="calc__total"><span>Celkem</span><b data-calc-total=""></b></p>
<p class="calc__note">Přesnou cenu potvrdíme v odpovědi.</p>
</div>
<div class="field">
<label for="f-msg">Zpráva</label>
<textarea id="f-msg" name="zprava" placeholder="Například čas příjezdu nebo přání k rozdělení pokojů"></textarea>
</div>
<div aria-hidden="true" class="hp-field">
<label for="f-web">Web</label>
<input autocomplete="off" id="f-web" name="web" tabindex="-1" type="text"/>
</div>
<input name="kontrola" type="hidden" value=""/>
<button class="btn btn--primary" type="submit">Nezávazná rezervace</button>
<p class="legal">Údaje použijeme jen k vyřízení rezervace. <a href="#">Zpracování osobních údajů</a></p>
</form>
</div>
</section></main>
```

### Časté otázky

Rozbalovací otázky na pískovém podkladu.

```html
<main><section class="sec sec--sand" id="otazky">
<div class="wrap">
<div class="head">
<h2>Časté otázky</h2>
<p>Nenašli jste odpověď? Zavolejte nám na +420 608 463 563, rádi poradíme.</p>
</div>
<div class="faq">
<div>
<details><summary>Jak si pobyt zarezervuji?</summary><p>Pošlete nám rezervaci s termínem a počtem osob přes <a href="#">formulář</a>, nebo zavolejte na +420 608 463 563 či +420 773 635 563. Ozveme se vám s potvrzením.</p></details>
<details><summary>Kolik zaplatím za noc?</summary><p>Dospělý a dítě nad 9 let 550 Kč, dítě od 3 do 9 let 450 Kč. Děti do 3 let bez nároku na lůžko jsou zdarma. Ceny jsou včetně DPH a orientační cenu celého pobytu vám spočítá formulář.</p></details>
<details><summary>Platí se něco navíc?</summary><p>Poplatek z pobytu 30 Kč za dospělého a noc. Při pobytu na 3 noci a méně platíte úklid 100 Kč za osobu a pobyt, od 4 nocí se úklid nepočítá.</p></details>
<details><summary>Kde zaparkuji?</summary><p>Na bezplatném parkovišti přímo u hostelu. Vejde se tam auto, kolo i motorka.</p></details>
<details><summary>Můžu si vařit?</summary><p>Ano. Nově zrekonstruované apartmány mají vlastní kuchyňský kout, hosté ostatních pokojů vaří ve společné kuchyni. Na každém pokoji je navíc lednice s mrazicím boxem.</p></details>
</div>
<div>
<details><summary>Nabízíte snídaně?</summary><p>Snídaně nenabízíme, ale můžete využít nabídku nedalekého Hotelu Pavlov nebo okolních restaurací.</p></details>
<details><summary>Je u vás Wi-Fi?</summary><p>Ano, Wi-Fi je zdarma pro všechny ubytované hosty.</p></details>
<details><summary>Ubytujete i větší skupinu?</summary><p>Ano. Máme 15 pokojů pro až 45 hostů. Ve formuláři vyplňte počet osob a ozveme se vám s volnými pokoji.</p></details>
<details><summary>Jak se k vám dostanu?</summary><p>Najdete nás na adrese Klentická č. ev. 177, 692 01 Pavlov. Bez auta se sem dostanete autobusem linky 570, který jezdí z Mikulova i z Břeclavi.</p></details>
<details><summary>Co se dá v okolí dělat?</summary><p>Pálava začíná hned nad obcí, Archeopark Pavlov a vinné sklepy jsou přímo v obci, kousek odsud je Mikulov a Novomlýnské nádrže. Kam se vyplatí vyrazit, jsme sepsali v <a href="#">našich tipech</a>.</p></details>
</div>
</div>
</div>
</section></main>
```

### Závěrečná výzva

Pás před patičkou s obrázkem a akcí. Třída: `endcta`.

```html
<main><section class="endcta">
<img alt="" class="endcta__bg" height="897" sizes="100vw" src="assets/foto/vinice-velka.webp" srcset="assets/foto/vinice.webp 800w, assets/foto/vinice-velka.webp 1600w" width="1600"/>
<div class="wrap">
<h2>Plánujete výlet na Pálavu?</h2>
<p>Pošlete rezervaci s termínem a počtem osob a ozveme se vám s potvrzením. Nebo rovnou zavolejte.</p>
<div class="endcta__btns">
<a class="btn btn--white" href="#">Rezervace</a>
<a class="btn btn--outline-white" href="#">+420 608 463 563</a>
</div>
</div>
</section></main>
```

## Komponenty: Obsah

### Text článku

Dlouhý text s perexem, obrázky a pokračováním. Třídy: `art`, `art__lead`, `art__img`, `reads`, `post`.

```html
<main><section class="sec sec--flush">
<div class="wrap">
<img alt="Rodina s dětmi prohlíží lebky ve vitríně Archeoparku Pavlov" class="art__img" fetchpriority="high" height="1000" src="assets/clanky/archeopark-pavlov-a-vestonicka-venuse-velka.webp" width="1600"/>
<div class="art">
<p class="art__lead">Pod Pálavou žili před desítkami tisíc let lovci mamutů a jejich stopy najdete přímo v Pavlově. Archeopark je výlet na pár hodin, který baví děti i dospělé a hodí se také do deště.</p>
<p>Když prší nebo je na túru po Pálavě moc horko, nemusíte jezdit daleko. Archeopark stojí přímo v Pavlově, na místě, kde archeologové našli sídliště pravěkých lovců mamutů. Shrnuli jsme, co se před návštěvou hodí vědět.</p>
<hr/>
<h2>Co je Archeopark Pavlov?</h2>
<p>Muzeum lovců mamutů z mladého paleolitu, tedy z doby asi před 30 000 lety. Provozuje ho Regionální muzeum v Mikulově a otevřené je od roku 2016, letos tedy slaví deset let. Budova je z velké části schovaná pod zemí a nad terén vystupují jen bílé betonové světlíky. Za architekturu dostala řadu ocenění, mimo jiné titul Stavba roku 2016.</p>
<p>Archeopark stojí přímo na nalezišti Pavlov I. Archeologické naleziště Dolní Věstonice - Pavlov je národní kulturní památkou.</p>
<hr/>
<h2>Co uvidíte uvnitř?</h2>
<p>Kamenné a kostěné nástroje, sošky venuší a plastiky zvířat. Nejvíc zaujme skládka mamutích kostí, která zůstala na původním místě, a replika hrobu tří mladých lidí z Dolních Věstonic. Expozice má zhruba 500 m² a doplňují ji multimediální projekce.</p>
<hr/>
<h2>Je tu Věstonická venuše?</h2>
<p>Ne originál. V Archeoparku uvidíte kopii, originál patří do sbírky Ústavu Anthropos Moravského zemského muzea v Brně a vystavuje se jen výjimečně. Naposledy byl k vidění v roce 2025 na výstavě ke stému výročí nálezu.</p>
<p>Soška z pálené hlíny měří jen 11 cm. Našli ji 13. 7. 1925 v Dolních Věstonicích při výzkumu, který vedl Karel Absolon. Podle Moravského zemského muzea je stará 27 až 29 tisíc let a jde o nejstarší umělecký předmět z keramiky na světě.</p>
<hr/>
<h2>Bude to bavit děti?</h2>
<p>Celá prohlídka je pod střechou a muzeum myslí i na děti. Nabízí komentované prohlídky pro mladší školáky, vzdělávací programy pro školy a během sezóny akce pro rodiny. Program najdete na <a href="#" rel="noopener" target="_blank">webu Archeoparku</a>.</p>
<hr/>
<h2>Kdy je otevřeno?</h2>
<p>Sezónně, zhruba od dubna do listopadu. V pondělí je zavřeno, na jaře a na podzim se otevírá jen od pátku do neděle. Aktuální časy a vstupné najdete na <a href="#" rel="noopener" target="_blank">stránce otevírací doby</a>. Archeopark má vlastní parkoviště, v sezóně ale nemusí být volné místo. Když bydlíte u nás, dojdete pěšky.</p>
<hr/>
<h2>Co spojit s návštěvou?</h2>
<ul>
<li><strong>Archeostezka Dolní Věstonice - Pavlov</strong> měří 4,1 km a má 5 zastavení. Dovede vás k místu, kde byla nalezena Věstonická venuše.</li>
<li><strong>Dům přírody Pálavy</strong> v Dolních Věstonicích je přírodovědná expozice o Pálavě. Děti si tu mohou půjčit badatelský batůžek.</li>
<li><strong>Zřícenina Děvičky</strong> je nad Pavlovem kousek pěšky. Víc v článku <a href="#">Pálava pěšky z Pavlova</a>.</li>
</ul>
</div>
<div class="art-cta">
<h2>Přijeďte s dětmi pod Pálavu</h2>
<p>Děti do 3 let u nás spí zdarma a <strong>děti od 3 do 9 let za 450 Kč za noc</strong>. Pošlete nám termín a počet osob, orientační cenu vám formulář spočítá hned.</p>
<a class="btn btn--primary" href="#">Rezervace</a>
</div>
<p class="art-topics">Další tipy na téma: <a href="#">Památky</a></p>
<div class="art-next"><span>Pokračovat</span><a href="#"><span>Mikulov na jeden den: zámek, Svatý kopeček a židovská čtvrť</span><svg aria-hidden="true" class="arr" height="22" viewbox="0 0 32 24" width="30"><path class="arr__line" d="M4 12h22"></path><path class="arr__head" d="M19 5l7 7-7 7"></path></svg></a></div><div class="reads"><h2>Stojí za přečtení</h2><div class="reads__grid"><article class="read"><img alt="" height="427" src="assets/clanky/vino-sklepy-a-hody-v-pavlove.webp" width="640"/><h3><a href="#">Víno, sklepy a hody v Pavlově: kdy přijet a co zažít</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/palava-pesky-z-pavlova.webp" width="640"/><h3><a href="#">Pálava pěšky z Pavlova: tři výlety podle toho, kolik máte času</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/mikulov-na-jeden-den.webp" width="640"/><h3><a href="#">Mikulov na jeden den: zámek, Svatý kopeček a židovská čtvrť</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/novomlynske-nadrze.webp" width="640"/><h3><a href="#">Novomlýnské nádrže: koupání, kolo, lodě a paddleboard</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/na-kole-z-pavlova.webp" width="640"/><h3><a href="#">Na kole z Pavlova: trasy do Lednice, Mikulova i kolem vody</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/pavlov-co-videt-v-obci.webp" width="640"/><h3><a href="#">Pavlov za jeden den: co vidět přímo v obci</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/kdyz-prsi-vylety-pod-strechou.webp" width="640"/><h3><a href="#">Když prší: výlety pod střechou z Pavlova</a></h3></article><article class="read"><img alt="" height="427" src="assets/clanky/kdy-prijet-na-palavu.webp" width="640"/><h3><a href="#">Kdy přijet na Pálavu: co nabízí jaro, léto, podzim i zima</a></h3></article></div></div>
</div>
</section></main>
```

## Komponenty: Navigace

### Patička

Patička s mapou, telefonem a právními odkazy. Třídy: `foot`, `foot__top`, `foot__bottom`.

```html
<footer class="foot">
<div class="foot__top">
<div class="foot__brand">
<a class="nav__logo" href="#"><img alt="Hostel Pavlov" class="logo-img" height="52" src="assets/logo.svg" width="140"/></a>
<p>Levné ubytování v Pavlově pod Pálavou, kousek od Mikulova a Novomlýnských nádrží.</p>
</div>
<div>
<ul>
<li><a href="#">Úvod</a></li>
<li><a href="#">Pokoje a ceník</a></li>
<li><a href="#">Fotogalerie</a></li>
<li><a href="#">Naše tipy</a></li>
<li><a href="#">Časté otázky</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div>
<ul>
<li>Hostel Pavlov</li>
<li>Klentická č. ev. 177</li>
<li>692 01 Pavlov</li>
<li><a class="foot__map" href="#" rel="noopener" target="_blank">Zobrazit na mapě</a></li>
</ul>
</div>
<div>
<a class="foot__tel" href="#">+420 608 463 563</a>
<ul>
<li><a href="#">+420 773 635 563</a></li>
<li><a href="#">info@hostelpavlov.cz</a></li>
</ul>
</div>
</div>
<div class="foot__bottom">
<span><span data-rok="">2026</span> © DPF Service s.r.o., IČO 04580273, <span class="foot__design">design <a href="#" rel="noopener" target="_blank">KACER STUDIO</a></span></span>
<span class="foot__legal"><a href="#">Zpracování osobních údajů</a><a href="#">Cookies</a></span>
</div>
</footer>
```

## Stránky

- Úvod: https://www.hostelpavlov.cz/
- Pokoje a ceník: https://www.hostelpavlov.cz/pokoje-a-cenik
- Fotogalerie: https://www.hostelpavlov.cz/fotogalerie
- Články: https://www.hostelpavlov.cz/clanky/
- Kontakt: https://www.hostelpavlov.cz/kontakt
