ZP Mikulov

Zemní a výkopové práce, podvrty, demolice a nové povrchy pro stavební firmy, stavitele a obce do 60 km od Mikulova.

www.zpmikulov.cz Stáhnout .MD pro AI

Barvy

Značka je žlutá --zluta #fdc331 a černá --ink #0e0e0e. Žlutá je plná plocha (sec--zluta, štítek stitek, čtverec v ikoně), nikdy text na bílé.
Podklad stránky je bílý, střídavé sekce mají --bez #efebe5. Dvě béžové sekce po sobě se střídají s bílou.
Tělo textu je --text #161616, doplňky a popisky --seda #5f5d58. Linky jsou --line #cfc8bd, 1 px.
Na černé ploše (bunka--cerna) je text bílý, popisky rgba(255,255,255,.6).

Písmo

Jediná rodina Inter, váhy 400 až 900. Tělo 18 px (17 px na telefonu), řádkování 1.55.
Nadpisy h1, h2, h3 mají váhu 500, řádkování 1.02 a těsné prokládání -.045em. Velikosti plynule přes clamp().
Popisky a štítky jsou mal: .78rem, váha 500, verzálky, prokládání .06em.
Úvodní věty používají text-velky nebo --lead.

Rozvržení

Obsah je v w s maximální šířkou --max 1720 px a bočním okrajem --side. Sekce sec mají svislý odstup clamp(70px,7vw,130px).
Hlavička sekce hlava je dvousloupec: nadpis se šipkou vlevo, perex vpravo. Pod ni jdou karty, služby nebo řádky.
Dělení obstarávají 1px linky --line, ne stíny. Sekce sec--ram je orámovaná linkou nahoře a dole.
Úvod mriz hero je dvousloupec text a fotka, ve fotce je seříznutý roh vysek.

Tvary

Žádný rádius, vše je hranaté. Výjimka je seříznutý pravý dolní roh vysek, karta a sl__tab přes clip-path.
Pole formuláře mají 1px rámeček #b9b2a7 a výšku 52 px, po zaostření rámeček --ink.
Stíny se nepoužívají.

Obrázky

Fotky stavebních strojů a prací, vždy foto s object-fit:cover, poměr 4:3 nebo 3:2.
Ikony jsou lineární, 2 px černá linka a žlutý čtverec 22 px v levém horním rohu.

Tlačítka

Hlavní tlačítko btn je černé, hranaté, výška 52 px, verzálky váhy 600. Při najetí se vyprázdní do obrysu.
Vedle tlačítka stojí telefon tel jako podtržený text, ne druhé tlačítko.
V žluté sekci s formulářem je tlačítko btn přes celou šířku.

Jazyk

Texty jsou česky, přímé a věcné, ceny v jednotkách (Kč/bm, Kč/m³, Kč/m²). Za jednopísmenné předložky patří nezlomitelná mezera.

Barvy

Značka

--zluta#fdc331Žlutá sekce, štítky, čtverec v ikoně, zaškrtnutí.

--ink#0e0e0eTlačítka, nadpisy, černé plochy, rámečky.

Plochy

--bez#efebe5Podklad sekcí sec--bez a karet.

bílá#ffffffPodklad stránky, hlavičky, patičky a karet.

--tan#d9cdbfPodklad fotky před načtením.

#e7e3dc#e7e3dcKraje na mapce v patičce.

Text

--seda#5f5d58Popisky, doplňkové texty, patička.

--text#161616Tělo textu.

Linky

--line#cfc8bdTenké 1px linky a dělení.

Formulář

#b9b2a7#b9b2a7Rámeček polí a zaškrtávátek.

#8d877d#8d877dZástupný text v polích.

Stavy

chyba#b3261eText chyby pole a rámeček neplatného pole.

#fdecec#fdececPozadí chyby formuláře.

#8a1c1c#8a1c1cText chyby formuláře.

překryvrgba(0,0,0,.55)Překryv za mobilním menu.

Typografie

Rozměry

Mezery a šířky

Název	Hodnota	Použití
`--side`	clamp(20px,2.8vw,48px)	Boční okraj stránky.
`--pad`	clamp(24px,3vw,56px)	Vnitřní odsazení buněk a menu.
`--max`	1720px	Maximální šířka obsahu.
`--navh`	84px	Výška hlavičky, 66 px do 900 px šířky.
`--v`	clamp(28px,3vw,52px)	Velikost seříznutého rohu.
`--lead`	clamp(1.15rem,1.25vw,1.45rem)	Velikost úvodního textu.

Rádiusy

Název	Hodnota	Ukázka	Použití
`žádný`	0		Tlačítka, pole i karty jsou hranaté.
`výsek`	clip-path 26px		Seříznutý pravý dolní roh karet a fotek, 8 px u štítku fotky.

Komponenty

Navigace

Hlavička

Pevná hlavička s logem, odkazy, telefonem a tlačítkem poptávky. Třídy: nav, nav__in, nav__links, nav__right, nav__tel.

HTML kód

<header class="nav">
<div class="nav__in">
<a aria-label="ZP Mikulov, úvodní stránka" class="nav__logo logo" href="#"><svg aria-hidden="true" class="logo__svg" viewbox="0 0 374 100"><mask id="zp-vysek"><rect fill="#fff" height="100" width="374"></rect><rect fill="#000" height="30" width="30" x="84.5" y="0"></rect></mask><path d="M0 100V86.4L38.9 32.9Q43 27.3 47.9 21.8Q52.8 16.2 57.9 10.7L59.5 18.4Q52.5 19.1 45.6 19.2Q38.6 19.3 31.7 19.3H0V0H78.7V13.6L40.6 66.1Q36.4 71.9 31.2 77.7Q26.1 83.5 20.9 89.3L19.3 81.6Q26.7 80.9 34 80.8Q41.4 80.7 48.7 80.7H78.7V100Z M89 100V0H130Q141.2 0 149.4 4.4Q157.6 8.7 162 16.5Q166.4 24.3 166.4 34.6Q166.4 44.9 161.9 52.6Q157.4 60.2 149.1 64.5Q140.8 68.8 129.3 68.8H103.9V50.1H125Q130.5 50.1 134.3 48.1Q138 46.2 140 42.7Q141.9 39.2 141.9 34.6Q141.9 29.8 140 26.4Q138 23 134.3 21.1Q130.5 19.2 124.9 19.2H112.7V100Z" fill="currentColor" mask="url(#zp-vysek)"></path><path d="M185.4 100V70H193.5L199.2 85.5Q199.5 86.4 199.9 87.7Q200.3 89.1 200.7 90.6Q201.1 92.2 201.4 93.7Q201.8 95.2 202 96.4H200.9Q201.2 95.2 201.5 93.8Q201.9 92.3 202.3 90.7Q202.7 89.1 203 87.7Q203.4 86.4 203.7 85.5L209.3 70H217.4V100H212.1V84.9Q212.1 83.9 212.1 82.5Q212.1 81.2 212.2 79.6Q212.2 78 212.2 76.4Q212.3 74.8 212.3 73.4H212.7Q212.3 74.9 211.8 76.6Q211.3 78.3 210.9 79.8Q210.4 81.4 210 82.7Q209.6 84 209.3 84.9L203.7 100H199.2L193.5 84.9Q193.2 84 192.8 82.7Q192.4 81.5 191.9 79.9Q191.5 78.4 191 76.7Q190.5 75 190.1 73.4H190.5Q190.5 74.7 190.6 76.3Q190.6 77.9 190.6 79.5Q190.7 81 190.7 82.5Q190.7 83.9 190.7 84.9V100Z M228.2 70V100H222.9V70Z M237.6 92.6V87.5Q238.5 85.9 239.5 84.6Q240.4 83.2 241.5 81.8Q242.5 80.5 243.8 79L251.7 70H258.4L245.7 84.3L245.3 84.2ZM233.7 100V70H239.1V78.9L239 86.1L239.1 88.8V100ZM252.3 100 242.7 85.9 246.1 81.8 258.6 100Z M274.2 100.4Q270.6 100.4 267.8 99.1Q265.1 97.7 263.6 95.2Q262.1 92.8 262.1 89.6V70H267.5V89.1Q267.5 91 268.3 92.5Q269.1 94 270.7 94.8Q272.2 95.6 274.2 95.6Q276.3 95.6 277.8 94.8Q279.4 94 280.2 92.5Q281 91 281 89.1V70H286.4V89.6Q286.4 92.8 284.9 95.2Q283.4 97.7 280.6 99.1Q277.9 100.4 274.2 100.4Z M291.8 100V70H297.2V95.5H310.5V100Z M327.4 100.4Q323.4 100.4 320.3 98.6Q317.2 96.7 315.4 93.3Q313.6 89.9 313.6 85Q313.6 80.2 315.4 76.7Q317.2 73.3 320.3 71.4Q323.4 69.6 327.4 69.6Q331.3 69.6 334.4 71.4Q337.5 73.3 339.3 76.7Q341.1 80.2 341.1 85Q341.1 89.9 339.3 93.3Q337.5 96.8 334.4 98.6Q331.3 100.4 327.4 100.4ZM327.4 95.6Q329.8 95.6 331.7 94.4Q333.6 93.2 334.7 90.8Q335.7 88.4 335.7 85Q335.7 81.6 334.7 79.2Q333.6 76.8 331.7 75.6Q329.8 74.4 327.4 74.4Q324.9 74.4 323 75.6Q321.2 76.9 320.1 79.2Q319 81.6 319 85Q319 88.4 320.1 90.8Q321.2 93.1 323 94.4Q324.9 95.6 327.4 95.6Z M354.3 100 343.6 70H349.5L354.8 85.6Q355.6 87.9 356.4 91Q357.3 94 358.3 97.9H357.2Q358.2 94 359 90.9Q359.9 87.9 360.6 85.6L365.7 70H371.6L361.1 100Z" fill="currentColor"></path></svg>
</a>
<nav aria-label="Hlavní menu" class="nav__links">
<div class="nav__dd">
<a aria-haspopup="true" class="nav__dd-a" href="#">Služby<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg></a>
<div class="mega">
<div class="mega__in">
<div class="bunka bunka--cerna"><p class="mal stit">Naše služby</p><p>Výkop, podvrt, demolice, odvoz suti i nový povrch od jedné firmy z Mikulova. Pro stavební firmy, stavitele sítí a obce do 60 km.</p></div>
<ul class="mega__list"><li><a href="#">Zemní a výkopové práce</a></li>
<li><a href="#">Řízené podvrty</a></li>
<li><a href="#">Dláždění chodníků a ploch</a></li>
<li><a href="#">Demolice</a></li>
<li><a href="#">Kontejnerová přeprava</a></li>
<li><a href="#">Terénní úpravy</a></li>
<li><a href="#">Zednické a betonářské práce</a></li>
<li><a href="#">Vyklízení budov a hal</a></li>
</ul>
<div class="bunka"><p class="mal stit">Hlavní služba</p><a class="mega__karta" href="#"><span class="mega__karta-obr vysek"><img alt="Bagr na stavbě s hlubokou jámou pro základy" class="foto" height="1333" sizes="300px" src="assets/foto/vykop-zaklady-1000.webp" srcset="assets/foto/vykop-zaklady-1000.webp 1000w, assets/foto/vykop-zaklady.webp 2000w" width="2000"/></span><span><span class="stitek mal">Zemní práce</span><b>Zemní a výkopové práce pro stavby na jižní Moravě</b></span></a></div>
</div>
</div>
</div>
<a aria-disabled="true" href="#">Realizace</a>
<a href="#">Pro koho</a>
<a href="#">Jak pracujeme</a>
<a href="#">Dotazy</a>
<a aria-disabled="true" href="#">O firmě</a>
<a href="#">Kontakt</a>
</nav>
<div class="nav__right">
<a class="tel nav__tel" href="#"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M13 2a9 9 0 0 1 9 9"></path><path d="M13 6a5 5 0 0 1 5 5"></path><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg><span>+420 792 226 981</span></a>
<a class="btn" href="#">Nezávazná poptávka</a>
<button aria-controls="mobMenu" aria-expanded="false" aria-label="Otevřít menu" class="burger mal" type="button"><span>Menu</span><span aria-hidden="true" class="burger__lines"><span></span><span></span><span></span></span></button>
</div>
</div>
</header>

