Základ je grafit --ink #16181d pro nadpisy, tmavé plochy a obrysová tlačítka. Tělo textu je --text #41454d, popisky --muted #6b707a.
Jediná akcentní barva je červená --accent #b5121b. Používej ji na hlavní tlačítko, štítky kicker, ikony, čísla kroků a odrážky. Nikdy ne jako plochu celé sekce.
Střídej bílý podklad a světle šedý --sand #f3f4f6 (sec--sand). Linky jsou --line #dfe1e5, 1 px plné.
Chyby formuláře mají --err #b3261e. Zelená #2e9e5b je jen tečka stavu Otevřeno.
Písmo
Celý web je v jedné rodině Manrope 400 až 800, hostované u nás, včetně cyrilice.
Nadpisy h1, h2, h3 jsou 800, řádkování 1.08 a záporné prostrkání (-.025em, úvod -.045em). Velikosti plynule přes clamp().
Štítek kicker je 800, verzálky, prostrkání .14em, červený. Tělo je 500 na 17 px.
Rozložení
Obsah je v wrap do 1440 px s bočním okrajem --pad a mezerou sloupců --gap.
Sekce sec mají svislý okraj clamp(64px,7vw,110px). Dvousloupcové bloky (split, why-b, svc-a, area, contact-grid) se na šířce 1000 px lámou do jednoho sloupce.
Hlavička nav je pevná, výška --navh 84 px (70 px na telefonu).
Tvary
Tlačítka a vstupy mají rádius 10 až 12 px, karty a fotky 12 až 16 px, kolečka (čísla kroků, ikony kontaktů) 50 %.
Bez stínů, kromě jemného stínu rozbalené nabídky jazyků a štítku na mapě. Dělení obstarávají tenké linky a čárkovaná červená linka mezi kroky.
Tlačítka
Hlavní akce je btn btn--primary (červená, po najetí bílá s červeným textem), doplňková btn btn--line (grafitový obrys). Výška 56 px, text 800.
V jednom bloku nejvýš jedno hlavní tlačítko, vedle něj telefon hero__tel nebo textový odkaz.
Obrázky
Reálné fotky dílny a mechaniků, zaoblené, v poměru 4:3 nebo 4:5, object-fit:cover. Popisek na fotce je bílý štítek se zaoblením.
Ikony jsou jednobarevné červené SVG ve třídě ic, velikost 56 px.
Jazyk
Web je česky, anglicky (en/) a ukrajinsky (uk/), přepínač lang je v hlavičce. Za jednopísmennými předložkami jsou nezlomitelné mezery.
Barvy
Text a značka
--ink#16181dNadpisy, obrys tlačítek, tmavé plochy (404, patička, titulek formuláře).
--accent#b5121bHlavní tlačítko, štítky, ikony, čísla kroků, odrážky.
Široká fotka se štítkem otevírací doby a pod ní nadpis, perex a akce. Třídy: hero, hero__photo, hero__live, hero__body, hero__cta, hero__tel.
HTML kód
<main><section class="hero">
<div class="hero__photo"><img alt="Mechanik opravuje auto v dílně" fetchpriority="high" height="1333" sizes="100vw" src="assets/foto/hero.webp" srcset="assets/foto/hero-900.webp 900w, assets/foto/hero-1400.webp 1400w, assets/foto/hero.webp 2000w" width="2000"/>
<p class="hero__live" data-closed="Teď máme zavřeno" data-hours="" data-open="Teď máme otevřeno"><span class="hours__dot"></span><b>Otevírací doba</b><span>Po-Pá 8:00-18:00</span></p>
</div>
<div class="wrap hero__body">
<div>
<p class="kicker">Autoservis Brno, Cejl 29/76</p>
<h1>Servis a opravy aut v Brně</h1>
</div>
<div>
<p class="hero__lead">Opravíme motor, brzdy, podvozek, spojku i elektroinstalaci osobních a užitkových aut. Než se do opravy pustíme, řekneme vám, co je potřeba a kolik to bude stát.</p>
<div class="hero__cta">
<a class="btn btn--primary" href="#">Objednat servis</a>
<a class="hero__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>601 339 195</a>
</div>
<p class="hero__odtah"><b>Auto nejede?</b> Odtáhneme ho k nám, v Brně zdarma při opravě u nás.</p>
</div>
</div>
</section></main>
Úvod podstránky
Světle šedý úvod podstránky s nadpisem a perexem. Třídy: page-hero, page-hero__lead.
HTML kód
<main><section class="page-hero">
<div class="wrap">
<h1>Služby autoservisu v Brně</h1>
<p class="page-hero__lead">Opravujeme osobní i užitková auta. Nevíte, kam vaše závada patří? Zavolejte nebo ji popište ve formuláři a poradíme vám.</p>
</div>
</section></main>
Úvod s kontakty
Úvod podstránky se třemi kontaktními kolečky s ikonou. Třídy: page-hero, contact-list--hero, contact-item, place__tel.
HTML kód
<main><section class="page-hero">
<div class="wrap">
<h1>Kontakt a objednávka servisu</h1>
<p class="page-hero__lead">Zavolejte nebo vyplňte formulář. Ozveme se vám a domluvíme termín, kdy auto přivezete.</p>
<div class="contact-list contact-list--hero">
<div class="contact-item">
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M146.2,46.45a6,6,0,0,1,7.35-4.25,84.24,84.24,0,0,1,60.25,60.25,6,6,0,0,1-4.25,7.35,5.94,5.94,0,0,1-1.55.2,6,6,0,0,1-5.8-4.45A72.34,72.34,0,0,0,150.45,53.8,6,6,0,0,1,146.2,46.45ZM142.45,85.8C157,89.68,166.32,99,170.2,113.55A6,6,0,0,0,176,118a5.94,5.94,0,0,0,1.55-.2,6,6,0,0,0,4.25-7.35c-5-18.71-17.54-31.25-36.25-36.25a6,6,0,1,0-3.1,11.6Zm79.44,97A54.25,54.25,0,0,1,168,230C89.7,230,26,166.3,26,88A54.25,54.25,0,0,1,73.17,34.11,14,14,0,0,1,87.73,42.5l21.1,47.1a14,14,0,0,1-1.12,13.28,6,6,0,0,1-.42.57L86.22,128.51a1.89,1.89,0,0,0,0,1.67c7.66,15.68,24.1,32,40,39.65a1.88,1.88,0,0,0,1.68-.06l24.69-21a4.81,4.81,0,0,1,.56-.42,14,14,0,0,1,13.28-1.22l47.24,21.17A14,14,0,0,1,221.89,182.83ZM210,181.32a2,2,0,0,0-1.21-2l-47.25-21.17a1.92,1.92,0,0,0-1.6.1l-24.68,21c-.18.15-.37.29-.56.42a14,14,0,0,1-13.77,1c-18.36-8.87-36.66-27-45.53-45.19a14,14,0,0,1,.91-13.73,4.73,4.73,0,0,1,.43-.57L97.79,96.09a2,2,0,0,0,0-1.67L76.74,47.31A2,2,0,0,0,74.9,46h-.23A42.24,42.24,0,0,0,38,88c0,71.68,58.32,130,130,130A42.24,42.24,0,0,0,210,181.32Z"></path></svg></span>
<div>
<h2>Telefon</h2>
<a class="place__tel" href="#">601 339 195</a>
</div>
</div>
<div class="contact-item">
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M224,50H32a6,6,0,0,0-6,6V192a14,14,0,0,0,14,14H216a14,14,0,0,0,14-14V56A6,6,0,0,0,224,50ZM208.58,62,128,135.86,47.42,62ZM216,194H40a2,2,0,0,1-2-2V69.64l86,78.78a6,6,0,0,0,8.1,0L218,69.64V192A2,2,0,0,1,216,194Z"></path></svg></span>
<div>
<h2>E-mail</h2>
<p><a href="#">info@aaservisbrno.cz</a></p>
</div>
</div>
<div class="contact-item">
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M253.57,117.78l-14-35a13.93,13.93,0,0,0-13-8.8H190V64a6,6,0,0,0-6-6H32A14,14,0,0,0,18,72V184a14,14,0,0,0,14,14H50.6a30,30,0,0,0,58.8,0h53.2a30,30,0,0,0,58.8,0H240a14,14,0,0,0,14-14V120A6,6,0,0,0,253.57,117.78ZM190,86h36.58a2,2,0,0,1,1.86,1.26L239.14,114H190ZM30,72a2,2,0,0,1,2-2H178v68H30ZM80,210a18,18,0,1,1,18-18A18,18,0,0,1,80,210Zm82.6-24H109.4a30,30,0,0,0-58.8,0H32a2,2,0,0,1-2-2V150H178v15.48A30.1,30.1,0,0,0,162.6,186ZM192,210a18,18,0,1,1,18-18A18,18,0,0,1,192,210Zm50-26a2,2,0,0,1-2,2H221.4A30.05,30.05,0,0,0,192,162c-.67,0-1.34,0-2,.07V126h52Z"></path></svg></span>
<div>
<h2>Odtah auta</h2>
<p>Auto nejede? Zavolejte na <a href="#">601 339 195</a> a odtáhneme ho k nám. V Brně zdarma při opravě u nás.</p>
</div>
</div>
</div>
</div>
</section></main>
Úvod právní stránky
Užší úvod s textem ve sloupci 900 px. Třídy: page-hero, page-hero--narrow.
HTML kód
<main><section class="page-hero page-hero--narrow">
<div class="wrap">
<h1>Zpracování osobních údajů</h1>
<p class="page-hero__lead">Tady najdete, jak zacházíme s osobními údaji zákazníků a lidí, kteří nám pošlou objednávku přes web. S dotazem nám zavolejte na <a href="#">601 339 195</a> nebo napište na <a href="#">info@aaservisbrno.cz</a>.</p>
</div>
</section></main>
Prvky
Tlačítka
Plné červené tlačítko je hlavní akce, obrysové doplňková, telefon je textový odkaz s ikonou. Třídy: btn btn--primary, btn btn--line, hero__tel.
<div style="padding:24px;max-width:420px"><ul class="ticks"><li>výměna oleje a provozních kapalin</li><li>výměna filtrů</li><li>příprava na STK</li></ul></div>
Sekce
Výhody s fotkou
Fotka s bílým štítkem a vedle seznam výhod s červenými ikonami. Třídy: why-b, why-b__photo, why-b__badge, why, ic.
HTML kód
<main><section class="sec">
<div class="wrap why-b">
<div class="why-b__photo">
<img alt="Mechanici připojují diagnostický notebook k autu" height="1067" sizes="(max-width: 1000px) 100vw, 45vw" src="assets/foto/diagnostika.webp" srcset="assets/foto/diagnostika-900.webp 900w, assets/foto/diagnostika.webp 1600w" width="1600"/>
<div class="why-b__badge"><h2>Proč jezdit k nám</h2><p>Chceme, abyste přesně věděli, co se s autem děje a kolik oprava stojí. Bez překvapení při placení.</p></div>
</div>
<ul class="why">
<li>
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M182,104a6,6,0,0,1-6,6H80a6,6,0,0,1,0-12h96A6,6,0,0,1,182,104Zm-6,26H80a6,6,0,0,0,0,12h96a6,6,0,0,0,0-12Zm54-74V208a6,6,0,0,1-2.85,5.1,5.93,5.93,0,0,1-3.15.9,6,6,0,0,1-2.68-.63L192,198.71l-29.32,14.66a6,6,0,0,1-5.36,0L128,198.71,98.68,213.37a6,6,0,0,1-5.36,0L64,198.71,34.68,213.37A6,6,0,0,1,26,208V56A14,14,0,0,1,40,42H216A14,14,0,0,1,230,56Zm-12,0a2,2,0,0,0-2-2H40a2,2,0,0,0-2,2V198.29l23.32-11.66a6,6,0,0,1,5.36,0L96,201.29l29.32-14.66a6,6,0,0,1,5.36,0L160,201.29l29.32-14.66a6,6,0,0,1,5.36,0L218,198.29Z"></path></svg></span>
<div><h3>Cenu znáte předem</h3><p>Po prohlídce vám řekneme, co je potřeba opravit a kolik to bude stát. Bez vašeho souhlasu nic dalšího neděláme.</p></div>
</li>
<li>
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M205.65,74.08A109.26,109.26,0,0,0,128,42h-.39C67.17,42.21,18,92.06,18,153.13V176a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V152A109.3,109.3,0,0,0,205.65,74.08ZM226,176a2,2,0,0,1-2,2H115.78l57.07-78.47a6,6,0,0,0-9.7-7.06L100.94,178H32a2,2,0,0,1-2-2V153.13A102.36,102.36,0,0,1,30.62,142H56a6,6,0,0,0,0-12H32.71C42.6,88.4,78.53,56.86,122,54.19V80a6,6,0,0,0,12,0V54.19A98.05,98.05,0,0,1,223.53,130H200a6,6,0,0,0,0,12h25.5c.33,3.3.5,6.64.5,10Z"></path></svg></span>
<div><h3>Diagnostika na místě</h3><p>Svítí kontrolka nebo auto dělá něco divného? Počítačovou diagnostikou najdeme příčinu a vysvětlíme vám, co s tím dělat.</p></div>
</li>
<li>
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M166,152a6,6,0,0,1-6,6H96a6,6,0,0,1,0-12h64A6,6,0,0,1,166,152Zm-6-38H96a6,6,0,0,0,0,12h64a6,6,0,0,0,0-12Zm54-66V216a14,14,0,0,1-14,14H56a14,14,0,0,1-14-14V48A14,14,0,0,1,56,34H93.17a45.91,45.91,0,0,1,69.66,0H200A14,14,0,0,1,214,48ZM94,64v2h68V64a34,34,0,0,0-68,0ZM202,48a2,2,0,0,0-2-2H170.33A45.77,45.77,0,0,1,174,64v8a6,6,0,0,1-6,6H88a6,6,0,0,1-6-6V64a45.77,45.77,0,0,1,3.67-18H56a2,2,0,0,0-2,2V216a2,2,0,0,0,2,2H200a2,2,0,0,0,2-2Z"></path></svg></span>
<div><h3>Připravíme auto na STK</h3><p>Před technickou kontrolou nebo delší cestou auto projdeme a opravíme, co je potřeba, ať vás nic nepřekvapí.</p></div>
</li>
<li>
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M240,106H226.49L190.58,70.1a13.9,13.9,0,0,0-9.89-4.1H138V38h26a6,6,0,0,0,0-12H100a6,6,0,0,0,0,12h26V66H64A14,14,0,0,0,50,80v54H22V108a6,6,0,0,0-12,0v64a6,6,0,0,0,12,0V146H50v22.69a13.9,13.9,0,0,0,4.1,9.89L93.42,217.9a13.9,13.9,0,0,0,9.89,4.1h77.38a13.9,13.9,0,0,0,9.89-4.1L226.49,182H240a14,14,0,0,0,14-14V120A14,14,0,0,0,240,106Zm2,62a2,2,0,0,1-2,2H224a6,6,0,0,0-4.24,1.76L182.1,209.42a2,2,0,0,1-1.41.58H103.31a2,2,0,0,1-1.41-.58L62.58,170.1a2,2,0,0,1-.58-1.41V80a2,2,0,0,1,2-2H180.69a2,2,0,0,1,1.41.58l37.66,37.66A6,6,0,0,0,224,118h16a2,2,0,0,1,2,2Z"></path></svg></span>
<div><h3>Rozvody vyměníme včas</h3><p>Rozvody měníme podle doporučeného intervalu výrobce, dřív než prasknou a poškodí motor.</p></div>
</li>
<li>
<span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M253.57,117.78l-14-35a13.93,13.93,0,0,0-13-8.8H190V64a6,6,0,0,0-6-6H32A14,14,0,0,0,18,72V184a14,14,0,0,0,14,14H50.6a30,30,0,0,0,58.8,0h53.2a30,30,0,0,0,58.8,0H240a14,14,0,0,0,14-14V120A6,6,0,0,0,253.57,117.78ZM190,86h36.58a2,2,0,0,1,1.86,1.26L239.14,114H190ZM30,72a2,2,0,0,1,2-2H178v68H30ZM80,210a18,18,0,1,1,18-18A18,18,0,0,1,80,210Zm82.6-24H109.4a30,30,0,0,0-58.8,0H32a2,2,0,0,1-2-2V150H178v15.48A30.1,30.1,0,0,0,162.6,186ZM192,210a18,18,0,1,1,18-18A18,18,0,0,1,192,210Zm50-26a2,2,0,0,1-2,2H221.4A30.05,30.05,0,0,0,192,162c-.67,0-1.34,0-2,.07V126h52Z"></path></svg></span>
<div><h3>Odtah v Brně zdarma</h3><p>Auto nejede nebo s ním není bezpečné jet? Odtáhneme ho k nám do dílny. V Brně zdarma, když opravu uděláme u nás, mimo Brno se slevou 30 %.</p></div>
</li>
</ul>
</div>
</section></main>
Seznam služeb
Nadpis s akcemi vlevo, vpravo očíslované karty služeb s ikonou a zaškrtnutými body. Třídy: svc-a, svc-a__side, svc, svc__n, ticks.
HTML kód
<main><section class="sec sec--sand" id="sluzby">
<div class="wrap svc-a">
<div class="svc-a__side">
<h2>Co pro vás uděláme</h2>
<p>Od výměny oleje po opravu motoru. Osobní i užitková auta opravujeme v dílně na Cejlu.</p>
<div class="svc-a__cta"><a class="btn btn--primary" href="#">Objednat servis</a><a class="svc-a__more" href="#">Všechny služby</a></div>
</div>
<ol class="svc">
<li><span class="svc__n">01</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M172.53,49.06a252.86,252.86,0,0,0-41.09-38,6,6,0,0,0-6.88,0,252.86,252.86,0,0,0-41.09,38C56.34,80.26,42,113.09,42,144a86,86,0,0,0,172,0C214,113.09,199.66,80.26,172.53,49.06ZM128,218a74.09,74.09,0,0,1-74-74c0-59.62,59-108.93,74-120.51C143,35.07,202,84.38,202,144A74.09,74.09,0,0,1,128,218Zm53.92-65A55.58,55.58,0,0,1,137,197.92a7,7,0,0,1-1,.08,6,6,0,0,1-1-11.92c17.38-2.92,32.13-17.68,35.08-35.08a6,6,0,1,1,11.84,2Z"></path></svg></span><div><h3>Servis a údržba</h3><ul class="ticks"><li>výměna oleje a provozních kapalin</li>
<li>výměna filtrů</li>
<li>příprava na STK</li>
<li>kontrola před delší cestou</li></ul></div></li>
<li><span class="svc__n">02</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M240,106H226.49L190.58,70.1a13.9,13.9,0,0,0-9.89-4.1H138V38h26a6,6,0,0,0,0-12H100a6,6,0,0,0,0,12h26V66H64A14,14,0,0,0,50,80v54H22V108a6,6,0,0,0-12,0v64a6,6,0,0,0,12,0V146H50v22.69a13.9,13.9,0,0,0,4.1,9.89L93.42,217.9a13.9,13.9,0,0,0,9.89,4.1h77.38a13.9,13.9,0,0,0,9.89-4.1L226.49,182H240a14,14,0,0,0,14-14V120A14,14,0,0,0,240,106Zm2,62a2,2,0,0,1-2,2H224a6,6,0,0,0-4.24,1.76L182.1,209.42a2,2,0,0,1-1.41.58H103.31a2,2,0,0,1-1.41-.58L62.58,170.1a2,2,0,0,1-.58-1.41V80a2,2,0,0,1,2-2H180.69a2,2,0,0,1,1.41.58l37.66,37.66A6,6,0,0,0,224,118h16a2,2,0,0,1,2,2Z"></path></svg></span><div><h3>Motor a rozvody</h3><ul class="ticks"><li>opravy a servis motorů</li>
<li>výměna rozvodů</li>
<li>opravy a výměna turbodmychadel</li></ul></div></li>
<li><span class="svc__n">03</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M168,174c14.44,0,22-23.14,22-46s-7.56-46-22-46-22,23.14-22,46S153.56,174,168,174Zm0-80c2.57,0,10,11.69,10,34s-7.43,34-10,34-10-11.69-10-34S165.43,94,168,94Zm64,124H191.71C209.89,201,222,167.43,222,128c0-57.2-25.48-102-58-102H92C59.48,26,34,70.8,34,128S59.48,230,92,230H232a6,6,0,0,0,0-12Zm-22-90c0,48.79-21.07,90-46,90s-46-41.21-46-90,21.07-90,46-90S210,79.21,210,128ZM46,128c0-2.86.08-5.69.22-8.5L80,95.37l26.5,18.93c-.33,4.47-.5,9-.5,13.7a175.72,175.72,0,0,0,4,38.08l-26.55-19a6,6,0,0,0-7,0l-26.1,18.64A160.24,160.24,0,0,1,46,128ZM92,38h44.29C122.49,50.92,112.2,73.35,108,100.65L83.49,83.12a6,6,0,0,0-7,0L47.79,103.63C53.37,66.24,71.36,38,92,38Zm0,180C76.42,218,62.36,201.92,54,178l26-18.58,35.53,25.39c5.22,13.92,12.34,25.35,20.76,33.24Z"></path></svg></span><div><h3>Podvozek, brzdy a spojka</h3><ul class="ticks"><li>kompletní opravy podvozku</li>
<li>kompletní opravy brzd</li>
<li>výměna spojek a setrvačníků</li></ul></div></li>
<li><span class="svc__n">04</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M205.65,74.08A109.26,109.26,0,0,0,128,42h-.39C67.17,42.21,18,92.06,18,153.13V176a14,14,0,0,0,14,14H224a14,14,0,0,0,14-14V152A109.3,109.3,0,0,0,205.65,74.08ZM226,176a2,2,0,0,1-2,2H115.78l57.07-78.47a6,6,0,0,0-9.7-7.06L100.94,178H32a2,2,0,0,1-2-2V153.13A102.36,102.36,0,0,1,30.62,142H56a6,6,0,0,0,0-12H32.71C42.6,88.4,78.53,56.86,122,54.19V80a6,6,0,0,0,12,0V54.19A98.05,98.05,0,0,1,223.53,130H200a6,6,0,0,0,0,12h25.5c.33,3.3.5,6.64.5,10Z"></path></svg></span><div><h3>Diagnostika a elektro</h3><ul class="ticks"><li>počítačová diagnostika</li>
<li>hledání a odstranění závad</li>
<li>opravy elektroinstalace</li></ul></div></li>
<li><span class="svc__n">05</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M221.83,150.57a6,6,0,0,1-4.4,7.26l-26.62,6.54,7,26.08a6,6,0,0,1-4.24,7.35,6.4,6.4,0,0,1-1.55.2,6,6,0,0,1-5.8-4.45L178.27,164,134,138.39v51.13l22.24,22.24a6,6,0,1,1-8.48,8.48L128,200.49l-19.76,19.75a6,6,0,0,1-8.48-8.48L122,189.52V138.39L77.73,164l-7.93,29.6A6,6,0,0,1,64,198a6.4,6.4,0,0,1-1.55-.2,6,6,0,0,1-4.24-7.35l7-26.08-26.62-6.54a6,6,0,0,1,2.86-11.66l30.23,7.43L116,128,71.66,102.4l-30.23,7.43A5.88,5.88,0,0,1,40,110a6,6,0,0,1-1.43-11.83l26.62-6.54-7-26.08a6,6,0,1,1,11.59-3.1l7.93,29.6L122,117.61V66.48L99.76,44.24a6,6,0,0,1,8.48-8.48L128,55.51l19.76-19.75a6,6,0,0,1,8.48,8.48L134,66.48v51.13l44.27-25.56,7.93-29.6a6,6,0,1,1,11.59,3.1l-7,26.08,26.62,6.54A6,6,0,0,1,216,110a5.88,5.88,0,0,1-1.43-.17l-30.23-7.43L140,128l44.34,25.6,30.23-7.43A6,6,0,0,1,221.83,150.57Z"></path></svg></span><div><h3>Klimatizace</h3><ul class="ticks"><li>servis klimatizace</li>
<li>doplnění chladiva</li></ul></div></li>
<li><span class="svc__n">06</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M200,78a6,6,0,0,0,6-6,54.06,54.06,0,0,0-54-54H80A14,14,0,0,0,66,32V80a26,26,0,0,1-26,26,6,6,0,0,0,0,12A38,38,0,0,0,78,80V78h36v26.62a25.87,25.87,0,0,1-9.76,20.3l-16,12.79A37.81,37.81,0,0,0,74,167.38V224a14,14,0,0,0,14,14H192a14,14,0,0,0,14-14V211.47A268.92,268.92,0,0,0,170.57,78ZM78,32a2,2,0,0,1,2-2h72a42.06,42.06,0,0,1,41.57,36H78ZM194,211.47V224a2,2,0,0,1-2,2H88a2,2,0,0,1-2-2V167.38a25.87,25.87,0,0,1,9.76-20.3l16-12.79A37.81,37.81,0,0,0,126,104.62V78h30.64A256.84,256.84,0,0,1,194,211.47Z"></path></svg></span><div><h3>Karoserie a lakování</h3><ul class="ticks"><li>opravy a úpravy karoserie</li>
<li>drobné karosářské práce</li>
<li>lakování</li></ul></div></li>
<li><span class="svc__n">07</span><span class="ic"><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M253.57,117.78l-14-35a13.93,13.93,0,0,0-13-8.8H190V64a6,6,0,0,0-6-6H32A14,14,0,0,0,18,72V184a14,14,0,0,0,14,14H50.6a30,30,0,0,0,58.8,0h53.2a30,30,0,0,0,58.8,0H240a14,14,0,0,0,14-14V120A6,6,0,0,0,253.57,117.78ZM190,86h36.58a2,2,0,0,1,1.86,1.26L239.14,114H190ZM30,72a2,2,0,0,1,2-2H178v68H30ZM80,210a18,18,0,1,1,18-18A18,18,0,0,1,80,210Zm82.6-24H109.4a30,30,0,0,0-58.8,0H32a2,2,0,0,1-2-2V150H178v15.48A30.1,30.1,0,0,0,162.6,186ZM192,210a18,18,0,1,1,18-18A18,18,0,0,1,192,210Zm50-26a2,2,0,0,1-2,2H221.4A30.05,30.05,0,0,0,192,162c-.67,0-1.34,0-2,.07V126h52Z"></path></svg></span><div><h3>Odtah</h3><ul class="ticks"><li>v Brně zdarma při opravě u nás</li>
<li>mimo Brno sleva 30 %</li></ul></div></li>
</ol>
</div>
</section></main>
Kroky objednávky
Tři červená kolečka spojená čárkovanou linkou. Třídy: steps, steps__c, head--center.
HTML kód
<main><section class="sec">
<div class="wrap">
<div class="head head--center">
<h2>Jak to u nás probíhá</h2>
</div>
<ol class="steps">
<li>
<span class="steps__c">1</span>
<h3>Zavolejte nebo napište</h3>
<p>Popište, co autu je nebo jaký servis potřebujete, a domluvíme termín.</p>
</li>
<li>
<span class="steps__c">2</span>
<h3>Prohlédneme auto a řekneme cenu</h3>
<p>Najdeme příčinu závady a řekneme vám, co je potřeba udělat a kolik to bude stát.</p>
</li>
<li>
<span class="steps__c">3</span>
<h3>Opravíme a zavoláme vám</h3>
<p>Jakmile bude auto hotové, ozveme se. Při předání vám vysvětlíme, co jsme opravili.</p>
</li>
</ol>
</div>
</section></main>
O nás
Fotka a text vedle sebe, štítek, nadpis a obrysové tlačítko. Třídy: split, kicker.
HTML kód
<main><section class="sec sec--flush" id="o-nas">
<div class="wrap split">
<img alt="Světlá servisní hala s auty na zvedácích a mechaniky při práci" height="807" sizes="(max-width: 1000px) 100vw, 50vw" src="assets/foto/dilna-hala.webp" srcset="assets/foto/dilna-hala-900.webp 900w, assets/foto/dilna-hala.webp 1600w" width="1600"/>
<div>
<p class="kicker">O nás</p>
<h2>Autoservis na Cejlu</h2>
<p>AA SERVIS Brno je autoservis v Brně na ulici Cejl 29/76. Opravujeme osobní i užitková auta, od pravidelného servisu a výměny oleje po opravy motoru, podvozku a karoserie.</p>
<a class="btn btn--line" href="#">Kontakt a objednávka</a>
</div>
</div>
</section></main>
Jak k nám dojet
Vektorová mapa s odkazem a vedle číslované kroky s tlačítkem navigace. Třídy: area, area__map, area__info, kroky, kroky__n, kroky__pomoc.
Velký nadpis a čtyři akční řádky s číslem, poznámkou a šipkou. Třídy: endcta, endcta__head, endcta__rows, endcta__n, endcta__arr.
HTML kód
<main><section class="endcta">
<div class="wrap">
<div class="endcta__head">
<h2>Potřebujete opravit nebo zkontrolovat auto?</h2>
<p class="endcta__lead">Zavolejte nebo pošlete objednávku a domluvíme termín, kdy auto přivezete.</p>
</div>
<ul class="endcta__rows">
<li><a href="#"><span aria-hidden="true" class="endcta__n">01</span><b>Objednat servis online</b><span class="endcta__note">vyplníte formulář, ozveme se s termínem</span><svg aria-hidden="true" class="endcta__arr" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a></li>
<li><a href="#"><span aria-hidden="true" class="endcta__n">02</span><b>Odtah auta</b><span class="endcta__note">Volejte 601 339 195</span><svg aria-hidden="true" class="endcta__arr" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a></li>
<li><a href="#"><span aria-hidden="true" class="endcta__n">03</span><b>Zavolat 601 339 195</b><span class="endcta__note">pondělí až pátek 8:00-18:00</span><svg aria-hidden="true" class="endcta__arr" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a></li>
<li><a href="#" rel="noopener" target="_blank"><span aria-hidden="true" class="endcta__n">04</span><b>Přijet na Cejl 29/76</b><span class="endcta__note">Brno, navigace v Google Maps</span><svg aria-hidden="true" class="endcta__arr" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a></li>
</ul>
</div>
</section></main>
Služby
Výběr služby s fotkou
Vlevo fotka služby se štítkem, vpravo seznam služeb s nadpisem, textem a odkazem. Třídy: svc-pick, svc-pick__photo, svc-pick__cap, svc-pick__item, svc-pick__n, svc-pick__link.
HTML kód
<main><section class="sec">
<div class="wrap svc-pick">
<div class="svc-pick__stick">
<div class="svc-pick__photo">
<img alt="Mechanik doplňuje provozní kapaliny do motoru" class="is-on" data-for="servis" height="1069" sizes="45vw" src="assets/foto/motor-detail.webp" srcset="assets/foto/motor-detail-900.webp 900w, assets/foto/motor-detail.webp 1600w" width="1600"/>
<img alt="Mechanik pracuje na motoru auta" data-for="motor" height="900" sizes="45vw" src="assets/foto/motor.webp" srcset="assets/foto/motor-900.webp 900w, assets/foto/motor.webp 1600w" width="1600"/>
<img alt="Mechanici opravují podvozek auta na zvedáku" data-for="podvozek" height="900" sizes="45vw" src="assets/foto/pod-autem.webp" srcset="assets/foto/pod-autem-900.webp 900w, assets/foto/pod-autem.webp 1600w" width="1600"/>
<img alt="Počítačová diagnostika auta" data-for="diagnostika" height="1067" sizes="45vw" src="assets/foto/diagnostika.webp" srcset="assets/foto/diagnostika-900.webp 900w, assets/foto/diagnostika.webp 1600w" width="1600"/>
<img alt="Větrací mřížky klimatizace na palubní desce auta" data-for="klimatizace" height="1067" sizes="45vw" src="assets/foto/klimatizace.webp" srcset="assets/foto/klimatizace-900.webp 900w, assets/foto/klimatizace.webp 1600w" width="1600"/>
<img alt="Auto na zvedáku v dílně" data-for="karoserie" height="1067" sizes="45vw" src="assets/foto/dilna-zvedak.webp" srcset="assets/foto/dilna-zvedak-900.webp 900w, assets/foto/dilna-zvedak.webp 1600w" width="1600"/>
<img alt="Osobní auto upevněné na korbě odtahového vozu" data-for="odtah" height="1067" sizes="45vw" src="assets/foto/odtah.webp" srcset="assets/foto/odtah-900.webp 900w, assets/foto/odtah.webp 1600w" width="1600"/>
<p class="svc-pick__cap">01 · Pravidelný servis a údržba</p>
</div>
</div>
<div class="svc-pick__list">
<article class="svc-pick__item is-on" id="servis">
<div class="svc-pick__img"><img alt="Mechanik doplňuje provozní kapaliny do motoru" height="1069" sizes="100vw" src="assets/foto/motor-detail.webp" srcset="assets/foto/motor-detail-900.webp 900w, assets/foto/motor-detail.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">01</span>
<h2>Pravidelný servis a údržba</h2>
<p>Pravidelná údržba podle plánu výrobce prodlužuje životnost motoru i ostatních dílů. Před STK nebo dlouhou cestou auto zkontrolujeme, ať vás nic nepřekvapí.</p>
<ul class="ticks">
<li>běžný servis a údržba vozidel</li>
<li>výměna oleje a provozních kapalin</li>
<li>výměna filtrů</li>
<li>kontrola a příprava vozidla na STK</li>
<li>sezónní kontrola auta před delší cestou</li>
</ul>
<a class="svc-pick__link" href="#">Objednat servis<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
<article class="svc-pick__item" id="motor">
<div class="svc-pick__img"><img alt="Mechanik pracuje na motoru auta" height="900" sizes="100vw" src="assets/foto/motor.webp" srcset="assets/foto/motor-900.webp 900w, assets/foto/motor.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">02</span>
<h2>Motor, rozvody a turbo</h2>
<p>Motor ztrácí výkon, kouří nebo svítí kontrolka? Najdeme příčinu a závadu opravíme. Rozvody vyměníme podle doporučeného intervalu, dřív než prasknou.</p>
<ul class="ticks">
<li>opravy a servis motorů</li>
<li>výměna rozvodů</li>
<li>opravy a výměna turbodmychadel</li>
</ul>
<a class="svc-pick__link" href="#">Objednat opravu motoru<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
<article class="svc-pick__item" id="podvozek">
<div class="svc-pick__img"><img alt="Mechanici opravují podvozek auta na zvedáku" height="900" sizes="100vw" src="assets/foto/pod-autem.webp" srcset="assets/foto/pod-autem-900.webp 900w, assets/foto/pod-autem.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">03</span>
<h2>Podvozek, brzdy a spojka</h2>
<p>Klepe náprava, auto táhne do strany, brzdy pískají nebo spojka prokluzuje? Opravíme podvozek, brzdy i spojku, včetně výměny setrvačníku.</p>
<ul class="ticks">
<li>kompletní opravy podvozku</li>
<li>kompletní opravy brzdového systému</li>
<li>výměna spojek a setrvačníků</li>
</ul>
<a class="svc-pick__link" href="#">Objednat opravu podvozku<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
<article class="svc-pick__item" id="diagnostika">
<div class="svc-pick__img"><img alt="Počítačová diagnostika auta" height="1067" sizes="100vw" src="assets/foto/diagnostika.webp" srcset="assets/foto/diagnostika-900.webp 900w, assets/foto/diagnostika.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">04</span>
<h2>Diagnostika a elektroinstalace</h2>
<p>Rozsvítila se kontrolka nebo auto dělá něco divného? Počítačovou diagnostikou zjistíme, kde je problém, a řekneme vám, co s ním dělat.</p>
<ul class="ticks">
<li>počítačová diagnostika vozidla</li>
<li>diagnostika a odstranění závad</li>
<li>kontrola a opravy elektroinstalace vozidla</li>
<li>kontrola vozidla a řešení technických problémů</li>
</ul>
<a class="svc-pick__link" href="#">Objednat diagnostiku<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
<article class="svc-pick__item" id="klimatizace">
<div class="svc-pick__img"><img alt="Větrací mřížky klimatizace na palubní desce auta" height="1067" sizes="100vw" src="assets/foto/klimatizace.webp" srcset="assets/foto/klimatizace-900.webp 900w, assets/foto/klimatizace.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">05</span>
<h2>Klimatizace</h2>
<p>Klimatizace chladí slabě nebo nechladí vůbec? Zkontrolujeme ji a doplníme chladivo, aby v létě zase fungovala.</p>
<ul class="ticks">
<li>servis a doplnění klimatizace</li>
</ul>
<a class="svc-pick__link" href="#">Objednat servis klimatizace<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
<article class="svc-pick__item" id="karoserie">
<div class="svc-pick__img"><img alt="Auto na zvedáku v dílně" height="1067" sizes="100vw" src="assets/foto/dilna-zvedak.webp" srcset="assets/foto/dilna-zvedak-900.webp 900w, assets/foto/dilna-zvedak.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">06</span>
<h2>Karoserie a lakování</h2>
<p>Opravíme promáčklinu, odřený nárazník i rez a opravený díl přelakujeme.</p>
<ul class="ticks">
<li>opravy a úpravy karoserie</li>
<li>drobné karosářské práce a lakování</li>
</ul>
<a class="svc-pick__link" href="#">Objednat opravu karoserie<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
<article class="svc-pick__item" id="odtah">
<div class="svc-pick__img"><img alt="Osobní auto upevněné na korbě odtahového vozu" height="1067" sizes="100vw" src="assets/foto/odtah.webp" srcset="assets/foto/odtah-900.webp 900w, assets/foto/odtah.webp 1600w" width="1600"/></div>
<span class="svc-pick__n">07</span>
<h2>Odtah vozidla</h2>
<p>Auto nejede nebo s ním není bezpečné jet? Odtáhneme ho do naší dílny. V Brně je odtah zdarma, když u nás pak necháte i opravu. Mimo Brno vám při opravě u nás dáme na odtah slevu 30 %.</p>
<ul class="ticks">
<li>odtah nepojízdného auta do naší dílny</li>
<li>v Brně zdarma, když opravu uděláme u nás</li>
<li>mimo Brno sleva 30 % z ceny odtahu při opravě u nás</li>
</ul>
<a class="svc-pick__link" href="#">Zavolat kvůli odtahu<svg aria-hidden="true" viewbox="0 0 256 256"><path d="M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z"></path></svg></a>
</article>
</div>
</div>
</section></main>
Časté otázky
Rozbalovací otázky s plusem na světle šedém podkladu. Třídy: faq, faq__i, faq__a.
HTML kód
<main><section class="sec sec--sand" id="otazky">
<div class="wrap">
<div class="head head--center">
<h2>Časté otázky</h2>
</div>
<div class="faq">
<details class="faq__i">
<summary>Musím se objednat předem?</summary>
<div class="faq__a"><p>Je to lepší. Zavolejte na <a href="#">601 339 195</a> nebo pošlete <a href="#">objednávku</a> a domluvíme termín, kdy na vaše auto budeme mít čas.</p></div>
</details>
<details class="faq__i">
<summary>Opravujete i užitková auta?</summary>
<div class="faq__a"><p>Ano, opravujeme osobní i užitková auta.</p></div>
</details>
<details class="faq__i">
<summary>Dozvím se cenu předem?</summary>
<div class="faq__a"><p>Ano. Po prohlídce vám řekneme, co je potřeba opravit a kolik to bude stát. Bez vašeho souhlasu opravu nerozšiřujeme.</p></div>
</details>
<details class="faq__i">
<summary>Kdy máte otevřeno?</summary>
<div class="faq__a"><p>Pondělí až pátek od 8:00 do 18:00. O víkendu máme zavřeno.</p></div>
</details>
<details class="faq__i">
<summary>Odtáhnete mi nepojízdné auto?</summary>
<div class="faq__a"><p>Ano. V Brně je odtah zdarma, když opravu uděláme u nás. Mimo Brno vám při opravě u nás dáme slevu 30 % z ceny odtahu. Zavolejte na <a href="#">601 339 195</a> a domluvíme se.</p></div>
</details>
</div>
</div>
</section></main>
Kontakt
Kontaktní údaje
Adresa, otevírací doba a provozovatel s červenými ikonami. Třídy: contact-list, contact-item, firm.
Formulář s grafitovým titulkem, poli, štítky služeb a červeným tlačítkem. Třídy: form__title, field, field-row, chips, chip, legal.
HTML kód
<main><section class="sec" id="poptavka"><div class="wrap contact-grid"><div><form data-poptavka="">
<h2 class="form__title">Objednávka servisu</h2>
<p class="form__err" data-err="" hidden="" role="alert">Objednávku se nepodařilo odeslat. Zkontrolujte prosím údaje nebo nám zavolejte na 601 339 195.</p>
<div class="field">
<label for="f-jmeno">Jméno a příjmení</label>
<input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="f-jmeno" maxlength="200" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="field-row">
<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="Zadejte telefon, např. 777 123 456 nebo +420 777 123 456." id="f-telefon" maxlength="40" 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="Zadejte e-mail ve tvaru jmeno@domena.cz." id="f-email" maxlength="200" name="email" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
</div>
<div class="field-row">
<div class="field">
<label for="f-auto">Auto</label>
<input id="f-auto" maxlength="120" name="auto" placeholder="např. Škoda Octavia, 2015" type="text"/>
</div>
<div class="field">
<label for="f-termin">Kdy se vám hodí přijet</label>
<input aria-describedby="f-termin-err" data-msg-format="Vyberte datum od zítřka." id="f-termin" name="termin" type="date"/>
<p class="field__err" hidden="" id="f-termin-err"></p>
</div>
</div>
<fieldset class="field chips">
<legend>Co potřebujete <small>vyberte jednu nebo víc služeb</small></legend>
<div class="chips__list">
<label class="chip"><input name="sluzba[]" type="checkbox" value="servis"/><span>Pravidelný servis a údržba</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="oprava"/><span>Oprava nebo závada</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="diagnostika"/><span>Diagnostika</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="klimatizace"/><span>Klimatizace</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="stk"/><span>Příprava na STK</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="karoserie"/><span>Karoserie a lakování</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="odtah"/><span>Odtah vozidla</span></label>
<label class="chip"><input name="sluzba[]" type="checkbox" value="jine"/><span>Něco jiného</span></label>
</div>
</fieldset>
<div class="field">
<label for="f-zprava">Co je potřeba udělat</label>
<textarea aria-describedby="f-zprava-err" data-msg="Napište, co je potřeba udělat." id="f-zprava" maxlength="5000" name="zprava" required="" rows="4"></textarea>
<p class="field__err" hidden="" id="f-zprava-err"></p>
</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=""/>
<input name="jazyk" type="hidden" value="cs"/>
<button class="btn btn--primary" type="submit">Odeslat objednávku</button>
<p class="legal">Údaje použijeme jen k vyřízení objednávky. Podrobnosti najdete na stránce <a href="#">Zpracování osobních údajů</a>.</p>
</form></div></div></section></main>
Stavy formuláře
Chyba pole, chyba formuláře, zaškrtnutý štítek a poděkování po odeslání. Třídy: field__err, form__err, chip, dik.
HTML kód
<div style="padding:24px;max-width:520px;display:grid;gap:16px"><div class="field" style="margin:0"><label>Telefon</label><input aria-invalid="true" type="tel" value="12"/><p class="field__err">Zadejte telefon, např. 777 123 456.</p></div><p class="form__err" style="margin:0">Objednávku se nepodařilo odeslat. Zkontrolujte údaje.</p><div class="chips__list"><label class="chip"><input checked="" type="checkbox"/><span>Diagnostika</span></label><label class="chip"><input type="checkbox"/><span>Klimatizace</span></label></div><div class="dik" style="display:block"><h2>Děkujeme, objednávku máme</h2><p>Ozveme se vám co nejdřív.</p></div></div>
Ostatní
Stránka 404
Tmavý blok s blikající kontrolkou motoru a krátkou zprávou. Třídy: e404, e404__lamp, e404__glow, e404__lead.
HTML kód
<main><section class="e404">
<div class="wrap e404__in">
<div aria-hidden="true" class="e404__lamp"><span class="e404__glow"></span><svg aria-hidden="true" viewbox="0 0 256 256"><path d="M240,106H226.49L190.58,70.1a13.9,13.9,0,0,0-9.89-4.1H138V38h26a6,6,0,0,0,0-12H100a6,6,0,0,0,0,12h26V66H64A14,14,0,0,0,50,80v54H22V108a6,6,0,0,0-12,0v64a6,6,0,0,0,12,0V146H50v22.69a13.9,13.9,0,0,0,4.1,9.89L93.42,217.9a13.9,13.9,0,0,0,9.89,4.1h77.38a13.9,13.9,0,0,0,9.89-4.1L226.49,182H240a14,14,0,0,0,14-14V120A14,14,0,0,0,240,106Zm2,62a2,2,0,0,1-2,2H224a6,6,0,0,0-4.24,1.76L182.1,209.42a2,2,0,0,1-1.41.58H103.31a2,2,0,0,1-1.41-.58L62.58,170.1a2,2,0,0,1-.58-1.41V80a2,2,0,0,1,2-2H180.69a2,2,0,0,1,1.41.58l37.66,37.66A6,6,0,0,0,224,118h16a2,2,0,0,1,2,2Z"></path></svg><b>Chyba 404</b></div>
<div>
<p class="kicker">Svítí kontrolka</p>
<h1>Tahle stránka je zrovna v servisu</h1>
<p class="e404__lead">Odkaz je možná starý nebo je v adrese překlep. Diagnostika ukazuje, že všechno ostatní funguje.</p>
</div>
</div>
</section></main>
Právní text
Dlouhý text právní stránky ve sloupci 900 px pod úzkým úvodem. Třída: sec.
HTML kód
<main><section class="sec">
<div class="wrap">
<div class="faq">
<details class="faq__i">
<summary>Kdo vaše údaje zpracovává?</summary>
<div class="faq__a"><p>Správcem je NAJKARA s.r.o., U Červeného mlýna 64/1, 612 00 Brno, IČO: 30049261, provozovatel autoservisu AA SERVIS Brno na ulici Cejl 29/76 v Brně.</p></div>
</details>
<details class="faq__i">
<summary>Jaké údaje o vás zpracováváme?</summary>
<div class="faq__a">
<ul>
<li>jméno a příjmení, telefon a e-mail,</li>
<li>z objednávky údaje o autě, požadované služby, termín a popis závady,</li>
<li>údaje potřebné k zakázce a k vystavení faktury.</li>
</ul>
</div>
</details>
<details class="faq__i">
<summary>Proč a na jakém základě?</summary>
<div class="faq__a"><p>Abychom mohli domluvit termín, opravit auto, vystavit fakturu a případně hájit svá práva. Právním základem je plnění smlouvy a jednání o ní podle čl. 6 odst. 1 písm. b) obecného nařízení o ochraně osobních údajů (nařízení EU 2016/679, GDPR), u účetních dokladů plnění právní povinnosti podle písm. c) a při ochraně našich práv oprávněný zájem podle písm. f).</p></div>
</details>
<details class="faq__i">
<summary>Co se děje s objednávkou z webu?</summary>
<div class="faq__a"><p>Přijde nám e-mailem a použijeme ji jen k domluvě termínu a opravy. Po odeslání vám pošleme potvrzení na e-mail.</p></div>
</details>
<details class="faq__i">
<summary>Komu údaje předáváme?</summary>
<div class="faq__a"><p>Jen zpracovatelům, se kterými máme uzavřenou smlouvu o zpracování osobních údajů, například externímu dodavateli správy webu a účetní kanceláři. Údaje neprodáváme a nepředáváme je k reklamním účelům.</p></div>
</details>
<details class="faq__i">
<summary>Jak dlouho údaje uchováváme?</summary>
<div class="faq__a"><p>Objednávky, ze kterých nevznikla zakázka, mažeme nejpozději do jednoho roku. Údaje k zakázkám a fakturám uchováváme po dobu, kterou ukládá zákon, u účetních dokladů 10 let.</p></div>
</details>
<details class="faq__i">
<summary>Používá web cookies?</summary>
<div class="faq__a"><p>Ne. Web nepoužívá sledovací ani reklamní cookies, analytické nástroje ani cizí měřicí skripty. Víc na stránce <a href="#">Cookies</a>.</p></div>
</details>
<details class="faq__i">
<summary>Jaká máte práva?</summary>
<div class="faq__a">
<ul>
<li>zjistit, jaké údaje o vás zpracováváme, a dostat jejich kopii,</li>
<li>nechat je opravit nebo doplnit,</li>
<li>požádat o jejich výmaz nebo omezení zpracování,</li>
<li>vznést námitku proti zpracování,</li>
<li>podat stížnost u Úřadu pro ochranu osobních údajů nebo se obrátit na soud.</li>
</ul>
<p>Svá práva uplatníte telefonicky na <a href="#">601 339 195</a>, e-mailem na <a href="#">info@aaservisbrno.cz</a> nebo osobně v servisu. Kontakty na úřad najdete na <a href="#" rel="noopener" target="_blank">uoou.gov.cz</a>.</p>
</div>
</details>
</div>
</div>
</section></main>
