HARTOP

Topení, plyn, voda a koupelny pro domácnosti i firmy v Moravskoslezském kraji. K tomu klimatizace, rekuperace a solární ohřev.

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

Barvy

Značková barva je oranžová #f60 (odkazy, značky seznamů, ikony, aktivní štítky) a červená #f00. Spolu tvoří přechod linear-gradient(90deg,#f60 0%,#f00 100%).
Přechod patří na plná tlačítka btn--plne, na pás s výzvou bgr-af4471, na pás s formulářem bgr-edbbce, na kolečka s čísly a na velké číslo hodnocení. Nikde jinde.
Text je černý #000, popisy #333, drobný text #555, nenápadné popisky #6d6d6d. Podklad stránky je bílý, střídavé sekce #f4f4f4, patička #f0f0f0.
Zelený přechod #51b948 do #c3cf22 mají jen stránky o dotacích (kolečka a štítek aktualizace).
Linky a okraje karet jsou šedé: #e3e3e3 karty, #e0e0e0 dělicí linky, #bfbfbf pole formuláře.

Písmo

Základ je Roboto, tělo 15 px, odstavce 17 px s řádkováním 1.8. Raleway 200 a 700 se používá jen u nápisu HAR TOP na stránce O firmě (ff-raleway).
Nadpisy jsou lehké: h1 50 px váha 300, h2 32 px váha 300, h3 26 px váha 500. V úvodu služeb a na přehledu služeb je h1 56 px váha 300.
Nadpis úvodu a výrazné titulky mají třídu nadpis-oranzovy (oranžová, váha 600).
Štítek nad nadpisem sekce je lp-stitek: oranžová, 14 px, váha 900, verzálky, letter-spacing:1px.
Tlačítka a menu jsou verzálky, váha 500 až 600.

Rozvržení

Obsah drží kontejner w o šířce 750, 970, 1170, 1280 a od 1440 px 1400 px, s postranním odsazením 15 px. Sloupce c mají mezeru 15 px.
Sekce služeb lp-sekce mají odsazení 100 px shora i zdola, na telefonu 65 px. Střídají bílé pozadí a lp-sekce--seda.
Mřížky: rz-g a lp-problemy po třech, lp-cinnosti a cinnosti po dvou, mezera 20 až 40 px. Na tabletu dva sloupce, na telefonu jeden.
Hlavička hdr je pevná, bílá, s jemným stínem. Menu napravo, telefon a tlačítko Rychlá poptávka. Pod 992 px vyjede celoobrazovkové menu s přechodem.

Tvary a obrázky

Karty, tlačítka, pásy i úvod jsou hranaté, bez zaoblení. Zaoblení mají jen pole formuláře 6 px, karta recenze 10 px, štítky a filtry 999 px a kolečka 50 %.
Stíny jen jako jemný náznak při najetí na kartu (0 10px 30px rgba(0,0,0,.06)). Hlavička má 0 2px 12px rgba(0,0,0,.08).
Fotky jsou velké a reálné (kotelny, montáže), v kartách rz-d s tmavým přechodem dole a bílým textem. Úvod s fotkou má tmavou vrstvu 50 až 72 %.
Ikony jsou čárové SVG, tah 1.6 až 2 px, zaoblené konce, oranžové. Odrážky seznamů jsou oranžové zatržítko.

Tlačítka

Hlavní akce je btn btn--plne (bílý text na přechodu, při najetí se vybarví do obrysu). Doplňková je btn--obrys, na barevném pásu btn--bile.
Tlačítka mají odsazení 20 px 40 px, verzálky, váha 600 a žádné zaoblení. V pásu s výzvou je jedno tlačítko.
Odkaz v textu je tmavý a podtržený tenkou čárou (text-underline-offset:3px), při najetí podtržení zmizí.

Jazyk

Čeština, tykání ne, vykání ano. Za jednopísmennými předložkami je nezlomitelná mezera ( ).
Texty jsou věcné: co firma dělá, kde a s jakým oprávněním. Telefon je vždy vidět, číslo 602 788 409 s nezlomitelnými mezerami.
Slovo komplexní se nepoužívá. Říká se topení, ne vytápění.

Barvy

Značka