Rozbalené menu služeb

Mega menu pod hlavičkou: černá buňka, seznam služeb a karta hlavní služby. Třídy: nav__dd, mega, mega__in, mega__list, mega__karta.

HTML kód

<header class="nav"><div class="nav__in"><nav class="nav__links"><div class="nav__dd"><div class="mega">
<div class="mega__in">
<div class="bunka bunka--cerna"><p class="mal stit">Naše služby</p><p>Výkop, podvrt, demolice, odvoz suti i nový povrch od jedné firmy z Mikulova. Pro stavební firmy, stavitele sítí a obce do 60 km.</p></div>
<ul class="mega__list"><li><a href="#">Zemní a výkopové práce</a></li>
<li><a href="#">Řízené podvrty</a></li>
<li><a href="#">Dláždění chodníků a ploch</a></li>
<li><a href="#">Demolice</a></li>
<li><a href="#">Kontejnerová přeprava</a></li>
<li><a href="#">Terénní úpravy</a></li>
<li><a href="#">Zednické a betonářské práce</a></li>
<li><a href="#">Vyklízení budov a hal</a></li>
</ul>
<div class="bunka"><p class="mal stit">Hlavní služba</p><a class="mega__karta" href="#"><span class="mega__karta-obr vysek"><img alt="Bagr na stavbě s hlubokou jámou pro základy" class="foto" height="1333" sizes="300px" src="assets/foto/vykop-zaklady-1000.webp" srcset="assets/foto/vykop-zaklady-1000.webp 1000w, assets/foto/vykop-zaklady.webp 2000w" width="2000"/></span><span><span class="stitek mal">Zemní práce</span><b>Zemní a výkopové práce pro stavby na jižní Moravě</b></span></a></div>
</div>
</div></div></nav></div></header>

Mobilní menu

Boční panel s odkazy a telefonem. Třídy: mob-menu, mob-menu__h, mob-menu__sub, mob-menu__x.

HTML kód

<nav aria-hidden="true" aria-label="Menu pro mobil" class="mob-menu" id="mobMenu">
<button aria-label="Zavřít menu" class="mob-menu__x" type="button"><span></span><span></span></button>
<p class="mob-menu__h">Služby</p>
<ul class="mob-menu__sub"><li><a href="#">Zemní a výkopové práce</a></li>
<li><a href="#">Řízené podvrty</a></li>
<li><a href="#">Dláždění chodníků a ploch</a></li>
<li><a href="#">Demolice</a></li>
<li><a href="#">Kontejnerová přeprava</a></li>
<li><a href="#">Terénní úpravy</a></li>
<li><a href="#">Zednické a betonářské práce</a></li>
<li><a href="#">Vyklízení budov a hal</a></li>
</ul>
<a aria-disabled="true" href="#">Realizace</a>
<a href="#">Pro koho</a>
<a href="#">Jak pracujeme</a>
<a href="#">Dotazy</a>
<a aria-disabled="true" href="#">O firmě</a>
<a href="#">Kontakt</a>
<a class="btn" href="#">+420 792 226 981</a>
</nav>

Patička

Čtyři sloupce: logo, služby, kontakt a mapka s oblastí práce, dole právní řádek. Třídy: foot, foot__mriz, foot__b, foot__h, mapka, foot__dole.

HTML kód

<footer class="foot">
<div class="foot__plna">
<div class="foot__mriz">
<div class="foot__b">
<a aria-label="ZP Mikulov, úvodní stránka" class="logo logo--bila" href="#"><svg aria-hidden="true" class="logo__svg" viewbox="0 0 374 100"><mask id="zp-vysek-2"><rect fill="#fff" height="100" width="374"></rect><rect fill="#000" height="30" width="30" x="84.5" y="0"></rect></mask><path d="M0 100V86.4L38.9 32.9Q43 27.3 47.9 21.8Q52.8 16.2 57.9 10.7L59.5 18.4Q52.5 19.1 45.6 19.2Q38.6 19.3 31.7 19.3H0V0H78.7V13.6L40.6 66.1Q36.4 71.9 31.2 77.7Q26.1 83.5 20.9 89.3L19.3 81.6Q26.7 80.9 34 80.8Q41.4 80.7 48.7 80.7H78.7V100Z M89 100V0H130Q141.2 0 149.4 4.4Q157.6 8.7 162 16.5Q166.4 24.3 166.4 34.6Q166.4 44.9 161.9 52.6Q157.4 60.2 149.1 64.5Q140.8 68.8 129.3 68.8H103.9V50.1H125Q130.5 50.1 134.3 48.1Q138 46.2 140 42.7Q141.9 39.2 141.9 34.6Q141.9 29.8 140 26.4Q138 23 134.3 21.1Q130.5 19.2 124.9 19.2H112.7V100Z" fill="currentColor" mask="url(#zp-vysek-2)"></path><path d="M185.4 100V70H193.5L199.2 85.5Q199.5 86.4 199.9 87.7Q200.3 89.1 200.7 90.6Q201.1 92.2 201.4 93.7Q201.8 95.2 202 96.4H200.9Q201.2 95.2 201.5 93.8Q201.9 92.3 202.3 90.7Q202.7 89.1 203 87.7Q203.4 86.4 203.7 85.5L209.3 70H217.4V100H212.1V84.9Q212.1 83.9 212.1 82.5Q212.1 81.2 212.2 79.6Q212.2 78 212.2 76.4Q212.3 74.8 212.3 73.4H212.7Q212.3 74.9 211.8 76.6Q211.3 78.3 210.9 79.8Q210.4 81.4 210 82.7Q209.6 84 209.3 84.9L203.7 100H199.2L193.5 84.9Q193.2 84 192.8 82.7Q192.4 81.5 191.9 79.9Q191.5 78.4 191 76.7Q190.5 75 190.1 73.4H190.5Q190.5 74.7 190.6 76.3Q190.6 77.9 190.6 79.5Q190.7 81 190.7 82.5Q190.7 83.9 190.7 84.9V100Z M228.2 70V100H222.9V70Z M237.6 92.6V87.5Q238.5 85.9 239.5 84.6Q240.4 83.2 241.5 81.8Q242.5 80.5 243.8 79L251.7 70H258.4L245.7 84.3L245.3 84.2ZM233.7 100V70H239.1V78.9L239 86.1L239.1 88.8V100ZM252.3 100 242.7 85.9 246.1 81.8 258.6 100Z M274.2 100.4Q270.6 100.4 267.8 99.1Q265.1 97.7 263.6 95.2Q262.1 92.8 262.1 89.6V70H267.5V89.1Q267.5 91 268.3 92.5Q269.1 94 270.7 94.8Q272.2 95.6 274.2 95.6Q276.3 95.6 277.8 94.8Q279.4 94 280.2 92.5Q281 91 281 89.1V70H286.4V89.6Q286.4 92.8 284.9 95.2Q283.4 97.7 280.6 99.1Q277.9 100.4 274.2 100.4Z M291.8 100V70H297.2V95.5H310.5V100Z M327.4 100.4Q323.4 100.4 320.3 98.6Q317.2 96.7 315.4 93.3Q313.6 89.9 313.6 85Q313.6 80.2 315.4 76.7Q317.2 73.3 320.3 71.4Q323.4 69.6 327.4 69.6Q331.3 69.6 334.4 71.4Q337.5 73.3 339.3 76.7Q341.1 80.2 341.1 85Q341.1 89.9 339.3 93.3Q337.5 96.8 334.4 98.6Q331.3 100.4 327.4 100.4ZM327.4 95.6Q329.8 95.6 331.7 94.4Q333.6 93.2 334.7 90.8Q335.7 88.4 335.7 85Q335.7 81.6 334.7 79.2Q333.6 76.8 331.7 75.6Q329.8 74.4 327.4 74.4Q324.9 74.4 323 75.6Q321.2 76.9 320.1 79.2Q319 81.6 319 85Q319 88.4 320.1 90.8Q321.2 93.1 323 94.4Q324.9 95.6 327.4 95.6Z M354.3 100 343.6 70H349.5L354.8 85.6Q355.6 87.9 356.4 91Q357.3 94 358.3 97.9H357.2Q358.2 94 359 90.9Q359.9 87.9 360.6 85.6L365.7 70H371.6L361.1 100Z" fill="currentColor"></path></svg>
</a>
<p>Zemní práce, podvrty, demolice a dláždění pro stavební firmy, stavitele sítí a obce v okruhu 60 km od Mikulova.</p>
</div>
<div class="foot__b"><p class="mal foot__h">Služby</p><ul><li><a href="#">Zemní a výkopové práce</a></li>
<li><a href="#">Řízené podvrty</a></li>
<li><a href="#">Dláždění chodníků a ploch</a></li>
<li><a href="#">Demolice</a></li>
<li><a href="#">Kontejnerová přeprava</a></li>
<li><a href="#">Terénní úpravy</a></li>
<li><a href="#">Zednické a betonářské práce</a></li>
<li><a href="#">Vyklízení budov a hal</a></li>
</ul></div>
<div class="foot__b"><p class="mal foot__h">Kontakt</p><ul><li><a class="foot__tel foot__podtr" href="#">+420 792 226 981</a></li><li><a class="foot__podtr" href="#">info@zpmikulov.cz</a></li><li class="foot__adr">Purkyňova 266/12<br/>692 01 Mikulov</li></ul></div>
<div class="foot__b"><p class="mal foot__h">Kde pracujeme</p><svg aria-label="Mapa Česka se zvýrazněným Jihomoravským krajem" class="mapka" role="img" viewbox="0 0 600 346"><path class="mapka__kraj" d="M302,151 299,148 300,147 300,146 299,147 299,145 296,145 296,144 293,144 290,141 294,140 291,139 294,138 294,135 296,135 293,134 295,132 297,133 298,130 295,128 294,128 292,127 289,127 291,125 290,124 292,123 293,120 293,117 291,116 291,113 292,112 292,108 289,106 285,108 282,107 279,108 276,106 278,103 275,102 274,102 275,100 270,100 269,98 270,97 268,96 269,94 271,94 270,92 272,91 273,89 271,86 270,85 271,82 270,81 270,80 268,78 271,76 267,74 267,71 264,69 262,70 259,65 256,64 255,66 252,63 250,63 251,64 249,65 250,67 245,69 246,71 243,74 236,71 237,76 234,76 234,79 231,80 231,81 226,80 224,82 222,82 222,77 219,78 219,79 216,77 215,80 212,77 212,79 211,79 212,86 208,85 207,90 204,87 202,88 204,91 203,91 204,93 203,99 195,98 193,102 187,100 187,101 183,102 172,100 169,101 170,105 167,105 167,107 166,109 160,110 159,114 157,114 154,111 150,115 150,114 149,116 142,116 142,114 139,118 137,118 138,119 136,120 130,121 128,124 126,124 126,127 125,127 126,129 124,129 124,132 121,132 119,133 121,138 120,138 118,142 121,143 122,141 124,141 126,142 129,141 130,143 128,142 127,144 132,145 133,147 141,146 143,150 144,150 144,152 149,151 148,155 152,154 154,156 156,156 155,159 156,164 154,164 153,170 154,172 152,174 153,176 152,179 154,179 157,188 155,189 154,188 150,193 151,196 148,198 149,199 148,208 149,207 150,208 151,213 154,212 155,211 157,213 159,211 160,211 160,213 162,212 161,213 165,214 166,212 169,213 170,211 171,211 172,208 173,208 174,206 178,207 176,209 177,210 180,211 180,209 182,211 182,209 189,210 191,206 194,205 196,206 197,208 198,208 200,209 199,211 201,210 202,211 205,209 207,209 206,207 208,209 210,208 212,210 213,208 220,210 222,208 221,212 226,212 228,214 228,212 232,208 235,208 234,205 235,203 234,202 236,202 236,200 238,200 238,198 239,200 242,200 245,204 246,202 248,203 248,205 250,209 254,207 253,204 258,203 256,201 257,200 263,202 269,199 268,200 271,201 273,202 273,199 274,200 275,198 276,199 278,199 280,197 279,192 277,192 274,190 274,186 277,184 278,180 281,179 280,180 282,180 285,178 288,177 289,178 291,177 292,174 296,175 297,173 295,170 298,168 299,168 300,167 302,167 303,164 302,160 304,160 305,156 304,154 305,152Z"></path><path class="mapka__kraj" d="M260,242 258,245 256,245 250,237 252,234 249,231 251,225 250,224 252,220 251,218 253,217 250,212 254,211 252,208 250,208 248,205 248,203 246,202 245,204 242,200 239,200 238,198 238,200 236,200 236,202 234,202 235,203 234,205 235,208 232,208 228,212 228,214 226,212 221,212 222,208 220,210 213,208 212,210 210,208 208,209 206,207 207,209 205,209 202,211 201,210 199,211 200,209 198,208 197,208 196,206 194,205 191,206 189,210 182,209 182,211 180,209 180,211 177,210 176,209 178,207 174,206 173,208 172,208 171,211 170,211 169,213 166,212 165,214 161,213 162,212 160,213 159,211 156,213 155,211 154,212 152,212 152,213 150,212 149,214 149,216 151,217 150,217 150,221 152,223 150,225 150,228 151,231 152,232 151,236 151,238 146,240 147,244 144,244 145,247 148,247 146,248 147,249 145,249 145,250 144,251 146,256 144,257 144,261 141,260 138,264 135,262 136,263 135,265 136,268 134,268 136,274 135,276 133,275 132,277 130,284 132,287 134,287 137,291 138,289 138,291 142,298 146,299 148,298 150,305 153,305 155,310 154,312 154,313 160,314 167,321 171,322 174,326 176,326 176,329 173,329 172,331 173,333 175,333 174,335 177,336 177,337 179,337 179,338 181,338 182,337 188,338 192,340 195,339 199,341 200,343 202,340 205,340 205,338 209,338 211,333 210,331 212,330 215,334 219,335 220,336 224,333 226,336 228,336 229,339 232,339 234,336 233,330 234,325 242,318 242,312 248,312 249,314 254,315 257,313 254,310 256,304 257,304 256,299 257,299 258,295 256,286 258,283 258,280 264,280 264,282 272,283 272,285 273,287 272,290 275,290 278,288 281,289 283,283 285,285 290,285 296,289 298,290 299,289 302,291 303,294 306,295 306,293 308,292 307,292 308,290 309,291 310,290 309,288 309,287 304,286 305,283 303,282 302,284 301,283 305,279 304,277 306,276 307,272 308,273 311,272 310,271 311,270 309,269 310,268 309,268 306,267 308,266 308,265 307,265 305,264 305,265 304,264 302,266 299,266 297,264 296,266 288,260 289,256 288,253 282,253 281,254 281,253 275,250 273,253 271,252 269,249 267,250 265,248 267,248 268,246 264,245Z"></path><path class="mapka__kraj" d="M46,160 44,159 40,166 39,166 39,169 37,169 36,172 37,176 31,180 34,187 39,189 41,189 42,198 45,198 47,209 50,211 51,210 52,211 51,218 53,220 53,223 58,225 62,229 62,231 64,235 70,235 73,237 73,235 78,236 84,241 86,241 86,246 88,246 88,248 90,249 91,251 93,253 93,255 98,259 98,263 99,264 104,267 108,266 113,270 118,275 118,284 128,290 128,286 132,287 130,284 132,277 133,275 134,276 136,275 136,270 134,268 136,268 135,265 136,263 135,262 138,264 141,260 144,260 143,260 144,257 146,256 144,251 145,250 145,249 147,249 146,248 148,247 145,247 144,244 147,244 146,240 151,238 151,236 152,233 150,228 150,225 152,223 150,221 150,217 151,217 149,216 151,210 149,207 148,208 149,199 148,198 151,196 150,193 152,190 157,188 154,179 152,179 153,176 152,174 154,172 153,170 154,164 156,164 155,159 156,156 154,156 152,154 148,155 149,151 144,152 144,150 143,150 141,146 133,147 132,145 127,144 128,142 130,143 129,141 126,142 124,141 122,141 121,143 118,142 120,138 121,138 121,136 119,134 116,136 114,132 112,135 112,132 108,133 109,134 108,136 109,137 109,138 107,138 108,140 103,140 104,143 104,147 101,147 100,144 99,145 97,143 94,144 92,142 89,145 88,145 85,148 83,148 83,150 80,150 80,154 77,157 74,156 70,157 69,156 65,155 64,156 63,155 60,157 57,157 58,158 55,159 55,161 54,161 54,159 52,158 49,159 48,161Z"></path><path class="mapka__kraj" d="M46,160 48,161 49,159 52,158 54,159 54,161 55,161 55,159 58,158 57,157 60,157 63,155 64,156 65,155 69,156 70,157 74,156 77,157 80,154 80,150 83,150 83,148 85,148 88,145 89,145 92,142 94,144 97,143 99,145 100,144 101,147 104,147 104,143 103,140 105,140 108,140 107,138 109,138 109,136 108,136 109,134 108,133 110,133 107,129 105,130 103,128 105,127 108,128 106,125 108,125 108,124 107,124 107,121 105,120 105,118 102,117 105,117 106,116 103,114 104,113 104,110 102,110 103,108 101,109 104,106 102,104 104,101 102,98 99,99 95,98 93,100 91,98 93,96 92,95 89,94 87,94 85,93 81,94 67,84 67,88 65,86 60,88 58,93 55,90 40,93 38,96 38,99 37,98 33,103 30,103 31,107 28,108 26,111 27,114 26,114 25,114 25,123 21,123 20,120 21,117 17,113 17,112 19,113 18,110 13,110 13,105 12,103 7,104 5,103 8,109 4,112 7,115 9,115 10,118 11,118 12,120 13,120 12,120 14,124 13,127 13,132 16,134 17,133 20,136 18,139 23,139 24,142 25,141 28,144 33,146 33,149 36,147 38,149 39,150 37,154 38,155 43,157 44,159Z"></path><path class="mapka__kraj" d="M203,60 203,57 201,57 201,56 204,53 203,52 204,49 206,48 207,46 207,47 209,47 207,46 208,42 211,41 210,40 211,37 210,36 213,36 213,37 214,36 217,39 220,38 220,33 224,32 227,25 228,24 228,21 227,20 222,23 220,22 223,13 220,10 218,10 217,9 214,8 215,5 214,8 211,6 207,8 204,7 204,6 202,5 200,6 197,3 196,6 195,6 196,7 195,9 194,10 194,12 196,14 199,13 200,14 197,16 199,16 198,17 206,20 205,24 201,24 201,25 198,27 194,25 191,26 190,30 179,34 178,36 173,37 170,35 167,37 166,39 162,39 161,42 162,45 160,46 159,46 158,48 150,47 148,48 147,47 145,49 141,47 136,50 132,50 129,51 131,55 128,58 129,60 127,61 124,65 120,63 118,59 116,58 116,61 112,64 112,68 109,68 108,66 105,66 100,78 95,78 95,76 91,79 86,77 85,86 82,90 78,91 81,94 85,93 87,94 89,94 92,95 93,96 91,98 93,100 95,98 99,99 102,98 103,99 104,101 102,104 104,106 101,109 103,108 102,110 104,110 104,113 103,114 106,116 105,117 102,117 105,118 105,120 107,121 107,124 108,124 108,125 106,125 108,128 105,127 103,128 105,130 107,129 109,133 112,132 112,135 114,132 116,136 118,136 120,132 124,132 124,129 126,129 125,127 126,127 126,124 128,124 130,121 136,120 138,119 137,118 139,118 142,114 142,116 149,116 150,114 150,115 154,111 157,114 159,114 160,110 166,109 167,107 167,105 170,105 169,101 172,100 183,102 187,101 187,100 193,102 195,98 203,99 204,93 203,91 204,91 202,88 204,87 207,90 208,85 212,86 211,79 212,79 212,77 214,78 212,75 209,75Z"></path><path class="mapka__kraj" d="M203,60 209,75 212,75 215,80 216,77 219,79 219,78 222,77 222,81 224,82 226,80 231,81 231,80 234,79 234,76 237,76 236,71 243,74 246,71 245,69 250,67 249,65 251,64 251,63 252,63 252,64 254,64 255,65 254,65 256,66 256,64 259,65 262,70 264,69 267,71 267,74 278,80 280,79 279,78 282,75 286,77 287,77 291,79 292,78 293,81 296,81 296,80 297,80 298,78 297,76 300,74 300,72 302,73 303,76 305,77 308,75 309,76 310,77 314,76 310,71 311,71 310,70 310,69 308,68 311,63 308,60 310,58 308,54 308,46 306,44 305,41 297,37 293,41 291,41 291,33 289,31 286,30 283,26 282,20 284,17 282,16 282,14 280,14 279,11 274,13 273,8 271,9 270,12 271,12 270,12 268,12 267,10 268,9 264,8 263,9 260,8 257,9 256,12 257,14 259,13 260,15 259,16 260,19 258,22 259,23 258,26 259,29 255,30 250,28 249,29 247,28 246,29 244,28 240,35 236,34 234,35 233,32 231,33 225,30 224,32 220,33 220,38 218,39 214,36 213,37 213,36 210,36 211,37 210,40 211,41 208,42 207,46 209,47 207,47 207,46 206,48 204,49 203,52 204,53 201,56 201,57 203,57Z"></path><path class="mapka__kraj" d="M326,123 329,124 329,128 332,129 333,126 336,127 336,124 339,124 339,123 341,125 345,125 345,127 347,127 347,131 352,131 353,135 356,135 358,138 361,138 363,141 366,141 367,139 368,141 371,140 375,141 373,138 377,136 376,134 379,133 380,130 382,131 384,129 387,128 389,124 396,128 397,127 397,126 395,123 395,117 389,111 384,102 381,103 380,102 378,99 378,95 373,95 370,97 369,93 368,93 368,92 367,90 365,91 363,88 365,85 366,86 365,84 368,83 369,81 372,82 373,78 376,79 378,78 381,75 380,73 382,72 381,69 384,69 385,67 376,57 371,57 370,56 367,55 365,61 362,61 361,59 355,57 352,60 351,64 350,63 348,65 345,63 348,61 346,59 345,54 343,53 336,56 334,55 330,44 327,46 320,46 318,44 311,41 306,41 306,44 309,47 307,50 308,54 310,58 308,60 311,63 308,68 310,69 310,70 311,71 310,71 314,76 310,77 309,76 308,75 305,77 303,76 302,73 300,72 300,74 297,76 298,78 297,80 296,80 296,81 293,81 292,78 291,79 287,77 286,77 282,75 279,78 280,79 278,80 271,76 268,78 270,80 270,81 271,82 270,85 271,86 273,89 272,91 270,92 271,94 269,94 268,96 270,97 269,98 270,100 275,100 274,102 275,102 278,103 276,106 279,108 282,107 285,108 289,106 292,108 292,112 291,113 291,116 293,117 293,120 292,123 290,124 291,125 289,127 292,127 294,128 295,128 297,129 296,131 298,134 301,131 304,131 304,128 306,127 307,128 308,127 308,126 310,128 311,128 311,128 315,128 315,128 319,130 320,128 322,128 323,125Z"></path><path class="mapka__kraj" d="M326,123 323,125 322,128 320,128 319,130 315,128 315,128 311,128 311,128 310,128 308,126 307,128 306,127 304,128 304,131 301,131 302,132 300,133 298,134 296,132 297,133 295,132 293,134 296,135 294,135 294,138 291,139 294,140 290,141 293,144 296,144 296,145 299,145 299,147 300,146 300,147 299,148 305,152 304,154 305,156 304,160 302,160 302,166 309,170 310,172 314,172 315,173 316,173 316,171 319,174 320,173 323,176 327,176 326,180 329,179 333,182 334,181 333,185 339,189 342,188 342,187 343,187 344,185 347,182 347,185 353,186 355,190 358,188 359,190 363,190 364,192 367,193 371,198 376,199 382,205 382,202 384,201 386,201 385,203 389,201 393,202 395,197 399,198 400,196 403,198 404,197 407,197 414,201 416,201 417,197 418,198 416,196 416,193 420,190 420,185 419,183 415,183 417,181 415,179 416,177 413,175 413,171 410,170 411,165 413,164 412,161 412,157 408,147 412,147 413,144 417,142 418,140 416,137 418,135 416,132 418,131 420,124 422,122 422,119 420,118 418,121 417,121 415,127 411,128 408,134 402,132 398,128 396,128 390,124 388,124 387,128 384,129 382,131 380,130 379,133 376,134 377,136 373,138 375,141 371,140 368,141 367,139 366,141 363,141 361,138 358,138 356,135 353,135 352,131 347,131 347,127 345,127 345,125 341,125 339,123 339,124 336,124 336,127 333,126 332,129 329,128 329,124Z"></path><path class="mapka__kraj" d="M345,278 348,278 349,276 354,278 354,277 356,277 359,276 357,274 358,273 364,273 366,271 365,269 368,268 364,264 366,264 368,262 366,260 366,259 370,257 370,255 367,254 367,252 368,248 371,247 368,244 372,240 371,239 370,239 367,238 370,237 365,235 367,231 366,229 369,227 369,224 375,224 374,221 372,222 374,219 377,218 377,221 379,221 379,219 380,218 378,216 377,214 380,215 383,211 382,209 380,209 379,208 380,206 380,204 376,199 371,198 367,193 364,192 363,190 359,190 358,188 355,190 353,186 347,185 347,182 344,185 343,187 342,187 342,188 339,189 333,185 334,181 333,182 329,179 326,180 327,176 323,176 320,173 319,174 316,171 316,173 315,173 314,172 310,172 309,170 302,165 299,168 298,168 295,170 297,173 296,175 292,174 291,177 289,178 288,177 285,178 282,180 280,180 281,179 278,180 277,184 274,186 274,188 275,192 279,192 280,195 279,199 276,199 274,198 273,202 271,201 268,200 269,199 263,202 258,200 256,201 258,203 253,204 254,207 252,207 252,208 254,211 250,211 250,212 252,214 253,217 251,218 252,220 250,224 251,225 249,231 253,234 250,237 256,245 258,245 261,242 264,245 268,246 267,248 265,248 267,250 269,249 271,252 273,253 275,250 281,253 281,254 282,253 288,253 289,256 288,260 296,266 297,264 299,266 302,266 304,264 305,265 305,264 307,265 308,265 308,266 306,267 309,268 310,268 309,269 311,270 310,271 311,272 308,273 307,272 306,276 304,277 305,279 301,283 302,284 303,282 305,283 304,286 309,287 309,288 310,289 312,288 313,290 315,291 316,287 320,287 322,290 325,285 328,284 330,281 335,281 336,277 339,278 340,277 340,275 341,276 343,274 343,277Z"></path><path class="mapka__jmk" d="M345,278 343,277 343,274 341,276 340,275 340,277 339,278 336,277 335,281 330,281 328,284 325,285 322,290 320,287 316,287 315,291 313,290 312,288 310,288 306,295 309,296 312,296 319,302 320,301 324,302 327,299 332,299 333,300 332,301 334,302 335,301 336,304 337,303 338,304 337,304 337,305 339,304 340,307 341,306 342,306 342,309 346,312 355,317 370,317 375,319 376,317 378,319 379,319 384,314 386,308 391,310 393,308 398,312 404,312 406,319 410,318 411,319 412,321 416,322 419,321 422,321 423,320 425,320 426,324 426,326 427,327 426,334 428,334 430,333 431,327 433,324 433,322 437,314 441,311 443,305 447,303 451,299 462,303 465,308 468,308 473,303 478,307 479,305 480,308 482,307 482,305 485,306 486,304 490,302 490,299 488,299 486,294 481,293 482,289 478,289 477,287 472,289 468,285 464,285 465,282 463,280 458,280 457,278 456,278 456,277 454,277 453,278 454,274 452,270 446,272 443,272 444,268 446,268 447,264 450,264 451,258 451,257 449,259 446,258 448,256 446,253 446,251 445,249 448,245 446,242 446,238 437,234 438,233 436,232 436,228 435,227 435,226 432,224 432,220 430,219 429,215 428,216 425,215 421,217 425,220 424,222 426,224 421,230 416,226 416,224 419,223 418,221 416,220 415,213 416,213 417,210 419,210 411,208 412,206 411,203 415,204 416,204 415,202 416,201 414,201 407,197 404,197 403,198 400,196 399,198 395,197 393,202 389,201 385,203 386,201 384,201 382,202 382,205 380,204 380,206 379,208 380,209 382,209 383,211 380,215 377,214 378,216 380,218 379,219 379,221 377,221 377,218 374,219 372,222 374,221 375,224 369,224 369,227 366,229 367,231 365,235 370,237 367,238 370,239 371,239 372,240 368,244 371,247 368,248 367,252 367,254 370,255 370,257 366,259 366,260 368,262 366,264 364,264 368,268 365,269 366,271 364,273 358,273 357,274 359,276 356,277 354,277 354,278 349,276 348,278Z"></path><path class="mapka__kraj" d="M453,168 453,166 450,168 446,163 449,159 448,158 448,157 451,153 447,149 449,148 448,145 454,138 453,133 455,130 454,127 458,123 460,123 461,121 464,121 467,116 468,118 470,118 471,111 470,109 467,108 466,108 465,111 464,111 463,108 465,105 463,104 464,102 459,104 455,102 451,97 451,94 446,95 443,93 443,92 438,91 433,88 431,90 425,86 423,86 421,91 426,94 429,104 434,106 435,109 434,112 436,115 433,117 432,113 430,116 425,116 423,119 422,120 422,122 420,124 418,131 416,132 418,135 416,137 418,140 417,142 413,144 412,147 408,147 412,157 412,161 413,164 411,165 410,170 413,171 413,175 416,177 415,179 417,181 415,183 419,183 420,185 420,190 416,193 416,196 418,198 417,197 416,201 415,202 416,204 415,205 411,203 411,204 412,206 411,209 419,210 417,210 416,213 415,213 416,220 418,221 419,223 416,224 416,226 421,230 426,224 424,222 425,220 421,217 425,215 428,216 429,215 430,219 432,220 432,224 435,226 435,227 436,228 436,232 438,233 437,234 438,234 446,238 447,245 449,246 451,242 452,243 456,241 458,242 461,239 461,237 465,236 463,230 465,227 467,227 466,231 468,230 471,231 473,231 475,234 479,230 478,228 480,228 484,227 485,228 489,228 490,226 488,221 490,221 492,223 493,220 494,219 497,223 501,223 502,220 504,218 502,216 507,214 507,211 512,213 514,209 513,205 511,205 509,208 507,206 510,204 507,200 502,196 501,194 498,190 497,192 494,190 493,187 495,183 494,183 493,180 491,179 488,180 487,181 485,180 481,177 480,178 480,175 477,174 478,171 477,172 476,170 476,168 475,166 475,164 472,165 474,169 473,169 472,170 471,169 471,170 470,170 470,172 468,172 468,175 465,172 467,167 465,165 457,169 457,171 455,170 452,171Z"></path><path class="mapka__kraj" d="M453,168 452,171 455,170 457,171 457,169 465,165 467,167 465,172 468,175 468,172 470,172 470,170 471,170 471,169 472,170 473,169 474,169 472,165 475,164 475,166 476,168 476,170 477,172 478,171 477,174 480,175 480,178 481,177 485,180 487,181 488,180 491,179 493,180 494,183 495,183 493,187 494,190 497,192 498,190 501,194 502,196 507,200 510,204 507,206 509,208 511,205 513,205 513,209 519,209 521,214 532,212 533,213 536,212 539,216 543,217 545,215 548,216 549,221 552,222 553,224 553,227 556,228 561,229 563,227 564,224 569,219 568,216 571,214 574,213 574,215 575,215 580,213 587,216 592,212 596,212 594,211 596,208 594,206 595,202 593,201 592,190 590,189 586,190 584,190 583,187 580,187 576,184 576,181 571,170 573,168 572,167 574,165 571,164 571,157 568,157 569,159 567,160 564,160 562,157 559,156 559,155 554,155 550,153 552,156 550,156 549,158 546,155 545,151 540,150 539,147 536,146 535,149 533,147 531,147 530,145 530,144 529,142 529,141 524,138 522,139 522,141 522,142 525,142 525,146 522,145 522,144 520,146 517,146 514,150 510,150 506,147 507,146 506,145 502,144 501,140 498,133 495,131 493,131 493,133 490,132 490,129 487,128 486,125 486,123 495,122 496,119 500,118 501,114 497,112 499,106 494,102 494,106 488,110 485,109 483,110 474,110 473,112 471,112 470,118 468,118 467,116 464,121 461,121 460,123 458,123 454,127 455,130 453,133 454,138 448,145 449,148 447,149 451,153 448,157 448,158 449,159 446,163 450,168 453,166Z"></path><path class="mapka__kraj" d="M449,271 452,270 454,274 453,278 456,277 456,278 457,278 458,280 463,280 465,282 465,285 468,285 472,289 477,287 478,289 482,289 481,293 486,294 488,299 490,299 490,302 495,301 502,294 502,292 511,292 514,280 520,278 523,279 528,277 531,270 531,267 532,266 530,264 533,260 533,257 535,253 534,249 537,246 538,243 547,241 554,237 558,232 557,229 553,227 553,224 552,222 549,221 548,216 545,215 543,217 539,216 536,212 533,213 532,212 521,214 520,211 517,209 514,209 512,213 511,213 507,211 507,214 502,216 504,218 502,220 501,223 497,223 494,219 493,220 492,223 490,221 488,221 490,226 489,228 485,228 484,227 480,228 478,228 479,230 475,234 473,231 471,231 468,230 466,231 467,227 466,226 463,230 465,236 461,237 461,239 458,242 456,241 452,243 451,242 449,246 448,245 445,248 446,251 446,253 448,256 446,258 449,259 451,257 451,258 450,264 447,264 446,268 444,268 443,272 446,272Z"></path></svg><p class="foot__oblast">Jižní Morava do 60 km od Mikulova: Břeclavsko, Znojemsko, Hodonínsko, Brno-venkov a Brno.</p></div>
</div>
<div class="foot__dole">
<p>ZP Mikulov je značka společnosti DPF Service s.r.o., IČO 04580273, DIČ CZ04580273, Purkyňova 266/12, 692 01 Mikulov, zapsané u Krajského soudu v Brně, oddíl C, vložka 90704.</p>
<p><span data-rok="">2026</span> © ZP Mikulov · <span class="foot__credit">design <a href="#" rel="noopener" target="_blank">KACER STUDIO</a></span></p>
</div>
</div>
</footer>