--oranzova (#f60)#ff6600Odkazy, ikony, odrážky, aktivní štítky, začátek přechodu.

--cervena (#f00)#ff0000Konec přechodu na tlačítkách a pásech.

přechod značkylinear-gradient(90deg,#f60 0%,#f00 100%)Plná tlačítka, pás s formulářem, menu na telefonu, kolečka s čísly.

světlá oranžová#f9a066Čárkované spojnice kroků.

Text

černá#000000Tělo textu, nadpisy, nabídka.

text popisů#333333Odstavce v kartách a sekcích služeb.

drobný text#555555Perex, datum, patička dole, poznámka u formuláře.

popisky#6d6d6dNadpis Další služby, popisek Pokračovat.

datum#898989Datum ve výpisu článků.

Plochy

bílá#ffffffPodklad stránky, karet, hlavičky a formulářů.

šedá plocha#f4f4f4Střídavé sekce lp-sekce--seda, řešení v okně.

patička#f0f0f0Podklad patičky.

karta recenze#f5f7f6Podklad karty Google recenze.

Linky

okraj karty#e3e3e3Rámeček karet služeb, čísel a odkazu na službu.

dělicí linka#e0e0e0Linky v článcích, FAQ a výpisu.

okraj štítku#d9d9d9Obrys štítků a filtru, při najetí #8c8c8c.

okraj pole#bfbfbfRámeček polí formuláře, při zaměření #636363.

Stavy

chyba#d63637Chybná pole a text chyby.

podklad chyby#fbeaeaHláška o neodeslaném formuláři.

Dotace

zelená dotací#51b948Začátek zeleného přechodu na stránce Dotace.

žlutozelená dotací#c3cf22Konec zeleného přechodu na stránce Dotace.

Typografie

Rozměry

Mezery a šířky

Název	Hodnota	Použití
`kontejner .w`	750 / 970 / 1170 / 1280 / 1400px	Šířka obsahu od 768, 992, 1200, 1310 a 1440 px, odsazení 15 px.
`mezera sloupců`	15px	Odsazení .c, mřížky rz-g mají 20 px, lp-problemy 30 px.
`sekce služeb`	100px 0	Odsazení lp-sekce, na telefonu 65 px.
`tlačítko`	20px 40px	Odsazení .btn, v hlavičce 9px 22px.
`hlavička`	85px	Výška hdr-obal, na tabletu 65 px, na telefonu 58 px.

Rádiusy

Název	Hodnota	Použití
`hranaté`	0	Karty, tlačítka, pásy, úvod a fotky.
`pole formuláře`	6px	Input, výběry, víceřádková pole, výběr služeb.
`karta recenze`	10px	grw__r.
`štítky a filtr`	999px	lp-stitky, ref__filtr.
`kolečka`	50%	Čísla kroků, iniciály recenzentů, ikony výzvy.

Značka a obrazové prvky

Logo HARTOP

Komponenty

Navigace

Hlavička

Bílá hlavička s logem, menu, telefonem a tlačítkem Rychlá poptávka. Na webu je pevná. Třídy: hdr, hdr__in, hdr__logo, nav, hdr__tel, hdr__btn.

HTML kód

<div class="hdr-obal">
<header class="hdr">
<div class="hdr__in">
<a aria-current="page" class="hdr__logo" href="#"><img alt="HARTOP" height="25" src="assets/foto/logo-hartop.svg" width="145"/></a>
<nav aria-label="Hlavní menu" class="nav">
<ul>
<li><a href="#">Služby</a>
<ul class="nav__sub">
<li><a href="#">Topení</a></li>
<li><a href="#">Tepelná čerpadla</a></li>
<li><a href="#">Plynoinstalace</a></li>
<li><a href="#">Voda a kanalizace</a></li>
<li><a href="#">Koupelny</a></li>
<li><a href="#">Klimatizace a solární ohřev</a></li>
</ul>
</li>
<li><a href="#">Realizace</a></li>
<li><a href="#">Aktuálně</a></li>
<li><a href="#">O firmě</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<a aria-label="Zavolat 602 788 409" class="hdr__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>602 788 409</span></a>
<a class="btn btn--plne hdr__btn" href="#">Rychlá poptávka</a>
<button aria-controls="mm" aria-expanded="false" class="mm-tl" type="button"><span class="mm-tl__t">MENU</span><span class="mm-tl__t mm-tl__t--z">ZAVŘÍT</span><span aria-hidden="true" class="mm-tl__cary"><i></i><i></i><i></i></span></button>
</div>
</header>
</div>

Menu s podmenu

Hlavní menu s rozbaleným podmenu Služeb. Podmenu se na webu otevírá najetím. Třídy: nav, nav__sub.

HTML kód

<div class="hdr-obal"><header class="hdr"><div class="hdr__in"><nav aria-label="Hlavní menu" class="nav">
<ul>
<li><a href="#">Služby</a>
<ul class="nav__sub">
<li><a href="#">Topení</a></li>
<li><a href="#">Tepelná čerpadla</a></li>
<li><a href="#">Plynoinstalace</a></li>
<li><a href="#">Voda a kanalizace</a></li>
<li><a href="#">Koupelny</a></li>
<li><a href="#">Klimatizace a solární ohřev</a></li>
</ul>
</li>
<li><a href="#">Realizace</a></li>
<li><a href="#">Aktuálně</a></li>
<li><a href="#">O firmě</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav></div></header></div>

Patička

Šedá patička s popisem, odkazy, adresou a telefonem. Třídy: ftr, ftr__top, ftr__brand, ftr__tel, ftr__bottom, ftr__legal.

HTML kód

<footer class="ftr">
<div class="w">
<div class="ftr__top">
<div class="ftr__brand">
<a aria-current="page" href="#"><img alt="HARTOP" height="25" src="assets/foto/logo-hartop.svg" width="145"/></a>
<p>Topení, plynoinstalace, voda a kanalizace pro rodinné a bytové domy, firmy i průmysl v Krnově a celém Moravskoslezském kraji.</p>
</div>
<ul>
<li><a href="#">Služby</a></li>
<li><a href="#">Realizace</a></li>
<li><a href="#">Aktuálně</a></li>
<li><a href="#">O firmě</a></li>
<li><a href="#">Dotace z EU</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Rychlá poptávka</a></li>
</ul>
<ul>
<li>Pavel Harnol - Hartop</li>
<li>Bezručova 2320/2A</li>
<li>794 01 Krnov</li>
<li><a href="#" rel="noopener" target="_blank">Zobrazit na mapě</a></li>
</ul>
<div>
<a class="ftr__tel" href="#">602 788 409</a>
<ul>
<li><a href="#">554 615 872</a></li>
<li><a href="#">info@hartop.cz</a></li>
</ul>
</div>
</div>
<div class="ftr__bottom">
<span>© 1993 - <span data-rok="">2026</span> Pavel Harnol - Hartop, IČO 12668079, <span class="ftr__credit">design <a href="#" rel="noopener" target="_blank">KACER STUDIO</a></span></span>
<span class="ftr__legal"><a href="#">Osobní údaje</a><a href="#">Cookies</a></span>
</div>
</div>
</footer>

Úvod

Úvod s kartami činností

Oranžový nadpis, perex a dvě karty s fotkou, popisem a odrážkami. Třídy: nadpis-oranzovy, uv-perex, cinnosti, cinnost cinnost--uvod, rz-d, lp-dalsi.

HTML kód

<main class="obsah" id="obsah"><section class="r pt8vh pb20">
<div class="w"><div class="g">
<div class="c">
<div class="tx mb25"><h1 class="nadpis-oranzovy">Topení a plynoinstalace pro domácnosti i firmy</h1></div>
<div class="tx mb35 uv-perex"><p>Navrhujeme, montujeme a servisujeme topení i rozvody plynu v Krnově a celém Moravskoslezském kraji. Pracujeme pro rodinné a bytové domy, firmy i průmyslové objekty.</p></div>
<div class="cinnosti">
<article class="cinnost cinnost--uvod"><a class="rz-d uv-obr" href="#"><img alt="" fetchpriority="high" height="1080" src="assets/foto/sluzby/kotel-buderus.webp" width="1920"/><span class="rz-d__n">Topení</span><span class="rz-d__t">Navrhneme topení podle vašeho domu, bytu nebo provozu a postaráme se o montáž i pravidelný servis.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a><div class="tx cinnost__tx"><ul><li>Plynové kondenzační kotle Buderus a kotelny</li><li>Tepelná čerpadla NIBE</li><li>Podlahové topení Giacomini se zárukou 25 let</li><li>Strojní čištění topných systémů</li></ul></div></article>
<article class="cinnost cinnost--uvod"><a class="rz-d uv-obr" href="#"><img alt="" height="768" src="assets/foto/sluzby/plyn-hero-technik.webp" style="object-position:85% 50%" width="1920"/><span class="rz-d__n">Plynoinstalace</span><span class="rz-d__t">Jako jedni z mála máme vše, co plynařské práce vyžadují: oprávnění organizace i osvědčení pracovníků od Technické inspekce ČR.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a><div class="tx cinnost__tx"><ul><li>Rozvody plynu od přípojky po spotřebič</li><li>Páteřní rozvody v bytových domech</li><li>Plynovody pro firmy, provozovny i průmysl</li><li>Tlakové zkoušky a revizní zprávy</li></ul></div></article>
</div>
<div class="lp-dalsi uv-dalsi"><p class="lp-dalsi__nadpis">Další služby</p><ul class="lp-stitky"><li><a href="#">Tepelná čerpadla</a></li><li><a href="#">Voda a kanalizace</a></li><li><a href="#">Koupelny</a></li><li><a href="#">Klimatizace a solární ohřev</a></li></ul></div>
</div>
</div></div>
</section></main>

Úvod služby

Fotka s tmavým přechodem, nadpis 56 px, perex, dvě tlačítka a bílý pruh s oprávněním. Třídy: lp-hero, lp-hero__tx, lp-perex, lp-hero__cta, lp-pruh.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full lp-hero" style='--lp-hero:url("assets/foto/sluzby/klima-hero.webp")'>
<div class="w">
<div class="lp-hero__tx">
<p class="lp-stitek lp-stitek--bily">Služby</p>
<h1>Klimatizace, rekuperace a solární ohřev v Moravskoslezském kraji</h1>
<p class="lp-perex">Klimatizace pro jednu místnost, celý dům i firmu nebo halu. Větrání s rekuperací a solární systémy pro ohřev vody, přitápění i bazén pro domácnosti i firmy.</p>
<div class="lp-hero__cta"><a class="btn btn--plne" href="#">Nezávazná poptávka</a></div>
<p class="lp-hero__tel">nebo volejte <a href="#">+420 602 788 409</a></p>
</div>
<div class="lp-pruh"><svg aria-hidden="true" viewbox="0 0 48 48"><circle cx="24" cy="24" r="8"></circle><path d="M24 4v6M24 38v6M4 24h6M38 24h6M9.9 9.9l4.2 4.2M33.9 33.9l4.2 4.2M9.9 38.1l4.2-4.2M33.9 14.1l4.2-4.2"></path></svg><span><b>Solární systémy všech značek</b><small>montáž i servis pro rodinné domy i průmyslové objekty</small></span></div>
</div>
</section></main>

Úvod přehledu služeb

Vystředěný nadpis 56 px a perex na bílém pozadí. Třídy: rz-hl, rz-hl__in.

HTML kód

<main class="obsah" id="obsah"><section class="r rz-hl">
<div class="w">
<div class="rz-hl__in">
<p class="lp-stitek">Služby</p>
<h1>Topení, plyn, voda a koupelny</h1>
<p>Navrhneme, namontujeme a postaráme se o servis. Pro rodinné a bytové domy, firmy i průmysl v celém Moravskoslezském kraji.</p>
</div>
</div>
</section></main>

Úvod s fotkou

Pás s fotkou ztmavenou o 50 % a bílým nadpisem. Třídy: r--full, bgr-realizace, bgr-aktualne, bgr-5c7112.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full bgr-realizace">
<div class="w"><div class="g">
<div class="c w16_6667 p-w100 ta-c cpt35 p-mh50 c--mid">
<div class="c__in">
</div>
</div>
<div class="c w66_6667 p-w100 ta-c c--fill">
<div class="c__in cptp20 cpr15 cpbp20 cpl15 c--mid">
<div class="tx mb-10"><h1><span class="co-ffffff">Vybrané realizace</span></h1></div>
<div class="tx mb-10 tpt40 tpb30"><h4><span class="text-vetsi co-ffffff">Prohlédněte si ukázky naší práce: kotelny, tepelná čerpadla, podlahové topení, chlazení hal i opravy po povodni.</span></h4></div>
</div>
</div>
<div class="c w16_6667 p-w100 cpt35 p-mh50 c--mid">
<div class="c__in">
</div>
</div>
</div></div>
</section></main>

Prvky

Tlačítka

Plné tlačítko s přechodem je hlavní akce, obrysové doplňkové, bílé je pro barevné pásy. Třídy: btn btn--plne, btn btn--obrys, btn btn--bile.

HTML kód

<div style="display:flex;flex-wrap:wrap;gap:14px;padding:30px"><a class="btn btn--plne" href="#">Nezávazná poptávka</a><a class="btn btn--obrys" href="#">Realizace</a><span style="display:inline-block;padding:0 0"><a class="btn btn--bile" href="#" style="background:linear-gradient(90deg,#f00 0%,#f60 60%)">Poptat plynoinstalaci</a></span></div>

Štítky služeb

Obrysové štítky odkazů na další služby. Třídy: lp-dalsi, lp-dalsi__nadpis, lp-stitky.

HTML kód

<main class="obsah" id="obsah"><section class="r pt8vh pb20"><div class="w"><div class="g"><div class="c"><div class="lp-dalsi uv-dalsi"><p class="lp-dalsi__nadpis">Další služby</p><ul class="lp-stitky"><li><a href="#">Tepelná čerpadla</a></li><li><a href="#">Voda a kanalizace</a></li><li><a href="#">Koupelny</a></li><li><a href="#">Klimatizace a solární ohřev</a></li></ul></div></div></div></div></section></main>

Filtr realizací

Kulaté štítky filtru, aktivní je plný oranžový. Třídy: ref__filtr, is-akt.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full r--fullc pt60 pb60"><div class="g"><div class="c w83_3333 p-w100 ta-c"><div class="mb35"><div class="ref"><ul class="ref__filtr"><li><a aria-current="true" class="is-akt" data-term="*" href="#">Vše</a></li>
<li><a data-term="kotle" href="#">Kotle</a></li>
<li><a data-term="plyn" href="#">Plyn</a></li>
<li><a data-term="plynoinstalace" href="#">Plynoinstalace</a></li>
<li><a data-term="tepelna-cerpadla" href="#">Tepelná čerpadla</a></li>
<li><a data-term="vetrani-a-klimatizace" href="#">Větrání a klimatizace</a></li>
<li><a data-term="voda" href="#">Voda</a></li>
<li><a data-term="vytapeni" href="#">Topení</a></li></ul></div></div></div></div></section></main>

Sekce

Karty služeb s fotkou

Mřížka tří karet s fotkou, tmavým přechodem, bílým textem a šipkou. Třídy: rz-sek, rz-g, rz-d, rz-d__n, rz-d__t, rz-d__sipka.

HTML kód

<main class="obsah" id="obsah"><section class="r rz-sek rz-sek--uvod">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">Služby</p><h2>Nejčastěji řešíme</h2></div>
<div class="rz-g">
<a class="rz-d" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-topeni.webp" width="920"/><span class="rz-d__n">Topení</span><span class="rz-d__t">Nové topení, výměna kotle, podlahové topení a strojní čištění topných systémů. Montáž i pravidelný servis.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="rz-d" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-tepelna-cerpadla.webp" width="920"/><span class="rz-d__n">Tepelná čerpadla</span><span class="rz-d__t">Tepelná čerpadla NIBE pro topení i ohřev vody. Posoudíme, jestli se vám vyplatí, navrhneme výkon a postaráme se o servis.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="rz-d" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-plynoinstalace.webp" width="920"/><span class="rz-d__n">Plynoinstalace</span><span class="rz-d__t">Rozvody plynu od přípojky po spotřebič s oprávněním TIČR. Ke každé zakázce tlaková zkouška a revizní zpráva.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="rz-d" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-voda-a-kanalizace.webp" width="920"/><span class="rz-d__n">Voda a kanalizace</span><span class="rz-d__t">Rozvody pitné, užitkové i požární vody, úprava a dezinfekce vody, kanalizace a vnitřní odpady.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="rz-d" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-koupelny.webp" width="920"/><span class="rz-d__n">Koupelny</span><span class="rz-d__t">Koupelny na klíč s návrhem a vizualizací. Obklady Ceramica Aparici z vlastního dovozu, rozvody dělají naši instalatéři.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<a class="rz-d" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-klimatizace-a-solarni-ohrev.webp" width="920"/><span class="rz-d__n">Klimatizace a solární ohřev</span><span class="rz-d__t">Klimatizace pro byt, dům i firmu, větrání s rekuperací a solární ohřev vody včetně servisu.</span><span aria-hidden="true" class="rz-d__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
</div>
</div>
</section></main>

Fotopás s nadpisem

Pás s fotkou ztmavenou o 15 % a velkým bílým nadpisem. Třídy: r--full, bgr-c2c170, co-ffffff.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full bgr-c2c170">
<div class="w"><div class="g">
<div class="c w58_3333 m-w100 t-w75 p-w100 c--fill">
<div class="c__in cptp40 cpr15 cpbp40 cpl15 mb50 c--mid">
<div class="tx mb-10"><h2 class="h1"><span class="co-ffffff">25 let inovací v oblasti topení, plynoinstalace a vody</span></h2></div>
</div>
</div>
<div class="c m-h t-h p-h w41_6667 c--stred ta-c cpt35 c--mid">
<div class="c__in">
</div>
</div>
</div></div>
</section></main>

Karty problémů

Mřížka karet s ikonou, nadpisem a odkazem, které otevřou okno s řešením. Třídy: lp-sekce, lp-hlava, lp-problemy, lp-problem, lp-odkaz.

HTML kód

<main class="obsah" id="obsah"><section class="r lp-sekce">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">S čím vám pomůžeme</p><h2>Co řešíte?</h2></div>
<div class="lp-problemy">
<a class="lp-problem" data-dlg="dlg-mistnost" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><circle cx="24" cy="24" r="8"></circle><path d="M24 4v6M24 38v6M4 24h6M38 24h6M9.9 9.9l4.2 4.2M33.9 33.9l4.2 4.2M9.9 38.1l4.2-4.2M33.9 14.1l4.2-4.2"></path></svg>
<h3>V ložnici nebo pracovně je v létě horko</h3>
<p>Namontujeme klimatizační jednotku pro jednu místnost.</p>
<span class="lp-odkaz"><span>Klimatizace do místnosti</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-dum" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><path d="M5 22 24 7l19 15"></path><path d="M10 18v24h28V18"></path><path d="M18 27h12M18 33h12"></path></svg>
<h3>Chci chladit celý byt nebo dům</h3>
<p>Navrhneme klimatizaci pro celou domácnost, ne jen pro jednu místnost.</p>
<span class="lp-odkaz"><span>Klimatizace pro domácnost</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-firma" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><path d="M4 42V24l10 6v-6l10 6v-6l10 6V8h8v34z"></path><path d="M11 36h4M21 36h4M31 36h4"></path></svg>
<h3>Ve firmě nebo v hale je v létě horko</h3>
<p>Klimatizujeme komerční i průmyslové budovy. Chlazení průmyslové haly máme za sebou i v Krnově.</p>
<span class="lp-odkaz"><span>Klimatizace pro firmy</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-vzduch" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><rect height="36" rx="2" width="32" x="8" y="6"></rect><path d="M24 6v36M8 24h32"></path><path d="M14 14h4M30 14h4"></path></svg>
<h3>Po výměně oken je doma vydýchaný vzduch</h3>
<p>Těsná okna a dveře nepustí dovnitř čerstvý vzduch. Pomůže lokální větrací jednotka.</p>
<span class="lp-odkaz"><span>Lokální větrání</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-rekuperace" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><path d="M4 16h26a5 5 0 1 0-5-5"></path><path d="M4 24h34a5 5 0 1 1-5 5"></path><path d="M4 32h18a4 4 0 1 1-4 4"></path></svg>
<h3>Stavím dům a chci větrání s rekuperací</h3>
<p>Instalujeme rekuperační jednotky i vzduchotechnické potrubí pro rozvod vzduchu.</p>
<span class="lp-odkaz"><span>Větrání s rekuperací</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-voda" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><path d="M6 40 14 18h28l-8 22z"></path><path d="M10 29h28M20 18l-4 22M30 18l-4 22"></path><path d="M14 4v4M6 9l3 3M22 9l-3 3"></path></svg>
<h3>Chci ohřívat vodu sluncem</h3>
<p>Solární systém ohřeje vodu a může i přitápět. Pro rodinné domy i průmyslové objekty.</p>
<span class="lp-odkaz"><span>Solární ohřev vody</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-bazen" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><path d="M4 30c3-3 6-3 9 0s6 3 9 0 6-3 9 0 6 3 9 0"></path><path d="M4 38c3-3 6-3 9 0s6 3 9 0 6-3 9 0 6 3 9 0"></path><path d="M16 26V8a4 4 0 0 1 8 0M30 26V8a4 4 0 0 1 8 0M16 14h14M16 20h14"></path></svg>
<h3>Chci ohřívat bazén sluncem</h3>
<p>Solární systém namontujeme i pro ohřev bazénu.</p>
<span class="lp-odkaz"><span>Ohřev bazénu</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-servis" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><path d="M14 20h6v-6l-7-7a12 12 0 0 1 16 16l12 12a4 4 0 0 1-6 6l-12-12a12 12 0 0 1-16-16l7 7"></path></svg>
<h3>Solární systém potřebuje servis</h3>
<p>Servisujeme solární systémy všech typů a značek.</p>
<span class="lp-odkaz"><span>Servis solárních systémů</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
<a class="lp-problem" data-dlg="dlg-dotace" href="#">
<svg aria-hidden="true" class="lp-problem__ikona" viewbox="0 0 48 48"><ellipse cx="24" cy="10" rx="14" ry="5"></ellipse><path d="M10 10v9c0 2.8 6.3 5 14 5s14-2.2 14-5v-9"></path><path d="M10 19v9c0 2.8 6.3 5 14 5s14-2.2 14-5v-9"></path><path d="M10 28v9c0 2.8 6.3 5 14 5s14-2.2 14-5v-9"></path></svg>
<h3>Chci na solární ohřev dotaci</h3>
<p>Poradíme s dotací z programu Nová zelená úsporám a pomůžeme s jejím vyřízením.</p>
<span class="lp-odkaz"><span>Dotace</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</a>
</div>









</div>
</section></main>

Karty činností

Dvě karty s fotkou, popisem a zatržítkovým seznamem na šedé sekci. Třídy: lp-sekce--seda, lp-cinnosti, cinnost, lp-cinnost__popis.

HTML kód

<main class="obsah" id="obsah"><section class="r lp-sekce lp-sekce--seda">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">Co pro vás uděláme</p><h2>Chlazení, větrání a ohřev vody sluncem</h2></div>
<div class="cinnosti lp-cinnosti">
<article class="cinnost" id="klimatizace-domy"><div class="cinnost__obr"><img alt="Nástěnná klimatizační jednotka Buderus Logacool nad pohovkou v obývacím pokoji" height="768" sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 680px" src="assets/foto/sluzby/klima-byt-dum-900.webp" srcset="assets/foto/sluzby/klima-byt-dum-900.webp 900w, assets/foto/sluzby/klima-byt-dum.webp 1365w" width="1365"/></div><div class="tx cinnost__tx"><h3>Klimatizace do bytu a domu</h3><p class="lp-cinnost__popis">Klimatizační jednotky pro jednu místnost i pro celou domácnost.</p><ul><li>Lokální klimatizační jednotky pro jednu místnost</li><li>Klimatizace pro celou domácnost</li><li>Úprava vzduchu na požadovanou teplotu a vlhkost</li><li>Nezávazná prohlídka před nabídkou</li></ul></div></article>
<article class="cinnost" id="klimatizace-firmy"><div class="cinnost__obr"><img alt="Venkovní jednotky klimatizace s potrubím na střeše firemní budovy" height="550" sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 680px" src="assets/foto/sluzby/klima-firmy-900.webp" srcset="assets/foto/sluzby/klima-firmy-900.webp 900w, assets/foto/sluzby/klima-firmy.webp 978w" width="978"/></div><div class="tx cinnost__tx"><h3>Klimatizace pro firmy a haly</h3><p class="lp-cinnost__popis">Klimatizujeme a větráme komerční i průmyslové budovy.</p><ul><li>Komerční budovy</li><li>Průmyslové budovy a haly</li><li>Vzduchotechnické potrubí pro rozvod vzduchu</li><li><a href="#">Chlazení průmyslové haly</a> v Krnově</li></ul></div></article>
<article class="cinnost" id="rekuperace"><div class="cinnost__obr"><img alt="Větrací jednotka s rekuperací Buderus Logavent v technické místnosti rodinného domu" height="810" sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 680px" src="assets/foto/sluzby/klima-rekuperace-900.webp" srcset="assets/foto/sluzby/klima-rekuperace-900.webp 900w, assets/foto/sluzby/klima-rekuperace.webp 1440w" width="1440"/></div><div class="tx cinnost__tx"><h3>Větrání s rekuperací</h3><p class="lp-cinnost__popis">Rekuperační jednotky a vzduchotechnika pro domácnosti i firmy.</p><ul><li>Instalace rekuperačních jednotek</li><li>Vzduchotechnické potrubí pro rozvod vzduchu</li><li>Rodinné domy, byty i firmy</li><li>Nezávazná prohlídka před nabídkou</li></ul></div></article>
<article class="cinnost" id="lokalni-vetrani"><div class="cinnost__obr"><img alt="Kryt lokální větrací jednotky na fasádě bytového domu" height="810" sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 680px" src="assets/foto/sluzby/klima-lokalni-vetrani-900.webp" srcset="assets/foto/sluzby/klima-lokalni-vetrani-900.webp 900w, assets/foto/sluzby/klima-lokalni-vetrani.webp 1440w" width="1440"/></div><div class="tx cinnost__tx"><h3>Lokální větrací jednotky</h3><p class="lp-cinnost__popis">Dodatečné řešení pro byty a domy s těsnými okny a dveřmi.</p><ul><li>Výměna vydýchaného vzduchu za čerstvý</li><li>Pro jednu místnost i celou domácnost</li><li>Do nových i zrekonstruovaných domů a bytů</li></ul></div></article>
<article class="cinnost" id="solarni-ohrev"><div class="cinnost__obr"><img alt="Ploché solární kolektory Buderus zabudované do střechy" height="900" sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 680px" src="assets/foto/sluzby/solar-ohrev-900.webp" srcset="assets/foto/sluzby/solar-ohrev-900.webp 900w, assets/foto/sluzby/solar-ohrev.webp 1600w" width="1600"/></div><div class="tx cinnost__tx"><h3>Solární ohřev vody, přitápění a bazén</h3><p class="lp-cinnost__popis">Montujeme solární systémy pro rodinné domy i průmyslové objekty.</p><ul><li>Ohřev teplé vody</li><li>Přitápění</li><li>Ohřev bazénu</li><li>Vyřízení <a href="#">dotace</a> z programu Nová zelená úsporám</li></ul></div></article>
<article class="cinnost" id="servis-solaru"><div class="cinnost__obr"><img alt="Připojení okruhu na vakuových trubicových solárních kolektorech" height="591" sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, 680px" src="assets/foto/sluzby/solar-servis-900.webp" srcset="assets/foto/sluzby/solar-servis-900.webp 900w, assets/foto/sluzby/solar-servis.webp 1050w" width="1050"/></div><div class="tx cinnost__tx"><h3>Servis solárních systémů</h3><p class="lp-cinnost__popis">Servisujeme solární systémy všech typů a značek.</p><ul><li>Kontrola těsnosti okruhů</li><li>Doplňování nemrznoucího média do systému</li><li>Všechny typy a značky</li><li>Rodinné domy i průmyslové objekty</li></ul></div></article>
</div>
<div class="lp-cinnosti__cta"><a class="btn btn--plne" href="#">Nezávazná poptávka</a></div>
</div>
</section></main>

Tři kroky

Tři kolečka s přechodem spojená čárkovanou linkou. Třídy: lp-kroky, lp-kroky__c.

HTML kód

<main class="obsah" id="obsah"><section class="r lp-sekce">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">Jak to probíhá</p><h2>Tři kroky ke klimatizaci nebo solárnímu ohřevu</h2></div>
<ol class="lp-kroky">
<li><span class="lp-kroky__c">1</span><h3>Ozvete se nám</h3><p>Zavolejte nebo vyplňte poptávku. Stačí pár vět o tom, co chcete chladit, větrat nebo ohřívat.</p></li>
<li><span class="lp-kroky__c">2</span><h3>Prohlídka a nabídka</h3><p>Před cenovou nabídkou se k vám nezávazně přijedeme podívat na místo. Navrhneme řešení a připravíme nabídku.</p></li>
<li><span class="lp-kroky__c">3</span><h3>Montáž a servis</h3><p>Klimatizaci, rekuperaci nebo solární systém namontujeme a předáme. U solárního systému se pak postaráme i o servis.</p></li>
</ol>
</div>
</section></main>

Čísla a důvody

Tři karty s velkým číslem s přechodem a krátkým popisem. Třídy: lp-cisla.

HTML kód

<main class="obsah" id="obsah"><section class="r lp-sekce">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">Proč HARTOP</p><h2>Na co se u nás můžete spolehnout</h2></div>
<ul class="lp-cisla">
<li><strong>1993</strong><h3>Rodinná firma</h3><p>Jsme rodinná firma od roku 1993. Za naši práci ručí už dvě generace.</p></li>
<li><strong>5,0</strong><h3>Hodnocení zákazníků</h3><p>Plný počet hvězd v recenzích na Googlu.</p></li>
<li><strong>Prohlídka</strong><h3>Nabídka až po prohlídce</h3><p>Před cenovou nabídkou se k vám nezávazně přijedeme podívat na místo.</p></li>
<li><strong>Domy i firmy</strong><h3>Od jedné místnosti po halu</h3><p>Klimatizaci a větrání děláme pro domácnosti i firmy, od jedné místnosti po průmyslové budovy.</p></li>
<li><strong>Servis</strong><h3>Solární systémy všech značek</h3><p>Montáž i servis děláme u solárních systémů všech typů a značek.</p></li>
<li><strong>Krnov</strong><h3>Celý Moravskoslezský kraj</h3><p>Sídlíme v Krnově a pracujeme po celém Moravskoslezském kraji.</p></li>
</ul>
</div>
</section></main>

Časté otázky

Rozbalovací otázky s oranžovým plusem, oddělené linkou. Třídy: lp-faq, tg, tg__a, lp-faq__tel.

HTML kód

<main class="obsah" id="obsah"><section class="r lp-sekce">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">Časté dotazy</p><h2>Na co se nás ptáte</h2></div>
<div class="lp-faq">
<details class="tg" open=""><summary>Jakou klimatizaci mi namontujete?</summary><div class="tg__a"><p>Klimatizační jednotky montujeme pro jednu místnost, pro celou domácnost i pro komerční a průmyslové budovy. Jaké řešení se k vám hodí, posoudíme při nezávazné prohlídce na místě.</p></div></details>
<details class="tg"><summary>Jaký je rozdíl mezi větráním a klimatizací?</summary><div class="tg__a"><p>Větrání vyměňuje vydýchaný vzduch za čerstvý. Když se nasávaný venkovní vzduch navíc upravuje na požadovanou teplotu a vlhkost, jde o klimatizaci. Klimatizace také automaticky udržuje stabilní teplotu.</p></div></details>
<details class="tg"><summary>Mám po výměně oken řešit větrání?</summary><div class="tg__a"><p>V domech a bytech s velmi těsnými okny a dveřmi se vydýchaný vzduch sám nevymění. Dodatečně to vyřeší lokální větrací jednotka. Při stavbě nebo větší rekonstrukci můžete zvolit větrání s rekuperační jednotkou a vzduchotechnickým potrubím.</p></div></details>
<details class="tg"><summary>K čemu se hodí solární systém?</summary><div class="tg__a"><p>Solární systém ohřívá vodu, může přitápět i ohřívat bazén. Montujeme ho pro rodinné domy i průmyslové objekty.</p></div></details>
<details class="tg"><summary>Servisujete i solární systémy jiných značek?</summary><div class="tg__a"><p>Ano. Montáž i servis děláme u solárních systémů všech typů a značek. Zkontrolujeme těsnost okruhů a doplníme nemrznoucí médium do systému.</p></div></details>
<details class="tg"><summary>Dá se na solární ohřev získat dotaci?</summary><div class="tg__a"><p>Instalaci solárního systému pro ohřev vody podporuje program NZÚ Light pro zranitelné domácnosti s nižšími příjmy. Podmínky dotací se mění, proto vám rádi poradíme a pomůžeme s vyřízením. Přehled programů najdete na stránce <a href="#">Dotační programy</a>.</p></div></details>
<details class="tg"><summary>Kolik stojí klimatizace nebo solární systém?</summary><div class="tg__a"><p>Cena záleží na tom, co a kde chcete chladit, větrat nebo ohřívat, i na tom, co je na místě potřeba udělat. Cenovou nabídku proto připravíme až po nezávazné prohlídce na místě.</p></div></details>
</div>
<p class="lp-faq__tel">Nenašli jste odpověď? Volejte <a href="#">602 788 409</a>.</p>
</div>
</section></main>

Mřížka realizací

Fotky realizací v mřížce po třech s názvem pod fotkou. Třídy: ref__mriz, ref__i, ref__obr, ref__info, lp-ref.

HTML kód

<main class="obsah" id="obsah"><section class="r lp-sekce lp-sekce--seda">
<div class="w">
<div class="lp-hlava"><p class="lp-stitek">Realizace</p><h2>Z naší práce</h2></div>
<div class="ref__mriz lp-ref"><article class="ref__i"><a aria-hidden="true" class="ref__obr" href="#" tabindex="-1"><img alt="Chladicí jednotka Robur na střeše průmyslové haly, Krnov" height="640" src="assets/foto/chlazeni-prumyslove-haly-02.webp" width="480"/></a><div class="ref__info"><h3><a href="#">Chlazení průmyslové haly, Krnov</a></h3></div></article></div>
<div class="tl ta-c"><a class="btn btn--plne mb5 mt30" href="#">Všechny realizace</a></div>
</div>
</section></main>

Recenze Google

Velké hodnocení s přechodem a tři karty recenzí s iniciálou. Třídy: grw, grw__skore, grw__cislo, grw__telo, grw__r, grw__foto.

HTML kód

<main class="obsah" id="obsah"><section class="r mt20 pt30 lp-recenze">
<div class="w"><div class="g">
<div class="c">
<div class="tx mb35"><h2 class="ta-c"><strong>Hodnocení zákazníků</strong></h2></div>
<div class="mb35 mt-20"><div class="grw" id="g-review"><div class="grw__hlava"><h3 class="grw__firma">Pavel HARNOL - HARTOP | topení - voda - plyn</h3><p class="grw__skore"><span class="grw__cislo">100 %</span><span class="grw__txt"><span aria-hidden="true" class="grw__hv"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span><strong>hodnocení s pěti hvězdičkami</strong><a href="#" rel="noopener" target="_blank">Zobrazit všechny recenze</a></span></p></div><div class="grw__telo"><div class="grw__r"><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#00695c">F</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Ferdinand Tuscher</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Spolupráce s firmou v délce více jak 30 let byla vždy bez problému k mé spokojenosti.</p></div></div><div class="grw__r"><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#5d4037">J</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Jan Kutálek</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>S touto firmou máme výborné zkušenosti. Je spolehlivá, na čem jsme se domluvili, vždy splnili a odvedená práce byla vždy velmi kvalitní, což v dnešní době rozhodně není pravidlem. Pokud budeme v budoucnosti potřebovat služby, které tato firma poskytuje, určitě se na ni opět obrátíme.</p></div></div><div class="grw__r"><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#1565c0">D</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Dagmar Bachová</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Společnost HARTOP vřele doporučuji na základě mnohaletých zkušeností. Co se týká jakékoliv potřeby ohledně topení, vody a plynu umí flexibilně a efektivně vyřešit konkrétní situaci. Pan Harnol i paní Harnolová jsou profesionálové ve svém oboru, výsledek jejich práce je vždy vysoce funkční a taky, pokud je to vaším přáním, designově krásný a nadčasový. Rozhodně doporučuji!</p></div></div><div class="grw__r" hidden=""><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#6a1b9a">M</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Míša Svačinová</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Spolupracujeme s firmou Hartop již dlouho jsme velmi spokojeni, pracovníci odvádí kvalitní práci, vždy se daný problém vyřeší rychle a ke spokojenosti. Pan Harnol vždy ochotný, usměvavý poradí a pokud nastane problém snaží se jej co nejrychleji a nejefektivněji vyřešit. Nemám co bych vytkla.</p></div></div><div class="grw__r" hidden=""><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#c62828">R</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Richard Mazal</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Vřele doporučujeme. Byli jsem velmi spokojeni jednak s pomocí při výběru zařizovacích předmětů, dlažby (cit pro detail), tak s realizací (kvalita a přesnost termínu).</p></div></div><div class="grw__r" hidden=""><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#2e7d32">R</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">René Novotný</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Rychlost, profesionalita a provedení na jedničku</p></div></div><div class="grw__r" hidden=""><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#ef6c00">M</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Miluše Rejkubová</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Dobrý dal se uvidí. Jsem spokojená s rychlostí vykonané práce, s kvalitou a ochotou. Prostě příkladna firma.</p></div></div><div class="grw__r" hidden=""><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#455a64">V</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">vratik petricek</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Chtěl bych poděkovat za perfektní prácí za veškeré opravy v našem domě</p></div></div><div class="grw__r" hidden=""><div class="grw__rh"><span aria-hidden="true" class="grw__foto" style="background:#ad1457">H</span><img alt="Google" class="grw__g" height="20" src="assets/foto/recenze/google.svg" width="20"/><p><a href="#" rel="noopener" target="_blank">Hana Siřinová</a><span aria-label="5 z 5 hvězdiček" class="grw__hv" role="img"><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/><img alt="" height="18" src="assets/foto/recenze/hvezda.svg" width="18"/></span></p></div><div class="grw__rt"><p>Zatím jsme byli s veškerými službami velice spokojeni. Ještě nás čeká velká část realizace a ráda pak napíšu finální recenzi.</p></div></div></div></div></div>
</div>
</div></div>
</section></main>

Výpis článků

Dvě karty článků s fotkou a podtrženým nadpisem. Třídy: lp-hlava, clanky clanky--2, clanky__i, clanky__obr, clanky__nadpis.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full">
<div class="w"><div class="g">
<div class="c">
<div class="lp-hlava"><p class="lp-stitek">Aktuálně</p><h2>Stojí za přečtení</h2></div><div class="mb35 tpb20 clanky-uvod"><div class="clanky clanky--2"><article class="clanky__i"><a aria-hidden="true" class="clanky__obr" href="#" tabindex="-1"><img alt="Kontrola a servis plynového zařízení" height="250" src="assets/foto/logamax-plus-gb192i-einbausituation-400x250.webp" width="400"/></a><div class="clanky__t"><h3 class="clanky__nadpis"><a href="#">Kontrola a servis plynového zařízení za zvýhodněnou cenu</a></h3></div></article><article class="clanky__i"><a aria-hidden="true" class="clanky__obr" href="#" tabindex="-1"><img alt="Školení Hilti: instruktor ukazuje utěsnění prostupů kabelů a potrubí ve zkušební stěně" height="250" src="assets/foto/skoleni-hilti-protipozarni-ochrana-400x250.webp" width="400"/></a><div class="clanky__t"><h3 class="clanky__nadpis"><a href="#">Certifikovaná montáž protipožárních systémů Hilti</a></h3></div></article></div></div>
</div>
</div></div>
</section></main>

Logo dodavatelů

Mřížka log značek po čtyřech, při najetí se objeví název. Třídy: loga, loga__i, loga__hover.

HTML kód

<main class="obsah" id="obsah"><section class="r mb60 mt60 pt20 pb20">
<div class="w"><div class="g">
<div class="c">
<div class="ir pt20">
<div class="g">
<div class="c w16_6667 p-w100 ta-c p-mh1">
</div>
<div class="c w66_6667 p-w100 ta-c cpb20">
<div class="tx mb35"><h2>Spolupracujeme s těmi nejlepšími dodavateli na trhu</h2></div>
</div>
<div class="c w16_6667 p-w100 p-mh1">
</div>
</div>
</div>
<ul class="loga"><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Buderus" height="500" src="assets/foto/logo-buderus.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Buderus</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Giacomini" height="500" src="assets/foto/logo-giacomini.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Giacomini</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Nibe" height="500" src="assets/foto/logo-nibe.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Nibe</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Wilo" height="500" src="assets/foto/logo-wilo.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Wilo</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Grundfos" height="500" src="assets/foto/logo-grundfos.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Grundfos</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Dražice" height="500" src="assets/foto/logo-drazice.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Dražice</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Korado" height="500" src="assets/foto/logo-korado.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Korado</span></span></a></li><li class="loga__i"><a href="#" rel="noopener" target="_blank"><img alt="Robur" height="500" src="assets/foto/logo-robur.webp" width="500"/><span class="loga__hover"><span class="loga__nazev">Robur</span></span></a></li></ul>
</div>
</div></div>
</section></main>

Pás s výzvou

Červenooranžový přechod s bílým nadpisem a bílým obrysovým tlačítkem. Třídy: r--full, bgr-af4471, btn--bile.

HTML kód

<main class="obsah" id="obsah"><section class="r mt40 r--full r--fullc bgr-af4471">
<div class="g">
<div class="c ta-c">
<div class="ir ir--kont pt60 pb60">
<div class="g">
<div class="c c--stred ta-c cpt10 cpb10 c--mid">
<div class="c__in">
<div class="tx mb35"><h3><strong><span class="co-ffffff">Plynoinstalace s oprávněním Technické inspekce ČR. Pro rodinné a bytové domy, firmy i průmysl.</span></strong></h3></div>
<div class="tl"><a class="btn btn--bile mb5 mt10" href="#">Poptat plynoinstalaci</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section></main>

Obsah

Příběh firmy

Velká fotka vlevo a bílá karta s textem a třemi údaji vpravo. Třídy: ppf, ppf__foto, ppf__k, pp-f.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full ppf">
<div aria-label="Technik u stacionárního plynového kotle Buderus" class="ppf__foto" role="img"></div>
<div class="w">
<div class="ppf__k">
<p class="lp-stitek">Náš příběh</p>
<h2>Dvě generace, jedna firma</h2>
<p>Firmu založil Pavel Harnol v roce 1993. Navrhujeme, montujeme a servisujeme topení a rozvody plynu pro byty, domy i průmyslové objekty, od roku 2006 stavíme také koupelny. Dnes za naši práci ručí už dvě generace.</p>
<ul class="pp-f"><li><span class="pp-f__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-.6-.6-2.4z"></path></svg></span><span class="pp-f__k">Obory</span><span class="pp-f__v">Topení, plyn, voda, koupelny</span></li><li><span class="pp-f__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z"></path><circle cx="12" cy="10" r="2.5"></circle></svg></span><span class="pp-f__k">Působnost</span><span class="pp-f__v">Moravskoslezský kraj</span></li><li><span class="pp-f__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 3 4 7v5c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V7z"></path><path d="m9 12 2 2 4-4"></path></svg></span><span class="pp-f__k">Značky</span><span class="pp-f__v">Buderus, NIBE, Giacomini</span></li></ul>
<a class="lp-odkaz" href="#"><span>Prohlédnout realizace</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
</div>
</section></main>

Firemní filosofie

Šest bodů s kolečky s přechodem a textem. Třídy: filosofie-cislo, g--35.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full r--fullc pt80 pb80" id="firemni-filosofie">
<div class="g">
<div class="c">
<div class="tx mb35"><h2 class="ta-c">Firemní filosofie v 6 bodech</h2></div>
<div class="ir ir--kont pt30">
<div class="g g--top g--35">
<div class="c w33_3333 m-w50 p-w100 ta-c">
<div class="tx mb35"><p><span class="filosofie-cislo">1</span></p></div>
<div class="tx mb35"><h3><strong>Rodinná česká firma</strong></h3> <span class="sp sh10"></span> <p>HARTOP stojí na rodinných základech. To nám přináší stabilitu i radost z práce. Už dvě generace ručíme za svou práci.</p></div>
</div>
<div class="c w33_3333 m-w50 p-w100 ta-c">
<div class="tx mb35"><p><span class="filosofie-cislo">2</span></p></div>
<div class="tx mb35"><h3><strong>Určujeme trendy</strong></h3> <span class="sp sh10"></span> <p>Inovátorský duch nás pohání vpřed, hledáme lepší cestu ke spokojenému zákazníkovi.</p></div>
</div>
<div class="c w33_3333 m-w50 p-w100 ta-c">
<div class="tx mb35"><p><span class="filosofie-cislo">3</span></p></div>
<div class="tx mb35"><h3><strong>Inovujeme</strong></h3> <span class="sp sh10"></span> <p>Inovace je součástí naší práce. Nabízíme funkční řešení, na které je spoleh. Stejně tak na naše zaměstnance.</p></div>
</div>
<div class="c w33_3333 m-w50 p-w100 ta-c">
<div class="tx mb35"><p><span class="filosofie-cislo">4</span></p></div>
<div class="tx mb35"><h3><strong>Důležitost detailů</strong></h3> <span class="sp sh10"></span> <p>Detail je základním stavebním kamenem kvality. Proto kvalitu definujeme jako přínos pro zákazníka.</p></div>
</div>
<div class="c w33_3333 m-w50 p-w100 ta-c">
<div class="tx mb35"><p><span class="filosofie-cislo">5</span></p></div>
<div class="tx mb35"><h3><strong>Neformální komunikace</strong></h3> <span class="sp sh10"></span> <p>Volba pracovní atmosféry je u nás velmi důležitá. Stejně tak pro klienty, kteří jsou s námi spokojeni desítky let.</p></div>
</div>
<div class="c w33_3333 m-w50 p-w100 ta-c">
<div class="tx mb35"><p><span class="filosofie-cislo">6</span></p></div>
<div class="tx mb35"><h3><strong>Vyhřátý domov</strong></h3> <span class="sp sh10"></span> <p>Nabízíme produkty, o jejichž kvalitě jsme sami přesvědčeni, a zajistíme vám tak pohodové bydlení.</p></div>
</div>
</div>
</div>
</div>
<div class="c ta-c">
<div class="tl"><a class="btn btn--obrys mb5 mt30" href="#">Napište nám</a></div>
</div>
</div>
</section></main>

Dotace s fotkou

Sekce dotací: fotka vedle textu s číslovaným postupem a zelenými kolečky. Třídy: s-dotace, bgi-nzu-light, filosofie-cislo.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full r--fullc pt80">
<div class="g">
<div class="c">
<div class="ir">
<div class="g g--mid">
<div class="c m-h t-h w8_3333 p-w100 p-mh15 c--mid">
<div class="c__in">
</div>
</div>
<div class="c w41_6667 m-w50 t-w100 c--pad c--mid">
<div class="c__in cpt20 cpr15 cpb60 cpl15">
<div class="tx mb10"><p><span class="filosofie-cislo">1.</span></p></div>
<div class="tx mb20 tpt20"><h2 class="h1"><strong>NZÚ Light<br/></strong></h2> <p>Přímé dotace pro nízkopříjmové domácnosti</p></div>
<div class="tx mb35 tpt10 tpb10"><p><strong>Od roku 2026 mají na přímé dotace nárok pouze tzv. zranitelné domácnosti</strong> - tedy rodiny s nižšími příjmy žijící v nezatepleném nebo energeticky neúsporném domě, nebo domácnosti s nárokem na superdávku.</p></div>
<div class="tx"><blockquote><p> Až 250 000 Kč na zateplení + až 150 000 Kč na výměnu zdroje tepla / OZE. Příjem žádostí od června 2026. Podrobné podmínky v květnu 2026.</p></blockquote></div>
<div class="tx mb10"><ol> <li>Dílčí zateplení domu, výměna oken a vstupních dveří</li> <li>Výměna starého kotle za tepelné čerpadlo nebo kondenzační kotel</li> <li>Instalace solárního systému pro ohřev vody</li> <li>Bonus za kombinaci opatření až 60 000 Kč</li> <li>Bonus za znevýhodněný region až 5 % z celkové dotace</li> <li>Poradenství a renovační pas zcela zdarma</li> </ol></div>
<div class="tl"><a class="btn btn--plne mb5 mt20" href="#">Mám zájem o dotaci NZÚ Light</a></div>
</div>
</div>
<div class="c w41_6667 m-w50 t-w100 c--fill">
<div class="c__in bgi-nzu-light cpt35 cpr15 cpl15 c--mid">
<div class="sp sh675"></div>
</div>
</div>
<div class="c m-h t-h w8_3333 p-w100 p-mh15 c--mid">
<div class="c__in">
</div>
</div>
</div>
</div>
</div>
</div>
</section></main>

Text článku

Titulek, štítek, datum a tělo článku s dělicími linkami u nadpisů a výzvou k zavolání. Třídy: clanek, clanek__nadpis, clanek__obsah, clanek__vyzva, clanek__dal, cl-sl.

HTML kód

<main class="obsah" id="obsah"><div class="clanek"><div class="w">
<article class="clanek__in">
<header class="clanek__hlava">
<p class="clanek__stitek">Voda a kanalizace</p>
<h1 class="clanek__nadpis">Bytové domy musí měnit vodoměry i měřiče tepla</h1>
<p class="clanek__datum"><svg aria-hidden="true" viewbox="0 0 24 24"><rect height="15.5" rx="2.5" width="17" x="3.5" y="5"></rect><path d="M3.5 10h17M8 3v4M16 3v4"></path></svg><time datetime="2024-02-19">19. února 2024</time></p>
</header>
<figure class="clanek__obr"><img alt="Bytové domy musí měnit vodoměry i měřiče tepla" fetchpriority="high" height="800" src="assets/foto/voda.webp" width="1200"/></figure>
<div class="clanek__obsah tx"><h2><span class="fw400">Majitelé bytů a bytových domů (SVJ) mají povinnost instalace měsíčních dálkových odečtů vodoměrů a měřičů.</span></h2>
<p class="clanek__vice"></p>
<p>S účinností od 1. 1. 2023 byl schválen <a href="#" rel="noopener" target="_blank">zákon č. 424/2022 Sb</a>., který nařizuje od 1. 1. 2024 dálkově odečítat měřiče tepla a teplé vody 1× měsíčně a naměřené hodnoty předávat konečným spotřebitelům.</p>
<a class="cl-sl" href="#"><img alt="" height="840" src="assets/foto/sluzby/rz-voda-a-kanalizace.webp" width="920"/><span class="cl-sl__t"><span class="cl-sl__s">Naše služba</span><span class="cl-sl__n">Voda a kanalizace</span><span class="cl-sl__p">Rozvody pitné i užitkové vody, kanalizace a vnitřní odpady včetně tlakové zkoušky.</span></span><span aria-hidden="true" class="cl-sl__sipka"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span></a>
<blockquote>
<p>Proto jsme se také zaměřili na <strong>rozšíření služeb pro naše stávající, ale i nové zákazníky a nově instalujeme vodoměry a měřiče tepla s dálkovým odečtem.</strong> K tomu je nutné mít oprávnění vydané Českým metrologickým ústavem, které my již od roku 2002 vlastníme.</p>
</blockquote>
<div class="clanek__vyzva"><span class="clanek__vyzva-ik"><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><p><strong>Máte zájem o instalaci vodoměrů a měřičů tepla?</strong> Zavolejte nám na <a href="#">602 788 409</a> nebo pošlete <a href="#">nezávaznou poptávku</a>.</p></div>
</div>
<a class="clanek__dal" href="#"><span><span class="clanek__dal-l">Pokračovat</span><span class="clanek__dal-n">Potřebujete řešit výměnu kotle na tuhá paliva anebo upravit vytápění?</span></span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</article>
</div></div></main>

Detail realizace

Název s popisem vlevo, galerie fotek vpravo a navigace mezi realizacemi. Třídy: realizace, realizace__info, realizace__galerie, realizace__foto, rnav.

HTML kód

<main class="obsah" id="obsah"><div class="realizace"><div class="w">
<div class="realizace__info"><h1 class="realizace__nadpis">Akumulační nádoby na TV</h1><div class="realizace__popis tx"><p>Kombinované akumulační nádrže se vyrábějí jako ocelové tlakové nádoby buď <strong>s vestavěným zásobníkem</strong> teplé vody, <strong>nebo s výměníkem</strong> pro průtokovou přípravu teplé vody.</p>
<p>2018, Krnov</p></div></div>
<div class="realizace__galerie"><a class="realizace__foto lb" data-galerie="realizace" data-popis="Akumulační nádoby na TV" href="#"><img alt="Akumulační nádoby na TV" fetchpriority="high" height="480" src="assets/foto/akumulacni-nadoby-na-tv.webp" width="640"/></a></div>
<nav aria-label="Další realizace" class="rnav"><a class="rnav__a rnav__a--prev" href="#"><span aria-hidden="true" class="rnav__ik"></span><span class="rnav__t">Podlahové topení Giacomini</span></a><a class="rnav__zpet" href="#"><span class="sr">Všechny realizace</span></a><a class="rnav__a rnav__a--next" href="#"><span aria-hidden="true" class="rnav__ik"></span><span class="rnav__t">Automatické kotle na pelety 140 kW. Vytápění Domova pro seniory</span></a></nav>
</div></div></main>

Formuláře

Poptávkový formulář

Bílá karta s formulářem na přechodovém pásu a textem s telefonem vedle. Třídy: bgr-edbbce, form, form__row, form__f, ms, form__souhlas, form__odeslat.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full bgr-edbbce">
<div class="w"><div class="g g--bot">
<div class="c cpt35 c--bot">
<div class="c__in">
<div class="ir mtm10p">
<div class="g g--rev">
<div class="c w50 t-w100 c--fill">
<div class="c__in bg-ffffff cpt60 cpr40 t-cpr20 cpb20 cpl40 t-cpl20 c--bot">
<div class="tx mb10"><h2 class="ta-c"><strong>Nezávazná poptávka</strong></h2></div>
<div class="mb20"><form class="form" id="poptavka">
<div class="form__row">
<div class="form__f">
<label class="sr" for="f-jmeno">Jméno a příjmení (firma)</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" placeholder="Jméno a příjmení (firma)" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="form__f">
<label class="sr" 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" placeholder="E-mail" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<label class="sr" for="f-telefon">Telefon</label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 602 788 409 nebo +420 602 788 409." id="f-telefon" maxlength="40" name="telefon" placeholder="Telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
<div class="form__f">
<label class="sr" for="f-misto">Místo realizace</label>
<input aria-describedby="f-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="f-misto" maxlength="200" name="misto" placeholder="Místo realizace" required="" type="text"/>
<p class="field__err" hidden="" id="f-misto-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<span class="form__lbl" id="f-sluzby">Mám zájem o:</span>
<details class="ms">
<summary aria-describedby="f-sluzby">- vyberte -</summary>
<div aria-labelledby="f-sluzby" class="ms__list" role="group">
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Topení"/>Topení</label>
<label><input name="sluzby[]" type="checkbox" value="Kotel"/>Kotel</label>
<label><input name="sluzby[]" type="checkbox" value="Tepelné čerpadlo"/>Tepelné čerpadlo</label>
<label><input name="sluzby[]" type="checkbox" value="Čištění topných systémů"/>Čištění topných systémů</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Plynoinstalace"/>Plynoinstalace</label>
<label><input name="sluzby[]" type="checkbox" value="Servis či kontrola plynového zařízení"/>Servis či kontrola plynového zařízení</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Voda a kanalizace"/>Voda a kanalizace</label>
<label><input name="sluzby[]" type="checkbox" value="Koupelna"/>Koupelna</label>
<label><input name="sluzby[]" type="checkbox" value="Klimatizace nebo solární ohřev"/>Klimatizace nebo solární ohřev</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Dotace"/>Dotace</label>
<label><input name="sluzby[]" type="checkbox" value="Něco jiného, nechám si poradit"/>Něco jiného, nechám si poradit</label>
</div>
</div>
</details>
</div>
<div class="form__f">
<span class="form__lbl" id="f-objekt">Typ objektu:</span>
<details class="ms ms--jeden">
<summary aria-describedby="f-objekt">- vyberte -</summary>
<div aria-labelledby="f-objekt" class="ms__list" role="radiogroup">
<label><input name="objekt" type="radio" value="Rodinný dům"/>Rodinný dům</label>
<label><input name="objekt" type="radio" value="Byt"/>Byt</label>
<label><input name="objekt" type="radio" value="Bytový dům nebo SVJ"/>Bytový dům nebo SVJ</label>
<label><input name="objekt" type="radio" value="Firma nebo provozovna"/>Firma nebo provozovna</label>
<label><input name="objekt" type="radio" value="Jiný objekt"/>Jiný objekt</label>
</div>
</details>
</div>
</div>
<div class="form__f">
<label class="sr" for="f-zprava">Zpráva</label>
<textarea id="f-zprava" maxlength="5000" name="zprava" placeholder="Zpráva" rows="5"></textarea>
</div>
<div class="form__f form__souhlas">
<input aria-describedby="f-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="f-souhlas">Souhlasím se zpracováním <a href="#" target="_blank">osobních údajů</a> za účelem odpovědi na moji poptávku.</label>
<p class="field__err" hidden="" id="f-souhlas-err"></p>
</div>
<div aria-hidden="true" class="form__hp"><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="navsteva" type="hidden" value=""/>
<p class="form__chyba" hidden="" id="form-chyba" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 602 788 409</a>.</p>
<button class="form__odeslat" type="submit">Odeslat</button>
<p class="form__nezavazne">Odeslání poptávky je nezávazné a zdarma.</p>
</form>
<div class="form__ok" id="odeslano" tabindex="-1"><p class="form__ok-nadpis">Děkujeme, poptávku jsme dostali.</p><p>Ozveme se vám e-mailem nebo telefonicky a domluvíme se na dalším postupu. Potvrzení jsme vám poslali na e-mail.</p><p>Spěcháte? Volejte <a href="#">602 788 409</a>.</p></div></div>
</div>
</div>
<div class="c w50 t-w100 cpt40 c--bot">
<div class="c__in">
<div class="tx mb-10 tpt40 tpb30 tpr20"><p><span class="text-vetsi co-ffffff">Nabízíme moderní technologická i materiálová řešení. Protože budoucnost bydlení patří našim dětem. Provádíme montáže a strojní čištění topení, plynoinstalace, rozvody vody a kanalizace. Řešíme také kompletní rekonstrukce.</span></p></div>
<div class="tx mb50"><h6><span class="co-ffffff">VOLEJTE KDYKOLIV</span></h6> <h2><span class="co-ffffff"><strong><a href="#">+420 602 788 409</a></strong></span></h2></div>
<div class="tx mb35"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>

Pás s formulářem služby

Text s telefonem vlevo a bílá karta s formulářem vpravo na přechodu. Třídy: lp-formular, lp-formular__g, lp-formular__tx, lp-formular__karta.

HTML kód

<main class="obsah" id="obsah"><section class="r r--full bgr-edbbce lp-formular" id="poptavka-blok">
<div class="w lp-formular__g">
<div class="lp-formular__tx">
<p class="lp-stitek lp-stitek--bily">Ozvěte se nám</p>
<h2>Poradíme vám s klimatizací i solárním ohřevem</h2>
<p>Napište nám, kde potřebujete chladit, větrat nebo ohřívat vodu. Ozveme se vám a domluvíme další postup.</p>
<p class="lp-stitek lp-stitek--bily">Volejte kdykoliv</p>
<p class="lp-formular__tel"><a href="#">+420 602 788 409</a></p>
</div>
<div class="lp-formular__karta">
<h2 class="ta-c"><strong>Nezávazná poptávka</strong></h2>
<form class="form" id="poptavka">
<div class="form__row">
<div class="form__f">
<label class="sr" for="f-jmeno">Jméno a příjmení (firma)</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" placeholder="Jméno a příjmení (firma)" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="form__f">
<label class="sr" 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" placeholder="E-mail" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<label class="sr" for="f-telefon">Telefon</label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 602 788 409 nebo +420 602 788 409." id="f-telefon" maxlength="40" name="telefon" placeholder="Telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
<div class="form__f">
<label class="sr" for="f-misto">Místo realizace</label>
<input aria-describedby="f-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="f-misto" maxlength="200" name="misto" placeholder="Místo realizace" required="" type="text"/>
<p class="field__err" hidden="" id="f-misto-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<span class="form__lbl" id="f-sluzby">Mám zájem o:</span>
<details class="ms">
<summary aria-describedby="f-sluzby">- vyberte -</summary>
<div aria-labelledby="f-sluzby" class="ms__list" role="group">
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Topení"/>Topení</label>
<label><input name="sluzby[]" type="checkbox" value="Kotel"/>Kotel</label>
<label><input name="sluzby[]" type="checkbox" value="Tepelné čerpadlo"/>Tepelné čerpadlo</label>
<label><input name="sluzby[]" type="checkbox" value="Čištění topných systémů"/>Čištění topných systémů</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Plynoinstalace"/>Plynoinstalace</label>
<label><input name="sluzby[]" type="checkbox" value="Servis či kontrola plynového zařízení"/>Servis či kontrola plynového zařízení</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Voda a kanalizace"/>Voda a kanalizace</label>
<label><input name="sluzby[]" type="checkbox" value="Koupelna"/>Koupelna</label>
<label><input checked="" name="sluzby[]" type="checkbox" value="Klimatizace nebo solární ohřev"/>Klimatizace nebo solární ohřev</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Dotace"/>Dotace</label>
<label><input name="sluzby[]" type="checkbox" value="Něco jiného, nechám si poradit"/>Něco jiného, nechám si poradit</label>
</div>
</div>
</details>
</div>
<div class="form__f">
<span class="form__lbl" id="f-objekt">Typ objektu:</span>
<details class="ms ms--jeden">
<summary aria-describedby="f-objekt">- vyberte -</summary>
<div aria-labelledby="f-objekt" class="ms__list" role="radiogroup">
<label><input name="objekt" type="radio" value="Rodinný dům"/>Rodinný dům</label>
<label><input name="objekt" type="radio" value="Byt"/>Byt</label>
<label><input name="objekt" type="radio" value="Bytový dům nebo SVJ"/>Bytový dům nebo SVJ</label>
<label><input name="objekt" type="radio" value="Firma nebo provozovna"/>Firma nebo provozovna</label>
<label><input name="objekt" type="radio" value="Jiný objekt"/>Jiný objekt</label>
</div>
</details>
</div>
</div>
<div class="form__f">
<label class="sr" for="f-zprava">Zpráva</label>
<textarea id="f-zprava" maxlength="5000" name="zprava" placeholder="Zpráva" rows="5"></textarea>
</div>
<div class="form__f form__souhlas">
<input aria-describedby="f-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="f-souhlas">Souhlasím se zpracováním <a href="#" target="_blank">osobních údajů</a> za účelem odpovědi na moji poptávku.</label>
<p class="field__err" hidden="" id="f-souhlas-err"></p>
</div>
<div aria-hidden="true" class="form__hp"><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="navsteva" type="hidden" value=""/>
<p class="form__chyba" hidden="" id="form-chyba" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 602 788 409</a>.</p>
<button class="form__odeslat" type="submit">Odeslat</button>
<p class="form__nezavazne">Odeslání poptávky je nezávazné a zdarma.</p>
</form>
<div class="form__ok" id="odeslano" tabindex="-1"><p class="form__ok-nadpis">Děkujeme, poptávku jsme dostali.</p><p>Ozveme se vám e-mailem nebo telefonicky a domluvíme se na dalším postupu. Potvrzení jsme vám poslali na e-mail.</p><p>Spěcháte? Volejte <a href="#">602 788 409</a>.</p></div>
</div>
</div>
</section></main>

Průvodce rychlou poptávkou

Postup po krocích s kolečky a volby jako velká tlačítka. Třídy: pruvodce, pruvodce__postup, pruvodce__otazka, pruvodce__o.

HTML kód

<main class="obsah" id="obsah"><section class="r pruvodce">
<svg aria-hidden="true" class="sr" focusable="false" height="0" width="0"><defs><lineargradient gradientunits="userSpaceOnUse" id="pruvodce-gradient" x1="2" x2="22" y1="12" y2="12"><stop offset="0" stop-color="#f60"></stop><stop offset="1" stop-color="#f00"></stop></lineargradient></defs></svg>
<div class="w">
<div class="pruvodce__in">
<h1 class="pruvodce__h">Rychlá poptávka</h1>
<p class="pruvodce__lead">Pár kliknutí a pak už jen kontakt. Ozveme se vám.</p>
<ol aria-label="Postup" class="pruvodce__postup"><li class="is-akt"><button data-krok="1" type="button"><span class="pruvodce__bod"><span class="pruvodce__cislo">1</span><svg aria-hidden="true" class="pruvodce__fajfka" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg></span><span class="pruvodce__nazev">Problém</span><span class="pruvodce__odpoved"></span></button></li><li><button data-krok="2" disabled="" type="button"><span class="pruvodce__bod"><span class="pruvodce__cislo">2</span><svg aria-hidden="true" class="pruvodce__fajfka" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg></span><span class="pruvodce__nazev">Místo</span><span class="pruvodce__odpoved"></span></button></li><li><button data-krok="3" disabled="" type="button"><span class="pruvodce__bod"><span class="pruvodce__cislo">3</span><svg aria-hidden="true" class="pruvodce__fajfka" viewbox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5"></path></svg></span><span class="pruvodce__nazev">Kontakt</span><span class="pruvodce__odpoved"></span></button></li></ol>
<div class="pruvodce__k is-akt" data-krok="1">
<h2 class="pruvodce__otazka" tabindex="-1">S čím potřebujete pomoct?</h2>
<div class="pruvodce__volby"><button class="pruvodce__o" data-hodnoty="Topení" data-nazev="Topení" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"></path></svg></span><span>Topení</span></button><button class="pruvodce__o" data-hodnoty="Plynoinstalace" data-nazev="Plyn" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></span><span>Plyn</span></button><button class="pruvodce__o" data-hodnoty="Voda a kanalizace" data-nazev="Voda a kanalizace" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"></path></svg></span><span>Voda a kanalizace</span></button><button class="pruvodce__o" data-hodnoty="Koupelna" data-nazev="Koupelna" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"></path><path d="M6 12V5.5A2.5 2.5 0 0 1 8.5 3 2.5 2.5 0 0 1 11 5.5"></path><path d="M7 19l-1 2M17 19l1 2"></path></svg></span><span>Koupelna</span></button><button class="pruvodce__o" data-hodnoty="Klimatizace nebo solární ohřev" data-nazev="Klimatizace a solární ohřev" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path><path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path><path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path></svg></span><span>Klimatizace a solární ohřev</span></button><button class="pruvodce__o" data-hodnoty="Dotace" data-nazev="Dotace" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M15 9l-6 6"></path><circle cx="9.5" cy="9.5" r="1"></circle><circle cx="14.5" cy="14.5" r="1"></circle></svg></span><span>Dotace</span></button><button class="pruvodce__o" data-jine="1" data-nazev="Něco jiného" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="5.5" cy="12" r="1.2"></circle><circle cx="12" cy="12" r="1.2"></circle><circle cx="18.5" cy="12" r="1.2"></circle></svg></span><span>Něco jiného</span></button></div>
</div>
<div class="pruvodce__k" data-krok="2" hidden="">
<h2 class="pruvodce__otazka" tabindex="-1">Kde to potřebujete?</h2>
<div class="pruvodce__volby"><button class="pruvodce__o" data-nazev="Rodinný dům" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5"></path><path d="M5 9.5V21h14V9.5"></path><path d="M10 21v-6h4v6"></path></svg></span><span>Rodinný dům</span></button><button class="pruvodce__o" data-nazev="Byt" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><rect height="16" rx="1" width="16" x="4" y="4"></rect><path d="M4 12h16M12 4v16"></path></svg></span><span>Byt</span></button><button class="pruvodce__o" data-nazev="Bytový dům nebo SVJ" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><rect height="18" rx="1" width="14" x="5" y="3"></rect><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10 21v-3h4v3"></path></svg></span><span>Bytový dům nebo SVJ</span></button><button class="pruvodce__o" data-nazev="Firma nebo provozovna" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M3 21V10l6 4v-4l6 4V5h6v16z"></path><path d="M7 17h2M12 17h2M17 17h1"></path></svg></span><span>Firma nebo provozovna</span></button><button class="pruvodce__o" data-jine="1" data-nazev="Jiný objekt" type="button"><span class="pruvodce__ik"><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="5.5" cy="12" r="1.2"></circle><circle cx="12" cy="12" r="1.2"></circle><circle cx="18.5" cy="12" r="1.2"></circle></svg></span><span>Něco jiného</span></button></div>
<button class="pruvodce__zpet" type="button">Zpět</button>
</div>
<div class="pruvodce__k pruvodce__kontakt" data-krok="3">
<h2 class="pruvodce__otazka" tabindex="-1">Kam se vám ozveme?</h2>
<p class="pruvodce__pomoc pruvodce__pomoc--jine" hidden="">Do zprávy prosím napište, s čím potřebujete pomoct.</p>
<div class="pruvodce-form"><form class="form" id="poptavka">
<div class="form__row">
<div class="form__f">
<label class="sr" for="f-jmeno">Jméno a příjmení (firma)</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" placeholder="Jméno a příjmení (firma)" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="form__f">
<label class="sr" 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" placeholder="E-mail" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<label class="sr" for="f-telefon">Telefon</label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 602 788 409 nebo +420 602 788 409." id="f-telefon" maxlength="40" name="telefon" placeholder="Telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
<div class="form__f">
<label class="sr" for="f-misto">Místo realizace</label>
<input aria-describedby="f-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="f-misto" maxlength="200" name="misto" placeholder="Místo realizace" required="" type="text"/>
<p class="field__err" hidden="" id="f-misto-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<span class="form__lbl" id="f-sluzby">Mám zájem o:</span>
<details class="ms">
<summary aria-describedby="f-sluzby">- vyberte -</summary>
<div aria-labelledby="f-sluzby" class="ms__list" role="group">
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Topení"/>Topení</label>
<label><input name="sluzby[]" type="checkbox" value="Kotel"/>Kotel</label>
<label><input name="sluzby[]" type="checkbox" value="Tepelné čerpadlo"/>Tepelné čerpadlo</label>
<label><input name="sluzby[]" type="checkbox" value="Čištění topných systémů"/>Čištění topných systémů</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Plynoinstalace"/>Plynoinstalace</label>
<label><input name="sluzby[]" type="checkbox" value="Servis či kontrola plynového zařízení"/>Servis či kontrola plynového zařízení</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Voda a kanalizace"/>Voda a kanalizace</label>
<label><input name="sluzby[]" type="checkbox" value="Koupelna"/>Koupelna</label>
<label><input name="sluzby[]" type="checkbox" value="Klimatizace nebo solární ohřev"/>Klimatizace nebo solární ohřev</label>
</div>
<div class="ms__sk">
<label><input name="sluzby[]" type="checkbox" value="Dotace"/>Dotace</label>
<label><input name="sluzby[]" type="checkbox" value="Něco jiného, nechám si poradit"/>Něco jiného, nechám si poradit</label>
</div>
</div>
</details>
</div>
<div class="form__f">
<span class="form__lbl" id="f-objekt">Typ objektu:</span>
<details class="ms ms--jeden">
<summary aria-describedby="f-objekt">- vyberte -</summary>
<div aria-labelledby="f-objekt" class="ms__list" role="radiogroup">
<label><input name="objekt" type="radio" value="Rodinný dům"/>Rodinný dům</label>
<label><input name="objekt" type="radio" value="Byt"/>Byt</label>
<label><input name="objekt" type="radio" value="Bytový dům nebo SVJ"/>Bytový dům nebo SVJ</label>
<label><input name="objekt" type="radio" value="Firma nebo provozovna"/>Firma nebo provozovna</label>
<label><input name="objekt" type="radio" value="Jiný objekt"/>Jiný objekt</label>
</div>
</details>
</div>
</div>
<div class="form__f">
<label class="sr" for="f-zprava">Zpráva</label>
<textarea id="f-zprava" maxlength="5000" name="zprava" placeholder="Zpráva" rows="5"></textarea>
</div>
<div class="form__f form__souhlas">
<input aria-describedby="f-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="f-souhlas">Souhlasím se zpracováním <a href="#" target="_blank">osobních údajů</a> za účelem odpovědi na moji poptávku.</label>
<p class="field__err" hidden="" id="f-souhlas-err"></p>
</div>
<div aria-hidden="true" class="form__hp"><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="navsteva" type="hidden" value=""/>
<p class="form__chyba" hidden="" id="form-chyba" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 602 788 409</a>.</p>
<button class="form__odeslat" type="submit">Odeslat</button>
<p class="form__nezavazne">Odeslání poptávky je nezávazné a zdarma.</p>
</form>
<div class="form__ok" id="odeslano" tabindex="-1"><p class="form__ok-nadpis">Děkujeme, poptávku jsme dostali.</p><p>Ozveme se vám e-mailem nebo telefonicky a domluvíme se na dalším postupu. Potvrzení jsme vám poslali na e-mail.</p><p>Spěcháte? Volejte <a href="#">602 788 409</a>.</p></div></div>
<p class="pruvodce__tel">Raději zavoláte? <a href="#">602 788 409</a></p>
</div>
</div>
</div>
</section></main>

Obsah

Stránka 404

Obří oranžové 404 vedle textu a dvou tlačítek. Třídy: e404, e404__kod, e404__btns.

HTML kód

<main class="obsah" id="obsah"><section class="e404">
<div class="w"><div class="e404__in">
<p aria-hidden="true" class="e404__kod">404</p>
<div>
<h6>Stránka nenalezena</h6>
<h1 class="nadpis-oranzovy">Tahle stránka tu není</h1>
<p>Stránka, kterou hledáte, neexistuje nebo se přesunula. Podívejte se, co nejčastěji řešíme, nebo nám rovnou zavolejte, volat můžete kdykoliv.</p>
<div class="e404__btns">
<a class="btn btn--plne" href="#">Zpět na úvod</a>
<a class="btn btn--obrys" href="#">+420 602 788 409</a>
</div>
</div>
</div></div>
</section></main>

Stránky na živém webu

Úvod Služby Topení Realizace Aktuálně O firmě Dotace z EU Kontakt