Úvod

Úvod s fotkou

Úvod stránky: textová buňka vlevo, fotka se seříznutým rohem vpravo. Třídy: mriz hero, hero__tx, bunka--foto, hero__foto, vysek, text-velky.

HTML kód

<main><section class="mriz hero">
<div class="bunka hero__tx">
<p class="mal stit">Zemní práce a dláždění · Mikulov</p>
<h1>Zemní a výkopové práce od jedné firmy z Mikulova</h1>
<p class="text-velky">Výkopy základů, přípojek a kabelových rýh, podvrty pod silnicí, demolice i odvoz kontejnery. Po výkopu položíme dlažbu chodníku, vjezdu nebo plochy.</p>
<div class="btns"><a class="btn" href="#">Nezávazná poptávka</a><a class="tel" href="#">+420 792 226 981</a></div>
</div>
<div class="bunka bunka--foto hero__foto vysek" data-kosticky=""><img alt="Žlutý pásový bagr nakládá zeminu na sklápěcí vůz" class="foto is-on" fetchpriority="high" height="1600" sizes="(max-width:900px) 100vw, 40vw" src="assets/foto/hero-bagr-1200.webp" srcset="assets/foto/hero-bagr-1200.webp 1200w, assets/foto/hero-bagr.webp 2400w" width="2400"/><img alt="Žlutý bagr na hromadě štěrku a zeminy" class="foto" height="1800" sizes="(max-width:900px) 100vw, 50vw" src="assets/foto/hero-den-2-1200.webp" srcset="assets/foto/hero-den-2-1200.webp 1200w, assets/foto/hero-den-2.webp 2400w" width="2400"/><img alt="Bagr s demoličním drapákem bourá starý dům" class="foto" height="1333" sizes="(max-width:900px) 100vw, 50vw" src="assets/foto/demolice-1000.webp" srcset="assets/foto/demolice-1000.webp 1000w, assets/foto/demolice.webp 2000w" width="2000"/><div aria-hidden="true" class="kosticky"></div><a class="hero__karta" href="#"><span class="mal">Na jedné trase</span><b>Výkop, podvrt i nový povrch od jedné firmy</b><span class="mal">Naše služby</span></a></div>
</section></main>

Úvod podstránky

Stejné úvod s drobečkovou navigací místo štítku. Třídy: hero, crumbs, crumbs__sep.

HTML kód

<main><section class="mriz hero">
<div class="bunka hero__tx">
<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">Zemní a výkopové práce</span></nav>
<h1>Zemní a výkopové práce pro stavby na jižní Moravě</h1>
<p class="text-velky">Vykopeme základy, přípojky, jámy i kabelové rýhy. Zeminu odvezeme kontejnery, a když je po výkopu potřeba dlažba, položíme ji také.</p>
<div class="btns"><a class="btn" href="#">Nezávazná poptávka</a><a class="tel" href="#">+420 792 226 981</a></div>
</div>
<div class="bunka bunka--foto hero__foto vysek"><img alt="Rameno a lžíce menšího bagru u výkopu pro základy" class="foto is-on" fetchpriority="high" height="1333" sizes="(max-width:900px) 100vw, 40vw" src="assets/foto/hero-midibagr-1000.webp" srcset="assets/foto/hero-midibagr-1000.webp 1000w, assets/foto/hero-midibagr.webp 2000w" width="2000"/></div>
</section></main>

Prvky

Tlačítka a štítky

Černé hranaté tlačítko, telefon jako odkaz a žlutý štítek. Třídy: btns, btn, tel, stitek mal, odkaz.

HTML kód

<div style="padding:32px"><div class="btns"><a class="btn" href="#">Nezávazná poptávka</a><a class="tel" href="#">+420 792 226 981</a><a class="odkaz" href="#">Textový odkaz</a></div><p style="margin-top:24px"><span class="stitek mal">Hlavní služba</span></p></div>

Štítky služeb

Řada obrysových štítků s odkazy, aktuální je šedý. Třída: stitky.

HTML kód

<main><section class="sec"><div class="w"><ul class="stitky"><li><span aria-current="page">Zemní a výkopové práce</span></li>
<li><a href="#">Řízené podvrty</a></li>
<li><a href="#">Dláždění chodníků a ploch</a></li>
<li><a href="#">Demolice</a></li>
<li><a href="#">Kontejnerová přeprava</a></li>
<li><a href="#">Terénní úpravy</a></li>
<li><a href="#">Zednické a betonářské práce</a></li>
<li><a href="#">Vyklízení budov a hal</a></li>
</ul></div></section></main>

Sekce

Mřížka služeb

Nadpis s perexem a čtyři sloupce fotek s karty služeb. Třídy: hlava, sluzby, sl, sl__obr, sl__tab, vysek.

HTML kód

<main><section class="sec" id="sluzby">
<div class="w">
<div class="hlava"><h2>Služby od výkopu po nový povrch.</h2><p>Zemní a výkopové práce jsou naše hlavní služba. Děláme ale i podvrty, demolice, odvoz kontejnery a dlažbu.</p></div>
<div class="sluzby">
<a class="sl" href="#" id="zemni-prace"><span class="sl__obr vysek"><img alt="Bagr na stavbě s hlubokou jámou pro základy" class="foto" height="1333" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/vykop-zaklady-1000.webp" srcset="assets/foto/vykop-zaklady-1000.webp 1000w, assets/foto/vykop-zaklady.webp 2000w" width="2000"/><span class="sl__tab mal">01 Zemní práce</span></span><h3>Zemní a výkopové práce</h3><p>Základy, přípojky, kabelové rýhy, jámy a jímky. Skrývka, zásyp a hutnění.</p><span class="mal">Více o výkopech</span></a>
<a class="sl" href="#" id="podvrty"><span class="sl__obr vysek"><img alt="Svazky barevných chrániček na hraně výkopu" class="foto" height="848" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/podvrt-4-1000.webp" srcset="assets/foto/podvrt-4-1000.webp 1000w, assets/foto/podvrt-4.webp 1272w" width="1272"/><span class="sl__tab mal">02 Podvrty</span></span><h3>Řízené podvrty</h3><p>Chránička pod silnicí, chodníkem nebo vjezdem bez rozkopání povrchu.</p><span class="mal">Poptat podvrt</span></a>
<a class="sl" href="#" id="dlazdeni"><span class="sl__obr vysek"><img alt="Pokládka betonové zámkové dlažby" class="foto" height="1333" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/dlazba-1000.webp" srcset="assets/foto/dlazba-1000.webp 1000w, assets/foto/dlazba.webp 2000w" width="2000"/><span class="sl__tab mal">03 Dláždění</span></span><h3>Dláždění chodníků a ploch</h3><p>Předláždění chodníků, vjezdy a zpevněné plochy včetně podkladu a obrubníků.</p><span class="mal">Poptat dláždění</span></a>
<a class="sl" href="#" id="demolice"><span class="sl__obr vysek"><img alt="Traktorbagr odklízí suť z cihel a tvárnic" class="foto" height="1333" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/vyklizeni-2-1000.webp" srcset="assets/foto/vyklizeni-2-1000.webp 1000w, assets/foto/vyklizeni-2.webp 2000w" width="2000"/><span class="sl__tab mal">04 Demolice</span></span><h3>Demolice</h3><p>Demolice staveb a bourací práce před výkopem a novou dlažbou.</p><span class="mal">Poptat demolici</span></a>
<a class="sl" href="#" id="kontejnery"><span class="sl__obr vysek"><img alt="Velkoobjemový kontejner na suť a odpad" class="foto" height="1335" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/kontejner-1000.webp" srcset="assets/foto/kontejner-1000.webp 1000w, assets/foto/kontejner.webp 2000w" width="2000"/><span class="sl__tab mal">05 Kontejnery</span></span><h3>Kontejnerová přeprava</h3><p>Odvoz zeminy, suti a odpadu ze stavby kontejnery.</p><span class="mal">Poptat kontejner</span></a>
<a class="sl" href="#" id="terenni-upravy"><span class="sl__obr vysek"><img alt="Grejdr upravuje terén pod modrou oblohou" class="foto" height="1500" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/teren-1000.webp" srcset="assets/foto/teren-1000.webp 1000w, assets/foto/teren.webp 2000w" width="2000"/><span class="sl__tab mal">06 Terén</span></span><h3>Terénní úpravy</h3><p>Skrývka ornice, srovnání terénu, svahy a navážka zeminy.</p><span class="mal">Poptat terénní úpravy</span></a>
<a class="sl" href="#" id="zednicke-prace"><span class="sl__obr vysek"><img alt="Zedník zdí obvodovou zeď z keramických tvárnic" class="foto" height="1333" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/beton-zdeni-1000.webp" srcset="assets/foto/beton-zdeni-1000.webp 1000w, assets/foto/beton-zdeni.webp 2000w" width="2000"/><span class="sl__tab mal">07 Beton a zdění</span></span><h3>Zednické a betonářské práce</h3><p>Betonování základů a zdění, které navazují na výkop.</p><span class="mal">Poptat zednické práce</span></a>
<a class="sl" href="#" id="vyklizeni"><span class="sl__obr vysek"><img alt="Vyklizený nábytek připravený k odvozu před domem" class="foto" height="718" sizes="(max-width:640px) 100vw, (max-width:1200px) 50vw, 25vw" src="assets/foto/vyklizeni-4-1000.webp" srcset="assets/foto/vyklizeni-4-1000.webp 1000w, assets/foto/vyklizeni-4.webp 1077w" width="1077"/><span class="sl__tab mal">08 Vyklízení</span></span><h3>Vyklízení budov a hal</h3><p>Vyklidíme budovy a haly před rekonstrukcí nebo demolicí a odpad odvezeme.</p><span class="mal">Poptat vyklízení</span></a>
</div>
</div>
</section></main>

Karty výhod

Tři sloupce karet s ikonou, štítkem a větou. Třídy: karty, karta, ik, mal.

HTML kód

<main><section class="sec sec--bez" id="pro-koho">
<div class="w">
<div class="hlava"><h2>Pro stavební firmy, stavitele sítí a obce.</h2><p>Pro ty, kdo potřebují výkop hotový v termínu a povrch po něm bez další firmy.</p></div>
<div class="karty">
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M10 24H54M10 34H22V46H42V34H54M10 56H54"></path></g></svg>
<p class="mal">Jedna firma na trase</p><p>Výkop, podvrt i dlažba. Chodník po výkopu nečeká na další firmu.</p></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M12 44L44 12L54 22L22 54Z"></path><path d="M20 36l4 4M26 30l6 6M32 24l4 4M38 18l6 6"></path></g></svg>
<p class="mal">Cena v jednotkách</p><p>Nabídku dostanete v Kč/bm, Kč/m³ nebo Kč/m², ne v hodinách stroje.</p></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M12 16H54V54H12Z"></path><path d="M12 26H54M22 10V20M44 10V20"></path><path d="M22 34H30V42H22Z"></path></g></svg>
<p class="mal">Termín v nabídce</p><p>Termín nástupu napíšeme do nabídky. Bereme jen tolik zakázek, kolik zvládneme.</p></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M8 28H56L50 50H14Z"></path><path d="M20 28V50M32 28V50M44 28V50"></path><path d="M8 56H56"></path></g></svg>
<p class="mal">Odvoz kontejnery</p><p>Zeminu, suť a odpad ze stavby odvezeme sami.</p></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M6 26H58"></path><path d="M6 32H58" stroke-dasharray="4 4"></path><path d="M12 36C20 54 44 54 52 36"></path><path d="M46 38L52 36L54 42"></path></g></svg>
<p class="mal">Podvrt bez rozkopání</p><p>Pod silnicí, chodníkem nebo vjezdem protáhneme chráničku řízeným podvrtem.</p></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M16 8H40L50 18V56H16Z"></path><path d="M40 8V18H50"></path><path d="M24 46L42 28"></path><circle cx="26" cy="30" r="3"></circle><circle cx="40" cy="44" r="3"></circle></g></svg>
<p class="mal">Přenesená daňová povinnost</p><p>Jsme plátci DPH a stavební práce fakturujeme v přenesené daňové povinnosti.</p></div>
</div>
</div>
</section></main>

Karty s odkazem

Karty na bílém podkladu s linkou a odkazem dole. Třídy: karty, karta, odkaz mal.

HTML kód

<main><section class="sec"><div class="w"><div class="karty">
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M8 50H56M14 50V34H50V50"></path><path d="M22 34V24H42V34"></path></g></svg>
<p class="mal">Stroje máte na jiné stavbě</p><p>Výkop základů a přípojek uděláme jako subdodávku. Termín nástupu napíšeme do nabídky.</p><a class="odkaz mal" href="#">Výkopy základů</a></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M6 26H58"></path><path d="M6 32H58" stroke-dasharray="4 4"></path><path d="M12 36C20 54 44 54 52 36"></path><path d="M46 38L52 36L54 42"></path></g></svg>
<p class="mal">Chodník čeká na druhou firmu</p><p>Kabelovou rýhu vykopeme, pod silnicí podvrtáme a chodník po ní znovu vydláždíme.</p><a class="odkaz mal" href="#">Kabelové rýhy</a></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M10 24H54M10 34H22V46H42V34H54M10 56H54"></path></g></svg>
<p class="mal">Stavba potřebuje přípojky</p><p>Vykopeme rýhy pro přípojky vody, kanalizace, plynu a elektřiny od řadu až k objektu.</p><a class="odkaz mal" href="#">Výkopy přípojek</a></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M6 22H18V48H46V22H58"></path><path d="M26 30H38V40H26Z"></path></g></svg>
<p class="mal">Jáma pro jímku nebo šachtu</p><p>Vykopeme jámu podle rozměrů z projektu a po osazení ji zasypeme a zhutníme.</p><a class="odkaz mal" href="#">Jámy a jímky</a></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M8 28H56L50 50H14Z"></path><path d="M20 28V50M32 28V50M44 28V50"></path><path d="M8 56H56"></path></g></svg>
<p class="mal">Zeminu nemáte kam dát</p><p>Zeminu a suť ze stavby odvezeme kontejnery.</p><a class="odkaz mal" href="#">Odvoz zeminy</a></div>
<div class="karta"><svg aria-hidden="true" class="ik" viewbox="0 0 64 64"><rect fill="#fdc331" height="22" width="22" x="6" y="6"></rect><g fill="none" stroke="#0e0e0e" stroke-linejoin="miter" stroke-width="2"><path d="M12 44L44 12L54 22L22 54Z"></path><path d="M20 36l4 4M26 30l6 6M32 24l4 4M38 18l6 6"></path></g></svg>
<p class="mal">Nevíte, kolik to bude stát</p><p>Napište, co a kde chystáte. Cenu dostanete v Kč/bm nebo Kč/m³ s termínem nástupu.</p><a class="odkaz mal" href="#">Nezávazná poptávka</a></div>
</div></div></section></main>

Citát s fotkou

Fotka vedle citátu, odstavce a tlačítka. Třídy: pas, pas__obr, blockquote, mt.

HTML kód

<main><section class="sec" id="trasa">
<div class="w">
<div class="hlava"><h2>Výkop, podvrt i povrch na jedné trase.</h2><p>Stavba nečeká na další dodavatele a chodník nezůstane rozkopaný.</p></div>
<div class="pas mt">
<div class="pas__obr vysek"><img alt="Výkopová rýha s položenými kabelovými chráničkami" class="foto" height="1500" sizes="(max-width:900px) 100vw, 50vw" src="assets/foto/vykop-ryha-1000.webp" srcset="assets/foto/vykop-ryha-1000.webp 1000w, assets/foto/vykop-ryha.webp 2000w" width="2000"/></div>
<div>
<blockquote>„Kabelovou rýhu vykopeme, pod silnicí uděláme podvrt a chodník po ní znovu vydláždíme.“</blockquote>
<p>Rýhu i podvrt uděláme sami, zeminu a suť odvezeme kontejnery a povrch po výkopu položíme znovu. S jednou firmou místo dvou.</p>
<div class="btns"><a class="btn" href="#">Nezávazná poptávka</a></div>
</div>
</div>
</div>
</section></main>

Kroky

Číslovaný seznam kroků oddělený linkami. Třídy: radky, mal, h3.

HTML kód

<main><section class="sec sec--bez" id="postup">
<div class="w">
<div class="hlava"><h2>Zavoláte, přijedeme, vykopeme.</h2><p>Nabídku dostanete písemně v Kč/bm, Kč/m³ nebo Kč/m² s termínem nástupu.</p></div>
<ol class="radky">
<li><span class="mal">Krok 01</span><h3>Zavolejte nebo <a href="#">napište</a></h3><p>Řekněte nám, co a kde chystáte. Stačí rozměry, délka trasy nebo plán stavby.</p></li>
<li><span class="mal">Krok 02</span><h3>Obhlídka a písemná nabídka</h3><p>Podíváme se na místo, přístup pro stroj a sítě. Cenu napíšeme v jednotkách, ne v hodinách stroje.</p></li>
<li><span class="mal">Krok 03</span><h3>Výkop, odvoz a nový povrch</h3><p>Vykopeme, podvrtáme, odvezeme, a když to zakázka vyžaduje, položíme po výkopu i nový povrch.</p></li>
</ol>
</div>
</section></main>

Posuvník fotek

Vodorovně posuvný pás karet služeb s tlačítky a počítadlem. Třídy: posun, posun__pas, posun__ovl, posun__btn, posun__cislo.

HTML kód

<main><section class="sec sec--bez"><div class="w"><div class="posun" data-posun="">
<div class="posun__pas">
<article class="sl" id="zaklady"><span class="sl__obr vysek"><img alt="Minibagr ve stavební jámě s výztuží pro základy" class="foto" height="853" sizes="(max-width:640px) 100vw, 50vw" src="assets/foto/zaklady-jama-1000.webp" srcset="assets/foto/zaklady-jama-1000.webp 1000w, assets/foto/zaklady-jama.webp 1280w" width="1280"/><span class="sl__tab mal">01 Základy</span></span><h3>Základy, jámy a jímky</h3><p>Základové pasy a patky pro domy, haly i přístavby podle projektové dokumentace. Jámy pro jímky, šachty a nádrže.</p></article>
<article class="sl" id="ryhy"><span class="sl__obr vysek"><img alt="Výkopová rýha s položenými kabelovými chráničkami" class="foto" height="1500" sizes="(max-width:640px) 100vw, 50vw" src="assets/foto/vykop-ryha-1000.webp" srcset="assets/foto/vykop-ryha-1000.webp 1000w, assets/foto/vykop-ryha.webp 2000w" width="2000"/><span class="sl__tab mal">02 Rýhy</span></span><h3>Přípojky a kabelové rýhy</h3><p>Rýhy pro přípojky vody, kanalizace, plynu a elektřiny a pro kabely elektřiny a optiky. Pod silnicí nebo vjezdem uděláme podvrt.</p></article>
<article class="sl" id="skryvka"><span class="sl__obr vysek"><img alt="Zhutňování podloží vibrační deskou" class="foto" height="1500" sizes="(max-width:640px) 100vw, 50vw" src="assets/foto/hutneni-1000.webp" srcset="assets/foto/hutneni-1000.webp 1000w, assets/foto/hutneni.webp 2000w" width="2000"/><span class="sl__tab mal">03 Zásyp</span></span><h3>Skrývka, zásyp a hutnění</h3><p>Skrývka ornice před stavbou, zásyp výkopů a hutnění po vrstvách.</p></article>
<article class="sl" id="odvoz"><span class="sl__obr vysek"><img alt="Dokončování nového chodníku ze zámkové dlažby s obrubníky" class="foto" height="1333" sizes="(max-width:640px) 100vw, 50vw" src="assets/foto/chodnik-1000.webp" srcset="assets/foto/chodnik-1000.webp 1000w, assets/foto/chodnik.webp 2000w" width="2000"/><span class="sl__tab mal">04 Povrch</span></span><h3>Odvoz a nový povrch</h3><p>Zeminu a suť odvezeme kontejnery. Chodník, vjezd nebo plochu po výkopu položíme znovu: podklad, obrubníky i dlažbu.</p></article>
</div>
<div class="posun__ovl"><button aria-label="Předchozí" class="posun__btn" data-posun-zpet="" type="button"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M15 5l-7 7 7 7"></path></svg></button><span aria-live="polite" class="posun__cislo" data-posun-cislo="">1 / 2</span><button aria-label="Další" class="posun__btn" data-posun-dal="" type="button"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M9 5l7 7-7 7"></path></svg></button></div>
</div></div></section></main>

Kde pracujeme

Orámovaný tři sloupce: text s telefonem, fotka a rozbalovací seznam okresů. Třídy: sec--ram, tri, tri__tx, tri__foto, akord, akord__ik, akord__sip.

HTML kód

<main><section class="sec sec--ram" id="kde-pracujeme">
<div class="w">
<div class="tri">
<div class="tri__tx">
<p class="mal stit">Kde pracujeme</p>
<h2 class="h2">Pracujeme do 60 km<br/>od Mikulova</h2>
<p class="tri__p">Jezdíme na Břeclavsko, Znojemsko, Hodonínsko, do okresu Brno-venkov a do Brna. Je vaše stavba kousek za hranicí okruhu? Zavolejte a domluvíme se.</p>
<a class="odkaz tri__tel" href="#">+420 792 226 981</a>
</div>
<div class="tri__foto vysek"><img alt="Grejdr upravuje terén pod modrou oblohou" class="foto" height="1500" sizes="(max-width:1200px) 100vw, 33vw" src="assets/foto/teren-1000.webp" srcset="assets/foto/teren-1000.webp 1000w, assets/foto/teren.webp 2000w" width="2000"/></div>
<div class="akord" data-rozbal="">
<details open=""><summary><span class="akord__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 21.5s-7-6.6-7-11.6a7 7 0 0 1 14 0c0 5-7 11.6-7 11.6z"></path><circle cx="12" cy="9.9" r="2.6"></circle></svg></span><h3>Břeclavsko</h3><span aria-hidden="true" class="akord__sip"></span></summary><div class="akord__obsah" data-obsah=""><p class="mal">Domovský okres</p><p>Mikulov, Valtice, Lednice, Břeclav, Hustopeče a obce kolem. Tady jsme na stavbě nejrychleji.</p></div></details>
<details><summary><span class="akord__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 21.5s-7-6.6-7-11.6a7 7 0 0 1 14 0c0 5-7 11.6-7 11.6z"></path><circle cx="12" cy="9.9" r="2.6"></circle></svg></span><h3>Brno-venkov a Brno</h3><span aria-hidden="true" class="akord__sip"></span></summary><div class="akord__obsah" data-obsah=""><p class="mal">Do 50 km</p><p>Pohořelice, Židlochovice, obce na jih od Brna i Brno samotné.</p></div></details>
<details><summary><span class="akord__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 21.5s-7-6.6-7-11.6a7 7 0 0 1 14 0c0 5-7 11.6-7 11.6z"></path><circle cx="12" cy="9.9" r="2.6"></circle></svg></span><h3>Znojemsko</h3><span aria-hidden="true" class="akord__sip"></span></summary><div class="akord__obsah" data-obsah=""><p class="mal">Do 60 km</p><p>Znojmo a obce mezi Znojmem a Mikulovem.</p></div></details>
<details><summary><span class="akord__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 21.5s-7-6.6-7-11.6a7 7 0 0 1 14 0c0 5-7 11.6-7 11.6z"></path><circle cx="12" cy="9.9" r="2.6"></circle></svg></span><h3>Hodonínsko</h3><span aria-hidden="true" class="akord__sip"></span></summary><div class="akord__obsah" data-obsah=""><p class="mal">Do 60 km</p><p>Hodonín a obce na cestě od Břeclavi.</p></div></details>
</div>
</div>
</div>
</section></main>

Časté dotazy

Vlevo nadpis s telefonem, vpravo rozbalovací otázky s plusem. Třídy: dva, dva__l, dva__r, faq2, faq2__ic, faq2__a.

HTML kód

<main><section class="sec sec--ram sec--bez" id="dotazy">
<div class="w">
<div class="dva">
<div class="dva__l">
<p class="mal stit">Časté dotazy</p>
<h2 class="h2">Na co se nás ptáte</h2>
<p class="dva__p">Nenašli jste odpověď? Zavolejte nebo napište, co a kde chystáte.</p>
<a class="odkaz tri__tel" href="#">+420 792 226 981</a>
</div>
<div class="dva__r" data-rozbal="">
<details class="faq2" open=""><summary><h3>Kolik stojí výkop nebo dlažba?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Cenu napíšeme do nabídky podle rozměrů a místa: výkopy v Kč/bm nebo Kč/m³, dlažbu v Kč/m². Orientační ceny zveřejníme podle hotových zakázek.</p></div></details>
<details class="faq2"><summary><h3>Uděláte i podvrt pod silnicí?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ano. Řízeným podvrtem protáhneme chráničku pod silnicí, chodníkem nebo vjezdem, aniž bychom povrch rozkopali.</p></div></details>
<details class="faq2"><summary><h3>Odvezete zeminu a suť?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ano. Zeminu, suť a odpad ze stavby odvezeme kontejnery.</p></div></details>
<details class="faq2"><summary><h3>Fakturujete v přenesené daňové povinnosti?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ano. Jsme plátci DPH (DIČ CZ04580273) a stavební práce pro plátce DPH fakturujeme v přenesené daňové povinnosti.</p></div></details>
<details class="faq2"><summary><h3>Kdy můžete nastoupit?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Termín nástupu napíšeme do nabídky. Bereme jen tolik zakázek, kolik zvládneme v domluvených termínech.</p></div></details>
<details class="faq2"><summary><h3>Co potřebujete vědět, než pošlete nabídku?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Co a kde chystáte, rozměry nebo délku trasy, jestli jsou sítě vytyčené, jestli na místo vjede stroj a kdy potřebujete začít.</p></div></details>
</div>
</div>
</div>
</section></main>

Formuláře

Poptávka na žluté

Žlutá sekce: kontaktní údaje vlevo, bílý formulář vpravo. Třídy: sec--zluta, kontakt, kontakt__tel, kontakt__udaje, form, form__g, field, field--cela.

HTML kód

<main><section class="sec sec--zluta" id="kontakt">
<div class="w kontakt">
<div class="kontakt__tx">
<p class="mal">Kontakt</p>
<h2>Napište nám, co chystáte.</h2>
<p>Popište stavbu a místo. Ozveme se vám a domluvíme obhlídku a nabídku.</p>
<a class="kontakt__tel" href="#">+420 792 226 981</a>
<ul class="kontakt__udaje">
<li><a href="#">info@zpmikulov.cz</a></li>
<li>Purkyňova 266/12, 692 01 Mikulov</li>
</ul>
</div>
<div><div class="form__done" id="odeslano" tabindex="-1">
<h3>Děkujeme, poptávka je odeslaná</h3>
<p>Ozveme se vám na uvedený telefon nebo e-mail. Spěcháte? Volejte <a href="#">+420 792 226 981</a>.</p>
</div>
<form class="form" data-poptavka="" id="poptavka">
<h3 class="form__h">Nezávazná poptávka</h3>
<p class="form__err" data-err="1" hidden="">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněné údaje, nebo nám zavolejte.</p>
<input name="stranka" type="hidden" value=""/>
<input name="kontrola" type="hidden" value=""/>
<div aria-hidden="true" class="hp-field"><label for="f-web">Web</label><input autocomplete="off" id="f-web" name="web" tabindex="-1"/></div>
<div class="form__g">
<div class="field field--cela"><label for="f-jmeno">Jméno a příjmení nebo firma</label><input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno nebo název firmy." id="f-jmeno" name="jmeno" required=""/><p class="field__err" hidden="" id="f-jmeno-err"></p></div>
<div class="field"><label for="f-telefon">Telefon</label><input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zkontrolujte telefon, např. 777 123 456." id="f-telefon" name="telefon" required="" type="tel"/><p class="field__err" hidden="" id="f-telefon-err"></p></div>
<div class="field"><label for="f-email">E-mail</label><input aria-describedby="f-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zkontrolujte e-mail, např. jmeno@firma.cz." id="f-email" name="email" required="" type="email"/><p class="field__err" hidden="" id="f-email-err"></p></div>
<div class="field"><label for="f-misto">Místo stavby</label><input aria-describedby="f-misto-err" autocomplete="address-level2" data-msg="Napište, kde stavba bude." id="f-misto" name="misto" required=""/><p class="field__err" hidden="" id="f-misto-err"></p></div>
<div class="field"><span class="field__lbl" id="f-sluzby">Co chystáte</span><details class="ms"><summary aria-describedby="f-sluzby">Vyberte služby</summary><div aria-labelledby="f-sluzby" class="ms__list" role="group">
<label><input name="sluzby[]" type="checkbox" value="Zemní a výkopové práce"/>Zemní a výkopové práce</label>
<label><input name="sluzby[]" type="checkbox" value="Řízené podvrty"/>Řízené podvrty</label>
<label><input name="sluzby[]" type="checkbox" value="Dláždění chodníků a ploch"/>Dláždění chodníků a ploch</label>
<label><input name="sluzby[]" type="checkbox" value="Terénní úpravy"/>Terénní úpravy</label>
<label><input name="sluzby[]" type="checkbox" value="Demolice"/>Demolice</label>
<label><input name="sluzby[]" type="checkbox" value="Kontejnerová přeprava"/>Kontejnerová přeprava</label>
<label><input name="sluzby[]" type="checkbox" value="Zednické a betonářské práce"/>Zednické a betonářské práce</label>
<label><input name="sluzby[]" type="checkbox" value="Vyklízení budov a hal"/>Vyklízení budov a hal</label>
<label><input name="sluzby[]" type="checkbox" value="Jiné"/>Jiné</label>
</div></details></div>
<div class="field field--cela"><label for="f-zprava">Rozměry a popis</label><textarea id="f-zprava" name="zprava" placeholder="Například kabelová rýha 120 m, hloubka 80 cm, potom chodník široký 2 m" rows="5"></textarea></div>
</div>
<p class="form__pozn">Odesláním poptávky souhlasíte se zpracováním údajů pro její vyřízení. Poptávka je nezávazná.</p>
<button class="btn btn--cerne btn--velke" type="submit">Odeslat poptávku</button>
</form>
</div>
</div>
</section></main>

Pole a chyby

Pole s chybou, vícenásobný výběr a chybové hlášení formuláře. Třídy: field, field__err, ms, ms__list, form__err.

HTML kód

<div style="padding:32px;max-width:520px;background:#fff"><p class="form__err">Poptávku se nepodařilo odeslat. Zkontrolujte vyplněné údaje.</p><div class="field"><label for="x-tel">Telefon</label><input aria-invalid="true" id="x-tel" value="123"/><p class="field__err">Zkontrolujte telefon, např. 777 123 456.</p></div><div class="field"><span class="field__lbl">Co chystáte</span><details class="ms" open=""><summary class="is-set">Zemní práce</summary><div class="ms__list"><label><input checked="" type="checkbox"/>Zemní a výkopové práce</label><label><input type="checkbox"/>Řízené podvrty</label></div></details></div><div style="height:90px"></div></div>

Obsah

Stránka 404

Žlutá chybová stránka s obřím číslem a tlačítkem. Třídy: e404, e404__in, e404__num.

HTML kód

<main><section class="e404">
<div class="w e404__in">
<p aria-hidden="true" class="e404__num">404</p>
<div>
<p class="mal">Stránka nenalezena</p>
<h1>Tady se zatím nekope.</h1>
<p>Stránku, kterou hledáte, jsme nenašli. Možná se přesunula, nebo je v adrese překlep. Podívejte se na naše služby, nebo nám rovnou zavolejte.</p>
<div class="btns"><a class="btn" href="#">Na úvodní stránku</a><a class="tel" href="#">+420 792 226 981</a></div>
</div>
</div>
</section></main>

Stránky na živém webu

Úvod Zemní a výkopové práce