tmavý překryvrgba(0,0,0,0.5)Překryv fotek v úvodu ovl-000000-50.
Typografie
Rozměry
Mezery a šířky
Název
Hodnota
Ukázka
Použití
.w okraj
60px
Boční okraj obsahu, max. šířka 1800 px.
sekce
100px / 60px
Svislé odsazení sekcí pt100, pb80.
hlavička
112px
Výška plovoucí hlavičky, 80 px na tabletu, 64 px na telefonu.
Rádiusy
Název
Hodnota
Ukázka
Použití
pilulka
50px
Hlavička, tlačítko menu, odznaky, štítky.
tlačítko
100px
Třída btn.
pole
10px
Vstupy a chybová hláška formuláře.
karty
0
Karty, citace a fotky bez rádiusu.
Značka a obrazové prvky
Logo
Komponenty
Navigace
Hlavička
Plovoucí bílá pilulka s logem, menu velkými písmeny a červeným tlačítkem. Pod 1360 px se menu schová do tlačítka. Třídy: hdr, hdr__logo, nav, nav__sub, nav__btn, hdr__menu.
Úvod úvodní stránky: velká fotka na pozadí, bílý nadpis, perex, tlačítko a bílá pilulka s hvězdičkami Google. Třídy: r--full, mh770, bgi-header-image, hodnoceni, hvezdy.
HTML kód
<main class="obsah" id="obsah"><section class="r t-h p-h r--full mh770 r--mh bgi-header-image">
<div class="w"><div class="g gpt137 t-gpt89">
<div class="c w50 cmb100 c--bot">
<div class="c__in">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx co-ffffff tx--i mw600"><h1>Profesionální instalace klimatizace na klíč</h1></div>
</div>
</div>
</div>
<div class="ir r--mb pt20 pb20">
<div class="g">
<div class="c">
<div class="tx co-ffffff tx--i mw710"><p class="p1">Navrhneme a namontujeme klimatizaci přesně pro váš prostor.<br/>Postaráme se o vše od prvního návrhu až po finální instalaci, abyste měli doma i v práci vždy příjemné klima bez starostí.</p></div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c">
<div class="tl"><a class="btn" href="#">Typy klimatizací</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="c w50 c--bot">
<div class="c__in">
<div class="ir">
<div class="g g--0">
<div class="c hodnoceni w58_3333 m-w75 c--fill">
<div class="c__in bg-ffffff rad100 cpt10 cpr20 cpb10 cpl20 c--row gap10 jc-center ai-center nowrap">
<div class="tx male co-000000"><p><strong>5,0</strong></p></div>
<div aria-label="5 z 5 hvězdiček" class="hvezdy" role="img"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg></div>
<div class="tx male co-000000"><p><span class="co-0a1e3b"><a class="co-0a1e3b" href="#" rel="noopener" target="_blank">65+ recenzí na Google</a></span></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Úvod podstránky s fotkou
Podstránka s fotkou přes celou šířku a 50% tmavým překryvem, štítek cap, bílý nadpis, perex a bílé tlačítko. Třídy: r--fullc, ovl-000000-50, bgi-o-nas-01, cap, btn btn--bila.
HTML kód
<main class="obsah" id="obsah"><section class="r r--fullc ptv8 t-pt140 p-pt100 pbv6 t-pb40 p-pb60 bgi-o-nas-01 ovl-000000-50">
<div class="g g--0 gpt137 t-gpt89 gpxp5 t-gpx60 p-gpx30">
<div class="c ta-c">
<div class="ir">
<div class="g g--0">
<div class="c ta-c">
<div class="tx male cap co-ffffff"><p><strong>JVS Klima<br/></strong></p></div>
</div>
</div>
</div>
<div class="ir pt20 pb40 t-pb20">
<div class="g g--0">
<div class="c ta-c">
<div class="tx co-ffffff tx--i mw800"><h1>Od návrhu po montáž. Jeden tým, žádné kompromisy.</h1></div>
</div>
</div>
</div>
<div class="ir t-pb20">
<div class="g g--0">
<div class="c ta-c">
<div class="tx co-ffffff tx--i mw900"><p>Naším cílem není prodat zařízení za každou cenu. Chceme navrhnout řešení, které v konkrétním prostoru skutečně funguje a zůstává spolehlivé dlouhodobě.</p></div>
</div>
</div>
</div>
<div class="ir pt40 p-pt20 pb40 t-pb60 p-pb40">
<div class="g g--0">
<div class="c ta-c">
<div class="c__in cpb20 t-cpb40 p-cpb20">
<div class="tl"><a class="btn btn--bila btn--m10" href="#">Probrat projekt</a></div>
<div class="tl"><a class="btn btn--bila btn--m10" href="#">Služby</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section></main>
Úvod světlé bez fotky
Světle modrý úvod s červeným štítkem, nadpisem a perexem na střed. Třídy: r--full, bg-f0f5fc, cap, co-c3002f, mw800.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt40 pb100 t-pb80 p-pb60 bg-f0f5fc">
<div class="w"><div class="g gpt137 t-gpt89">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx male cap"><p><strong><span class="co-c3002f">Průběh instalace</span><br/></strong></p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><h1>Jak probíhá instalace klimatizace</h1></div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw860"><p>Celá instalace probíhá na klíč - od zaměření a vedení potrubí přes montáž vnitřní i venkovní jednotky až po vakuaci okruhu a zprovoznění. Obvykle jde o práci na jeden den.</p></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Kontakt s kartami
Světlý úvod s dvěma kartami s ikonou (telefon, e-mail) v obrysu 1 px. Ikony jsou animace Lottie, ve vzorku prázdné. Třídy: c--box, lottie, max-width900, g--30.
Hlavní tlačítko je plná červená pilulka s velkými písmeny, na tmavé fotce bílé, zelené pro doplňkovou akci. Třídy: btn, btn--bila, btn--zelena, nav__btn.
Úvodní text se seznamem s červenými hvězdičkami místo odrážek. Třídy: star-bullet, tx--i, badge--obrys, mw900.
HTML kód
<main class="obsah" id="obsah"><section class="r r--mb pt100 t-pt60 pb20 t-pb0">
<div class="w"><div class="g">
<div class="c w50 m-w100 t-cmb25 c--mid">
<div class="c__in">
<div class="img iwp imw1060"><img alt="Klimatizace do bytu, domu i na chatu" height="707" src="assets/foto/jvsklima-klimatizace-do-domu-02.webp" width="1060"/></div>
</div>
</div>
<div class="c w50 m-w100 cmt60 t-cmt40 c--mid">
<div class="c__in cprf50 t-cpr0 cplf50 t-cpl0">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx tx--i mw800"><h2>Když je doma horko, klesá energie i kvalita odpočinku</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pb20">
<div class="g">
<div class="c">
<div class="tx tx--i mw900"><p><span class="co-657585">Vysoká teplota přes den snižuje soustředění a večer zhoršuje spánek. Zákazník zároveň neví, které řešení odpovídá jeho dispozici.</span></p></div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c">
<div class="tx tx--i mw900"><ul> <li class="star-bullet">Obava ze špatného výběru zařízení</li> <li class="star-bullet">Nejistota v porovnání nabídek</li> <li class="star-bullet">Nedůvěra v dlouhodobou funkčnost</li> </ul></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Citace
Světle modrý blok s citací zákazníka, jménem a rolí. Bez rámečku a bez rádiusu. Třídy: bq, bq__autor, bq__kdo, bq__role.
HTML kód
<main class="obsah" id="obsah"><section class="r r--mb max-width900 pt20 pb20">
<div class="w"><div class="g">
<div class="c">
<div class="ir pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c">
<blockquote class="bq co-000000"><p>Měli jsme přehřátý byt ve druhém patře a nevěděli, jestli nám stačí jedna jednotka nebo potřebujeme multisplit. Technik přijel, všechno vysvětlil a navrhl řešení, které sedí přesně na náš prostor. Montáž proběhla za jeden den, úklid perfektní.</p><div class="bq__autor"><span class="bq__kdo"><span class="bq__jmeno">Rodina Novákových</span><span class="bq__role">Byt 3+kk, Praha 6</span></span></div></blockquote>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
<main class="obsah" id="obsah"><section class="r r--mb pt60 p-pt40">
<div class="w"><div class="g">
<div class="c ta-c">
<div class="tx"><p>Naplánujte klimatizaci před letní špičkou<span class="co-c3002f"> → </span>Praha, Jižní, Střední, Západní Čechy a Vysočina<span class="co-c3002f"> → </span>Dodávka a montáž klimatizace od 25 000 Kč</p></div>
</div>
</div></div>
</section></main>
Karty s fotkou
Dvě velké fotokarty s nadpisem dole, popis se rozbalí po najetí. Třídy: fbox, fbox__bg, fbox__in, fbox__d, fbox__a, mh470.
HTML kód
<main class="obsah" id="obsah"><section class="r r--mb pt60 t-pt40 p-pt20">
<div class="w"><div class="g">
<div class="c">
<div class="ir">
<div class="g">
<div class="c w50 t-w100 t-cmb25 ta-c">
<div class="fbox mh470 t-mh400 p-mh280"><img alt="" class="fbox__bg" height="470" src="assets/foto/klimatizace-do-domu.webp" width="750"/><div class="fbox__in"><h3>Klimatizace do bytu, domu i na chatu</h3><div class="fbox__dw"><div class="fbox__d"><p>Klidný spánek, příjemná teplota v obýváku i na chatě. Kompletní klimatizace do domu od 25 000 Kč za místnost včetně montáže, materiálu a záruky.</p></div></div></div><a class="fbox__a" href="#"><span class="sr">Klimatizace do bytu, domu i na chatu</span></a></div>
</div>
<div class="c w50 t-w100">
<div class="fbox mh470 t-mh400 p-mh280"><img alt="" class="fbox__bg" height="470" src="assets/foto/klimatizace-do-firmy.webp" width="750"/><div class="fbox__in"><h3>Klimatizace do kanceláře a firmy</h3><div class="fbox__dw"><div class="fbox__d"><p>Klimatizace, která neruší práci a spolehlivě funguje celou sezónu. Montáž klimatizace pro kanceláře, prodejny i větší komerční prostory.</p></div></div></div><a class="fbox__a" href="#"><span class="sr">Klimatizace do kanceláře a firmy</span></a></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Loga partnerů
Řada šesti log značek klimatizací na střed pod nadpisem H3. Třídy: imgodkaz, img iw197, w16_6667, c--mid.
Tři bílé karty na světle modrém pásu, každá s barevným horním okrajem 4 px: červený problém, oranžové řešení, zelený výsledek. Třídy: problem, reseni, vysledek, bdt4-c3002f, bdt4-ff8330, bdt4-31b308.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full pt120 t-pt80 pb100 t-pb60 bg-f0f5fc">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw700"><h2>V létě příjemný chlad a v zimě útulné teplo v bytě i kanceláři</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pt20">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><p>Návrh, montáž klimatizace i pravidelný servis klimatizace od JVS Klima.</p></div>
</div>
</div>
</div>
<div class="ir mb40 pt20 pb20 t-pb0">
<div class="g g--40">
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Problém</strong></li> </ul></div>
<div class="tx tx--m"><h3>V létě horko, v zimě zima</h3></div>
<div class="tx"><p><span class="co-657585"><strong>Přehřátá ložnice, rozpálená kancelář, otevřená okna nepomáhají.</strong> V noci se nedá spát, přes den se nedá soustředit. A vy nevíte, jestli potřebujete split, multisplit nebo něco úplně jiného.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Řešení</strong></li> </ul></div>
<div class="tx tx--m"><h3>Doporučíme konkrétní řešení</h3></div>
<div class="tx"><p><span class="co-657585">Chápeme, že výběr klimatizace není jednoduchý. Proto vám na základě 1 800+ realizací <strong>doporučíme konkrétní řešení podle dispozice, využití a rozpočtu</strong>, ne podle toho, co zrovna potřebujeme prodat.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx vysledek tx--m co-31b308"><ul> <li><strong>Výsledek</strong></li> </ul></div>
<div class="tx tx--m"><h3>Příjemná teplota po celý rok</h3></div>
<div class="tx"><p><span class="co-657585"><strong>V létě chlad, v zimě úsporné vytápění. Tichý chod, jasný plán údržby</strong> a spolehlivý systém na roky dopředu. Nic neřešíte, všechno funguje.</span></p></div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tl"><a class="btn" href="#">Nezávazná poptávka</a></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Karty modelů
Mřížka tří karet s červeným okrajem nahoře, fotkou modelu, popisem a odkazem na prospekt s ikonou PDF. Třídy: iwt, iwt__t, prospekt, bdt4-c3002f, w33_3333.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt60 pb60 t-pb20 bg-f0f5fc" id="modely">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">Doporučené modely</span></div>
<div class="tx"><h2 class="h1">Řešení, která pravidelně instalujeme</h2></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw900"><p>Každý model má jiné přednosti. Vybereme ten, který nejlépe odpovídá vašemu prostoru a očekávání.</p></div>
</div>
</div>
</div>
<div class="ir mb40 pt20 pb20 t-pb0">
<div class="g g--40">
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Lidovka</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>ACOND ASB</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="ACOND ASB" height="500" src="assets/foto/typ-klimatizace-01.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Spolehlivá a cenově dostupná volba pro menší byty, ložnice nebo jednu hlavní místnost. Ideální řešení, pokud hledáte jednoduché a funkční chlazení bez zbytečných příplatků.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Lidovka</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Easy</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Easy" height="500" src="assets/foto/typ-klimatizace-02.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Praktický základní model pro běžné domácnosti, kde je prioritou dobrý poměr ceny a výkonu. Vhodný pro menší prostory nebo rekreační využití s důrazem na dostupnost.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-c3002f cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx problem tx--m co-c3002f"><ul> <li><strong>Lidovka</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Samsung AR35</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Samsung AR35" height="500" src="assets/foto/typ-klimatizace-03.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Ověřená klasika pro zákazníky, kteří chtějí spolehlivou značku a jednoduché ovládání. Dobrá volba do bytů, kanceláří nebo místností s pravidelným letním provozem.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Střední třída</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Comfort</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Comfort" height="500" src="assets/foto/typ-klimatizace-04.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Oblíbený model střední třídy s velmi dobrým poměrem ceny, výkonu a výbavy. Tichý provoz a široké možnosti využití z něj dělají ideální volbu pro byty i kanceláře.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Střední třída</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Unipure</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Unipure" height="500" src="assets/foto/typ-klimatizace-05.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Moderní klimatizace pro zákazníky, kteří chtějí vyšší komfort, elegantní vzhled a zdravější vzduch v interiéru. Skvělá volba do domácností, kde hraje roli design i nízká spotřeba.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-ff8330 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx reseni tx--m co-ff8330"><ul> <li><strong>Střední třída</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Samsung Comfort a Avant </strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Samsung Comfort a Avant" height="500" src="assets/foto/typ-klimatizace-06.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Vyvážené řešení pro každodenní používání s důrazem na komfort, tichý chod a moderní design. Vhodné pro domácnosti, které chtějí spolehlivý výkon a reprezentativní vzhled.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx vysledek tx--m co-31b308"><ul> <li><strong>Premium model</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Hisense Energy PRO-X<br/></strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Hisense Energy PRO-X" height="500" src="assets/foto/typ-klimatizace-07.webp" width="600"/></a></div>
<div class="tx male tx--m"><p><span class="co-657585">Prémiový model pro náročné zákazníky, kteří očekávají maximální výkon, nízkou spotřebu a špičkovou výbavu. Výborná volba pro celoroční provoz včetně účinného vytápění.</span></p></div>
<div class="sp sh10"></div>
<div class="iwt mt10 m-mt9 t-mt10 p-mt9"><img alt="" height="35" src="assets/foto/ikona-pdf.svg" width="35"/><div class="iwt__t"><a class="prospekt" href="#" rel="noopener" target="_blank">Zobrazit prospekt</a></div></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 cmt20 c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="tx vysledek tx--m co-31b308"><ul> <li><strong>Premium model</strong></li> </ul></div>
<div class="tx tx--m"><h3><strong>Samsung Premiere a Premiere+</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><a class="lb" href="#"><img alt="Samsung Premiere a Premiere+" height="500" src="assets/foto/typ-klimatizace-08.webp" width="600"/></a></div>
<div class="tx male"><p><span class="co-657585">Nejvyšší řada pro zákazníky, kteří chtějí to nejlepší bez kompromisů. Luxusní design, pokročilé technologie a maximální komfort dělají z této novinky reprezentativní řešení pro moderní interiéry.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb20 t-cmb0 cmt20 ta-c c--fill">
<div class="c__in bg-ffffff bdt4-31b308 cptf50 t-cpt50 p-cpt35 cprf50 t-cpr50 p-cpr35 cpbf50 t-cpb50 p-cpb35 cplf50 t-cpl50 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-31b308 co-ffffff badge--kruh">+</span></div>
<div class="sp sh60 t-sh40 p-sh20"></div>
<div class="tx tx--m"><h3><strong>Klimatizace na míru pro byt, dům nebo kancelář</strong></h3></div>
<div class="img img--mb mb30 t-mb20 iwp t-iw600 p-iwp imw600 img--c"><img alt="JVS Klima - klimatizace na míru" height="338" src="assets/foto/klimatizace-na-miru.svg" width="600"/></div>
<div class="tx tx--m"><p>Pokud nechcete vybírat jen podle katalogu, připravíme řešení na míru podle dispozice a provozu.</p></div>
<div class="tl"><a class="btn btn--zelena btn--m20" href="#">Individuální nabídka</a></div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Karty obav
Karty s kulatým červeným odznakem na okraji, ikonou a popisem obavy zákazníka. Třídy: badge--kruh, badges--kruh, img iw90, c__in.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full pt100 t-pt80 p-pt60 pb60 t-pb20 bg-f0f5fc">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">Znáte to?</span></div>
<div class="tx"><h2 class="h1">Vybrat správnou klimatizaci není snadné</h2></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw800"><p>Většina lidí řeší stejné obavy. A přesně proto jsme tady.</p></div>
</div>
</div>
</div>
<div class="ir pt40 p-pt20">
<div class="g g--40">
<div class="c w33_3333 m-w50 t-w100 cmb40 c--fill">
<div class="c__in c--box bdc-c3002f cptf50 t-cpt40 p-cpt35 cprf50 t-cpr40 p-cpr35 cpbf50 t-cpb40 p-cpb35 cplf50 t-cpl40 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-c3002f co-ffffff badge--kruh">×</span></div>
<div class="img img--mb iw90"><img alt="V létě vedro, v zimě zima" height="90" src="assets/foto/ikona-klima-obava-01.svg" width="90"/></div>
<div class="tx tx--m"><h3>V létě vedro, v zimě zima</h3></div>
<div class="tx"><p><span class="co-657585">Přetopené pokoje, bezesné noci a pocit, že vaše bydlení nefunguje tak, jak má. Řešení přitom existuje.</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb40 c--fill">
<div class="c__in c--box bdc-c3002f cptf50 t-cpt40 p-cpt35 cprf50 t-cpr40 p-cpr35 cpbf50 t-cpb40 p-cpb35 cplf50 t-cpl40 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-c3002f co-ffffff badge--kruh">×</span></div>
<div class="img img--mb iw90"><img alt="Nepřehledná nabídka" height="90" src="assets/foto/ikona-klima-obava-02.svg" width="90"/></div>
<div class="tx tx--m"><h3>Nepřehledná nabídka</h3></div>
<div class="tx"><p><span class="co-657585">Desítky značek, modelů a instalatérů. Jak poznat, co je pro váš dům to pravé a komu svěřit instalaci?</span></p></div>
</div>
</div>
<div class="c w33_3333 m-w50 t-w100 cmb40 c--fill">
<div class="c__in c--box bdc-c3002f cptf50 t-cpt40 p-cpt35 cprf50 t-cpr40 p-cpr35 cpbf50 t-cpb40 p-cpb35 cplf50 t-cpl40 p-cpl35">
<div class="badges badges--kruh"><span class="badge bg-c3002f co-ffffff badge--kruh">×</span></div>
<div class="img img--mb iw90"><img alt="Strach ze špatné investice" height="90" src="assets/foto/ikona-klima-obava-03.svg" width="90"/></div>
<div class="tx tx--m"><h3>Strach ze špatné investice</h3></div>
<div class="tx"><p><span class="co-657585">Nekvalitní montáž, skryté poplatky nebo zařízení, které nesplní očekávání. To jsou obavy, které nechcete řešit.</span></p></div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Fotka s body
Fotka s pulzujícími červenými body, po kliknutí se u nich ukáže bublina. Vedle fotky číslované kroky. Třídy: hotspoty, hs__b, kroky, kroky__c, kroky__t.
HTML kód
<main class="obsah" id="obsah"><section class="r r--mb pt60">
<div class="w"><div class="g">
<div class="c w50 m-w100 t-cmb25 c--mid">
<div class="c__in">
<div class="hotspoty"><img alt="Profesionální instalace klimatizace na klíč od JVS Klima" height="1275" src="assets/foto/klimatizace-01.webp" width="1500"/><div class="hs hs--bottom" style="top:55.659%;left:69.4175%"><button aria-expanded="false" aria-label="Zobrazit informaci" class="hs__b" type="button"></button><div class="hs__t" hidden=""><div class="hs__in">Voláte přímo technikovi, který vaši zakázku povede od začátku do konce. Žádné přepojování nebo nekonečné čekání.<button aria-label="Zavřít" class="hs__z" type="button"></button></div></div></div><div class="hs hs--bottom" style="top:22.7252%;left:33.0097%"><button aria-expanded="false" aria-label="Zobrazit informaci" class="hs__b" type="button"></button><div class="hs__t" hidden=""><div class="hs__in">Nemáte představu o řešení? Schůzku domluvíme i bez předchozí nabídky.<button aria-label="Zavřít" class="hs__z" type="button"></button></div></div></div></div>
</div>
</div>
<div class="c w50 m-w100 cmt80 t-cmt40 c--mid">
<div class="c__in cprf50 t-cpr0 cplf50 t-cpl0">
<div class="ir r--mb pb20 t-pb40 p-pb20">
<div class="g">
<div class="c">
<div class="tx tx--i mw510"><h2>Tři kroky od prvního kontaktu k funkční instalaci</h2></div>
</div>
</div>
</div>
<ol class="kroky kroky--3"><li><span class="kroky__c">1</span><div class="kroky__t"><h4>Telefonát a orientační nabídka</h4><p>Probereme vaši představu o řešení po telefonu a připravíme orientační cenovou nabídku. Získáte srozumitelné podklady pro srovnání s dalšími firmami bez nutnosti osobní schůzky.</p></div></li><li><span class="kroky__c">2</span><div class="kroky__t"><h4>Osobní schůzka a konečná cena</h4><p>Jakmile se rozhodnete pro nás, domluvíme osobní prohlídku prostoru. Na jejím základě připravíme finální cenovou nabídku přesně na míru bez skrytých poplatků.</p></div></li><li><span class="kroky__c">3</span><div class="kroky__t"><h4>Montáž, spuštění a doporučení</h4><p>Montáž klimatizace trvá zpravidla jeden den. Po realizaci předáme instrukce k obsluze a navrhneme interval pravidelné údržby.</p></div></li></ol>
</div>
</div>
</div></div>
</section></main>
Tři kroky velkými čísly
Světlý pás se třemi sloupci, červené velké číslo a H3. Třídy: stredni-nadpis, badge--obrys, bg-f0f5fc.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full pt20 p-pt40 bg-f0f5fc">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb pt60 t-pt40 p-pt20 pb30" id="poptavka">
<div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">JAK TO PROBÍHÁ</span></div>
<div class="tx tx--i mw800"><h2 class="h1">Tři kroky ke klimatizaci</h2></div>
</div>
</div>
</div>
<div class="ir r--mb pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="tx tx--i mw900"><p><span class="co-657585">Doporučujeme řešení podle počtu místností, orientace prostoru a hlučnosti. Nejdříve připravíme orientační nabídku, potom konkrétní návrh.</span></p></div>
</div>
</div>
</div>
<div class="ir r--mb pt20">
<div class="g g--50">
<div class="c w33_3333 p-w100 cmb40 ta-c">
<div class="tx stredni-nadpis mb40 t-mb20 mt20"><p><strong><span class="co-c3002f">01.</span><br/></strong></p></div>
<div class="tx tx--m"><h3><strong>Telefonát a orientační nabídka<br/></strong></h3></div>
<div class="tx mt-10 tx--i mw450"><p><span class="co-657585">Upřesníme typ objektu, počet místností a vaši představu o řešení. Na základě hovoru připravíme orientační cenovou nabídku ke srovnání.</span></p></div>
</div>
<div class="c w33_3333 p-w100 cmb40 ta-c">
<div class="tx stredni-nadpis mb40 t-mb20 mt20"><p><strong><span class="co-c3002f">02.</span><br/></strong></p></div>
<div class="tx tx--m"><h3><strong>Osobní schůzka a finální nabídka<br/></strong></h3></div>
<div class="tx mt-10 tx--i mw450"><p><span class="co-657585">Po vašem rozhodnutí domluvíme osobní prohlídku. Na jejím základě dostanete finální nabídku přesně podle dispozice a technických podmínek.</span></p></div>
</div>
<div class="c w33_3333 p-w100 cmb40 ta-c">
<div class="tx stredni-nadpis mb40 t-mb20 mt20"><p><strong><span class="co-c3002f">03.</span><br/></strong></p></div>
<div class="tx tx--m"><h3><strong>Instalace, spuštění, předání</strong></h3></div>
<div class="tx mt-10 tx--i mw450"><p><span class="co-657585">Montáž doplníme o praktické instrukce pro používání a návrh servisu podle zátěže systému.</span></p></div>
</div>
</div>
</div>
<div class="ir mb30 max-width900 pt20">
<div class="g g--30">
<div class="c w50 p-w100 p-cmb30 ta-c c--fill">
<div class="c__in c--box cpt50 t-cpt40 cpr15 cpb50 t-cpb40 cpl15">
<div aria-hidden="true" class="lottie" data-loop="true" data-speed="0.6" data-src="assets/lottie/ikona-telefon.json" style="width:70px;height:70px"></div>
<div class="sp sh40 t-sh20 t-mt20 t-mb20"></div>
<div class="tx tx--m"><h3><strong>+420 722 220 508</strong></h3></div>
<div class="tx male"><p>Po-Pá · 7:00-17:00</p></div>
</div>
</div>
<div class="c w50 p-w100 p-cmb30 ta-c c--fill">
<div class="c__in c--box cpt50 t-cpt40 cpr15 cpb50 t-cpb40 cpl15">
<div aria-hidden="true" class="lottie" data-loop="true" data-speed="0.3" data-src="assets/lottie/ikona-mail.json" style="width:70px;height:70px"></div>
<div class="sp sh40 t-sh20 t-mt20 t-mb20"></div>
<div class="tx tx--m"><h3><a href="#">klima@jvsklima.cz</a></h3></div>
<div class="tx male"><p>Napište pár vět, stačí stručně, ozveme se vám</p></div>
</div>
</div>
</div>
</div>
<div class="ir r--mb pt20 t-pt0 pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="sp sh1 mt5 t-mt20 mb5 t-mb20"></div>
</div>
</div>
</div>
<div class="ir pb20 t-pb0">
<div class="g">
<div class="c ta-c">
<div class="tx nejmensi tx--i mw1000"><p><span class="co-657585">U jednodušších instalací pro jednu místnost se běžně pohybujeme kolem 25 000 Kč. U větších řešení závisí cena na počtu jednotek a složitosti trasy. Orientační cena slouží pro základní představu. Přesnou nabídku připravíme po upřesnění dispozice a technických podmínek.</span></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Recenze
Souhrn hodnocení s hvězdičkami a posuvník karet z Googlu s fotkou autora. Třídy: rec__souhrn, rec__pas, rec__k, rec__text, rec__hlava, rec__foto.
HTML kód
<main class="obsah" id="obsah"><section class="r">
<div class="w"><div class="g">
<div class="c">
<div class="ir pt40">
<div class="g">
<div class="c t-cmt-20 p-cmt-40">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx tx--m"><h2>Hodnocení zákazníků</h2></div>
<div class="tx"><p><a href="#" rel="noopener" target="_blank">JVS Klima</a></p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="c__in cpz30">
<div><div class="rec">
<p class="rec__souhrn"><span class="rec__celkem">5,0</span><span aria-hidden="true" class="rec__hv"><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg><svg viewbox="0 0 24 24"><path d="M12 2l3 7h7l-5.6 4.4 2.1 7.6L12 16.8 5.5 21l2.1-7.6L2 9h7z"></path></svg></span><span class="sr">Hodnocení 5,0 z 5 hvězdiček, celkem 68 recenzí na Google</span></p>
<div class="rec__slider" data-autoplay="5000"><ul class="rec__pas">
<li class="rec__k"><p class="rec__text">Skvělá spolupráce s JVS Klima, instalace, rychlá domluva, je spolehnutí na jejich slova. Komunikace i přes sociální sitě. V rámci záruky jsem řešil závadu - opět kvalitní služby, výměna dílu, zprovoznění. Jelikož mám nestandartní instalaci kliatizace ve skleníku a vše probíhalo na podle domluvy - umístění bylo dostatečně komunikováno, typ klimatizace konzultován více než dostatečně s upozoněním na kvalitu výrobce a provozuschopnost klimatizace pro mé potřeby. Doporučuji.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-01.webp" width="50"/><a href="#" rel="noopener" target="_blank">Ctirad Prochazka</a></div></li>
<li class="rec__k"><p class="rec__text">Poptavali jsme v okoli i dalsi firmy na 3 klimatizace do RD, ale vetsina se ani nedokazala ozvat zpet. Naopak JVS hned odpovedeli, domluvili jsme na schuzce, konzultovali s nami, co bylo treba. Nabidka byla fer, pristup a komunikace super a profi, i presto, ze k nam museli jet na vicekrat, protoze byl dum v rekontrukci. Ted jen aby vse slapalo ;)</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-02.webp" width="50"/><a href="#" rel="noopener" target="_blank">Barbora Kolář</a></div></li>
<li class="rec__k"><p class="rec__text">Rychlé jednání, profesionální přístup, dobrá cena. Mohu jen doporučit.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-03.webp" width="50"/><a href="#" rel="noopener" target="_blank">apeks apeks</a></div></li>
<li class="rec__k"><p class="rec__text">Velká spokojenost s touto firmou. U nás v Českých Budějovicích byla velmi složitá realizace klimatizace (asi na nás budou chvíli vzpomínat) do půdní vestavby, ale chlapi si poradili, makali bez přestávky, bez jídla a za 2 dny bylo hotovo. Jako bonus po sobě ještě uklidili. Od samotného návrhu až po realizaci velmi solidní a slušné vystupování. Když nezvedli telefon, volali zpět. Na čem jsme se domluvili, to platilo, zkrátka profíci každým coulem :-) Velmi doporučuji a moc díky!!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-04.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jakub Chán</a></div></li>
<li class="rec__k"><p class="rec__text">Realizace klimatizace Daikin Comfora proběhla dle domluvy do týdne za cenu předem jasnou bez vedlejších nákladů a v porovnání od konkurence nejvýhodněji. Krásně mi vytopí domek a bez starosti, ekonomicky a úsporně, mohu si i odvlhčovat místnosti a nastavovat teplotu se sepnutím nebo vypnutím předem na x hodin podle potřeby a to i na dálku přes apku. Není třeba už používat kotel na tuhá paliva 🙏. Pan Jelínek s kolegou byli hodně šikovní, lidský, slušní a s dobrou náladou. Dostala jsem všechny zásadní informace ohledně používaní a servisu. Kolega pana Jelínka mi ochotně přivrtal po skončení věšáky na ovladače a ještě to ochotně předělal, protože jsem si rozmyslela místo :)). Děkuju za spolupráci a váš přístup ! S úctou JK Petříkov</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-05.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jitka Korandova</a></div></li>
<li class="rec__k"><p class="rec__text">Super jednání a práce. Doporučuji</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-06.webp" width="50"/><a href="#" rel="noopener" target="_blank">Leoš Mrzena</a></div></li>
<li class="rec__k"><p class="rec__text">Není to velká firma, ale v tom je kouzlo jejich služeb. Pánové jsou z oboru, mají přehled. Jednoduchý a čistý obchod. Dali jsme poptávku, přijeli zaměřit, promyslet vhodnou technologii včetně výkonů jednotlivých jednotek. Nahlásili se dopředu, makali rychle a přesně včetně úklidu po sobě. Perfektní, na co jsme si podali ruku to platí. Doporučuji všema deseti.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-07.webp" width="50"/><a href="#" rel="noopener" target="_blank">Petr Stibor</a></div></li>
<li class="rec__k"><p class="rec__text">Perfektně odvedená práce, vstřícné jednání, realistická cena za celou dodávku klimatizace. Doporučuji.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/avatar.svg" width="50"/><a href="#" rel="noopener" target="_blank">Libor Hynek</a></div></li>
<li class="rec__k"><p class="rec__text">Děkuji firmě za perfektně provedenou práci. Je radost, když jednáte s někým, kdo nejen své práci rozumí, ale co slíbí, tak přesně splní.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-09.webp" width="50"/><a href="#" rel="noopener" target="_blank">Pavel Roubíček</a></div></li>
<li class="rec__k"><p class="rec__text">Skvělá zkušenost s firmou JVS klima - profesionální přístup, vše proběhlo podle dohody a bez problémů. Mohu jen doporučit!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-10.webp" width="50"/><a href="#" rel="noopener" target="_blank">Monika Kašparová</a></div></li>
<li class="rec__k"><p class="rec__text">Naprosto profesionální přístup. Ihned zareagovali na poptávku, rychle přijeli na prohlídku a zaslali cenovou nabídku. Kvalitně provedená montáž velice schopnými řemeslníky, kteří si poradili i s náročnější průchodností stěn, elektroinstalací atd. Z celkem šesti nabídek nejlepší cena. Mohu opravdu doporučit!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-11.webp" width="50"/><a href="#" rel="noopener" target="_blank">Michal Vincenc</a></div></li>
<li class="rec__k"><p class="rec__text">Velmi doporučuji společnost JVS Klima. Nechala jsem si nainstalovat A/C jednotku do panelového domu s vývodem na plochou, asfaltovou střechu pro vnější jednotku. Tedy poměrně šložité řešení. JVS Klima, pod vedením 2 profesionálních mužů, vše provedla bez problému. Skvělá komunikace (i v pátek ve večerních hodinách), rychlý termín instalce a samotná instalace, včetně prostupu na střechu, trvala cca 4 hodiny. Přesně věděli, co dělají. Tedy za mě 5*.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-12.webp" width="50"/><a href="#" rel="noopener" target="_blank">Lucie Švecová</a></div></li>
<li class="rec__k"><p class="rec__text">Naprostá spokojenost, vše podle dohody, flexibilita, ochota, vysoká profesionalita. Atypické řešení technického problému na místě obratem. Pracovníky firmy chci chtěla pochválit, jak pokud jde o profesionalitu, jednání, za minimální nepořádek, i za to, jak po sobě skvěle uklidili. Zakrývala jsem kvůli nutnému vrtání otvoru do zdi celou místnost - stačilo díky zakrýt jen nejbližší okolí! Ještě jednou moc děkuji. Klimatizace funguje skvěle.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-13.webp" width="50"/><a href="#" rel="noopener" target="_blank">Lenka Clara</a></div></li>
<li class="rec__k"><p class="rec__text">Firmu JVS Klima mohu jen doporučit. Na dnešní dobu opravdu výjimečné jednání, profesionalita, slušnost a do puntíku dodrženo vše co je dohodnuto. Ještě jednou díky pánové.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-14.webp" width="50"/><a href="#" rel="noopener" target="_blank">Pavel Matoušek</a></div></li>
<li class="rec__k"><p class="rec__text">Rád bych se podělil o velmi pozitivní zkušenost s firmou JVS Klima. Od samého počátku bylo jasné, že se jedná o profesionální tým, který klade důraz na spokojenost zákazníků. Komunikace byla vždy příjemná a otevřená, a i když se zakázka nakonec neuskutečnila z naší strany, firma se zachovala velmi seriózně. Bez jakýchkoliv komplikací nám vrátili peníze, což svědčí o jejich férovém přístupu. Taková ochota a vstřícnost se dnes jen tak nevidí. I když jsme zakázku nerealizovali, tuto firmu mohu vřele doporučit všem, kteří hledají spolehlivého a seriózního partnera. Děkujeme za profesionální a lidský přístup!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-15.webp" width="50"/><a href="#" rel="noopener" target="_blank">Miroslav Osko</a></div></li>
<li class="rec__k"><p class="rec__text">Velká spokojenost. Tuto firmu mohu doporučit. Žádné zálohy a skvělá práce.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-16.webp" width="50"/><a href="#" rel="noopener" target="_blank">Ivana Cardová</a></div></li>
<li class="rec__k"><p class="rec__text">Tuto firmu rozhodně doporučuji. Oceňuji zejména rozumné ceny, flexibilní a individuální přístup a dále pak, že všechny dohody bezezbytku dodržela.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-17.webp" width="50"/><a href="#" rel="noopener" target="_blank">Ondrej Bartos</a></div></li>
<li class="rec__k"><p class="rec__text">JVS Klima s.r.o. odvedla profesionální práci, žádné ulejvání, práce pouze s velmi malými přestávkami a velmi příjemná komunikace, dodržení termínu a v mém případě dokonce o den dříve. Osobně tuto partu poctivých mladých kluků doporučuji. To, že si po sobě uklidili, brali jako samozřejmost. Poměrně netypicky jsem platil celou zakázku poté, co jsem měl vše zprovozněné a funkční.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-18.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jan Mejzlík</a></div></li>
<li class="rec__k"><p class="rec__text">Firma mi montovala klimatizaci, odvedli skvělou práci, perfektně vymysleli všechny rozvody, aby byly schované a nemusel se hyzdit byt nějakými lištami. Navíc je s nimi skvělá komunikace. Prostě za mne naprostá spokojenost, vše funguje jak má. Tuto firmu stoprocentně doporučuji 🙂.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-19.webp" width="50"/><a href="#" rel="noopener" target="_blank">Kateřina Benešová</a></div></li>
<li class="rec__k"><p class="rec__text">Senzační přístup, nebyl problém přijet na obhlídku, kvalifikovaně poradit! Velký rozdíl proti jiným firmám, které vše řeší přes internetovou objednávku, kdy člověk v zásadě neví, co objednává. Tady velmi zásadní rada ohledně umístění čerpadla, blesková kalkulace a rychle i montáž. Tak už si topíme a děkujeme skvělým pánům z JVS, které bychom všem zákazníkům doporučili!</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-20.webp" width="50"/><a href="#" rel="noopener" target="_blank">Jana Černá</a></div></li>
<li class="rec__k"><p class="rec__text">Předně oceňuji, že při výjezdu nás navštívil kvalifikovaný zástupce a společně s námi vyhodnotil uvažované zařízení, vysvětlil podrobnosti a navrhl vhodné (lepší) umístění /v místnosti i venku/ s ohledem na estetiku místnosti i snížení příp. hlučnosti. Dále oceňuji dodržení termínu, ceny kvality a instruktáže po uvedení do provozu i nabídku operativního řešení příp. problémů. Pro 5 hvězdiček a přání mnoha obchodních úspěchů. V. Černý</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-21.webp" width="50"/><a href="#" rel="noopener" target="_blank">Václav Černý</a></div></li>
<li class="rec__k"><p class="rec__text">VJS Klima, pánové M.Jelínek spolu s V.Slávkem , nám nedávno instalovali klima do nepříliž "přátelských" prostor našeho panelákového bytu. Oba kluci jsou nejen dobří řemeslníci, ale i prima komunikativní typy, kteří vás svým jednáním přesvědčí o správnosti vaší volby při výběru firmy. Tomáš Kašpar, tel. [telefon odstraněn]</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-22.webp" width="50"/><a href="#" rel="noopener" target="_blank">Tomáš Kašpar</a></div></li>
<li class="rec__k"><p class="rec__text">Vřele doporučuji, oba pánové super, vše co se domluvilo, také platilo. Vše provedeno kvalitně, profesionálně a včas.</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-23.webp" width="50"/><a href="#" rel="noopener" target="_blank">Martin Volek</a></div></li>
<li class="rec__k"><p class="rec__text">Naprosto špičková firma. Po domluvení se na jádrovém vrtání, jsem měl po telefonu dobrý pocit a nemýlil jsem se. Chlapci přijeli ve smluvený čas, a dopředu mi i zavolali. Vše proběhlo jak jsme se domluvili a naopak jsem při jejich zásahu zjistil, že by jsem mi hodil i další prostup do sklepa, kvůli nově plánovanému bazénu. Domluvili jsme se na dalším prostupu a oni vše ochotně provrtali a musím říct, že v dnešní době s jejich vybavením to bylo i za velmi solidní cenu. Od začátku jsem cítil, že o práci mají zájem a já je nemusím "prosit" jako většinu řemeslníků. Příjemní, dochvilní, profesionální. Asi takto by jsme je definoval tuto firmu a všem mohu jen doporučit! Přeji mnoho úspěchů v podnikání a velmi děkuji</p><div class="rec__hlava"><img alt="" class="rec__foto" height="50" src="assets/recenze/autor-24.webp" width="50"/><a href="#" rel="noopener" target="_blank">Michal Mareš</a></div></li>
</ul></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="ir">
<div class="g">
<div class="c ta-c">
<div class="tl"><a class="btn" href="#" rel="noopener" target="_blank">Recenze na Google</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Galerie realizací
Vodorovný pás fotek výšky 500 px s popiskem pod každou, posouvá se tažením. Třídy: gal, gal__pas, gal__i, lb.
HTML kód
<main class="obsah" id="obsah"><section class="r r--fullc pb80 t-pb60 p-pb40 bg-f0f5fc">
<div class="g g--0">
<div class="c">
<div class="ir">
<div class="g g--0">
<div class="c ta-c">
<div class="gal" data-autoplay="5000"><div class="gal__pas"><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Venkovní jednotka · novostavba, České Budějovice" href="#"><img alt="Venkovní jednotka · novostavba, České Budějovice" height="1012" src="assets/foto/realizace-klimatizace-domacnost-09.webp" width="1350"/></a><figcaption>Venkovní jednotka · novostavba, České Budějovice</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree Avant - černé provedení" href="#"><img alt="Samsung WindFree Avant - černé provedení" height="1012" src="assets/foto/realizace-klimatizace-domacnost-05.webp" width="1350"/></a><figcaption>Samsung WindFree Avant - černé provedení</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree · byt, Praha 5" href="#"><img alt="Samsung WindFree · byt, Praha 5" height="1125" src="assets/foto/realizace-klimatizace-domacnost-04.webp" width="1500"/></a><figcaption>Samsung WindFree · byt, Praha 5</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree · byt, Praha 5" href="#"><img alt="Samsung WindFree · byt, Praha 5" height="1500" src="assets/foto/realizace-klimatizace-domacnost-10.webp" width="1125"/></a><figcaption>Samsung WindFree · byt, Praha 5</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Venkovní jednotka ACOND · konzole na fasádě" href="#"><img alt="Venkovní jednotka ACOND · konzole na fasádě" height="1125" src="assets/foto/realizace-klimatizace-domacnost-06.webp" width="1500"/></a><figcaption>Venkovní jednotka ACOND · konzole na fasádě</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="ACOND - Praha" href="#"><img alt="ACOND - Praha" height="1125" src="assets/foto/realizace-klimatizace-domacnost-07.webp" width="1500"/></a><figcaption>ACOND - Praha</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Kazetová klimatizace Samsung" href="#"><img alt="Kazetová klimatizace Samsung" height="1500" src="assets/foto/realizace-klimatizace-domacnost-02.webp" width="1125"/></a><figcaption>Kazetová klimatizace Samsung</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree Comfort" href="#"><img alt="Samsung WindFree Comfort" height="1500" src="assets/foto/realizace-klimatizace-domacnost-01.webp" width="1125"/></a><figcaption>Samsung WindFree Comfort</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Samsung WindFree · rodinný dům, Tábor" href="#"><img alt="Samsung WindFree · rodinný dům, Tábor" height="1500" src="assets/foto/realizace-klimatizace-domacnost-12.webp" width="1125"/></a><figcaption>Samsung WindFree · rodinný dům, Tábor</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Jednocestná klimatizační jednotka Samsung" href="#"><img alt="Jednocestná klimatizační jednotka Samsung" height="1125" src="assets/foto/realizace-klimatizace-domacnost-03.webp" width="1500"/></a><figcaption>Jednocestná klimatizační jednotka Samsung</figcaption></figure><figure class="gal__i"><a class="lb" data-galerie="g1" data-popis="Vnitřní klimatizační jednotka ACOND · byt, Praha 5" href="#"><img alt="Vnitřní klimatizační jednotka ACOND · byt, Praha 5" height="1125" src="assets/foto/realizace-klimatizace-domacnost-08.webp" width="1500"/></a><figcaption>Vnitřní klimatizační jednotka ACOND · byt, Praha 5</figcaption></figure></div></div>
</div>
</div>
</div>
<div class="ir pt60 p-pt40">
<div class="g g--0">
<div class="c ta-c">
<div class="tl"><a class="btn" href="#">Chci podobné řešení</a></div>
</div>
</div>
</div>
</div>
</div>
</section></main>
Kroky instalace
Vlevo lepivý seznam kroků s počítadlem, vpravo fotky jednotlivých kroků. Třídy: tabs, tabs__nav, tabs__akt, tabs__obsah, tabs__p, tabs__img.
HTML kód
<main class="obsah" id="obsah"><section class="r r--mb r--kroky max-width1200 pt120 pb40">
<div class="w"><div class="g">
<div class="c">
<div class="tabs"><nav aria-label="Kroky instalace" class="tabs__nav"><p class="tabs__poc"><span class="tabs__akt">1</span> / 13</p><ol><li><a href="#">Rozměření středu jednotky a ukotvení plechu</a></li><li><a href="#">Kontrola umístění jednotky a provrtání otvoru ven</a></li><li><a href="#">Vylištování trasy potrubí uvnitř objektu</a></li><li><a href="#">Vylištování trasy potrubí venku</a></li><li><a href="#">Příprava na ukotvení venkovní jednotky</a></li><li><a href="#">Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky</a></li><li><a href="#">Natažení potrubí a zalištování trasy</a></li><li><a href="#">Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci</a></li><li><a href="#">Připojení hadičky na odvod kondenzátu z vnitřní jednotky</a></li><li><a href="#">Zapěnění otvoru</a></li><li><a href="#">Upevnění venkovní jednotky a její připojení</a></li><li><a href="#">Kontrola těsnosti a vakuace chladivového okruhu</a></li><li><a href="#">Výsledná montáž</a></li></ol></nav><div class="tabs__obsah"><section class="tabs__p" id="krok-1"><h3 class="tabs__h">Rozměření středu jednotky a ukotvení plechu</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Rozměření středu jednotky a ukotvení plechu" href="#"><img alt="Rozměření středu jednotky a ukotvení plechu" height="1500" src="assets/foto/1.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-2"><h3 class="tabs__h">Kontrola umístění jednotky a provrtání otvoru ven</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Kontrola umístění jednotky a provrtání otvoru ven" href="#"><img alt="Kontrola umístění jednotky a provrtání otvoru ven" height="1500" src="assets/foto/2.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-3"><h3 class="tabs__h">Vylištování trasy potrubí uvnitř objektu</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Vylištování trasy potrubí uvnitř objektu" href="#"><img alt="Vylištování trasy potrubí uvnitř objektu" height="1500" src="assets/foto/3.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-4"><h3 class="tabs__h">Vylištování trasy potrubí venku</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Vylištování trasy potrubí venku" href="#"><img alt="Vylištování trasy potrubí venku" height="1500" src="assets/foto/4.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-5"><h3 class="tabs__h">Příprava na ukotvení venkovní jednotky</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Příprava na ukotvení venkovní jednotky" href="#"><img alt="Příprava na ukotvení venkovní jednotky" height="1500" src="assets/foto/5.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-6"><h3 class="tabs__h">Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" href="#"><img alt="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" height="1500" src="assets/foto/6-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" href="#"><img alt="Natažení hadičky pro odvod kondenzátu při chlazení z vnitřní jednotky" height="1500" src="assets/foto/6-2.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-7"><h3 class="tabs__h">Natažení potrubí a zalištování trasy</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Natažení potrubí a zalištování trasy" href="#"><img alt="Natažení potrubí a zalištování trasy" height="1500" src="assets/foto/7-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Natažení potrubí a zalištování trasy" href="#"><img alt="Natažení potrubí a zalištování trasy" height="1500" src="assets/foto/7-2.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-8"><h3 class="tabs__h">Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" href="#"><img alt="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" height="1500" src="assets/foto/8-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" href="#"><img alt="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" height="1500" src="assets/foto/8-2.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" href="#"><img alt="Napertlování potrubí, jeho připojení a zaizolování proti kondenzaci" height="1500" src="assets/foto/8-3.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-9"><h3 class="tabs__h">Připojení hadičky na odvod kondenzátu z vnitřní jednotky</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Připojení hadičky na odvod kondenzátu z vnitřní jednotky" href="#"><img alt="Připojení hadičky na odvod kondenzátu z vnitřní jednotky" height="1500" src="assets/foto/9.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-10"><h3 class="tabs__h">Zapěnění otvoru</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Zapěnění otvoru" href="#"><img alt="Zapěnění otvoru" height="1500" src="assets/foto/10.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-11"><h3 class="tabs__h">Upevnění venkovní jednotky a její připojení</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Upevnění venkovní jednotky a její připojení" href="#"><img alt="Upevnění venkovní jednotky a její připojení" height="1500" src="assets/foto/11.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-12"><h3 class="tabs__h">Kontrola těsnosti a vakuace chladivového okruhu</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Kontrola těsnosti a vakuace chladivového okruhu" href="#"><img alt="Kontrola těsnosti a vakuace chladivového okruhu" height="1500" src="assets/foto/12.webp" width="1125"/></a></div></section><section class="tabs__p" id="krok-13"><h3 class="tabs__h">Výsledná montáž</h3><div class="tabs__img"><a class="lb" data-galerie="kroky" data-popis="Výsledná montáž" href="#"><img alt="Výsledná montáž" height="1500" src="assets/foto/13-1.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Výsledná montáž" href="#"><img alt="Výsledná montáž" height="1500" src="assets/foto/13-2.webp" width="1125"/></a><a class="lb" data-galerie="kroky" data-popis="Výsledná montáž" href="#"><img alt="Výsledná montáž" height="1500" src="assets/foto/13-3.webp" width="1125"/></a></div></section></div></div>
</div>
</div></div>
</section></main>
Výzva k akci
Závěrečný blok s nadpisem, vysvětlením a červeným tlačítkem na střed. Třídy: r, tx--i, mw800, tl, btn.
Formulář na světle modrém pásu s popisky nad poli, zaoblenými poli 10 px a červenou odesílací pilulkou. Třídy: form, form__f, form__row, form__req, field__err, form__odeslat.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full pt100 p-pt60 pb80 t-pb100 p-pb40 bg-f0f5fc" id="poptavka">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="badges"><span class="badge bg-ffffff co-c3002f badge--obrys">NEZÁVAZNÁ POPTÁVKA</span></div>
<div class="tx tx--i mw680"><h2 class="h1">Popište svůj prostor a ozveme se s návrhem</h2></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c ta-c">
<div class="tx"><p>Vyplňte základní údaje a my se vám ozveme s orientační nabídkou nebo upřesňujícími otázkami.</p></div>
</div>
</div>
</div>
<div class="ir stred-max-width-form pb40 p-pb20">
<div class="g">
<div class="c">
<div><form class="form" id="poptavka-form">
<div class="form__f">
<label for="f-jmeno">Jméno a příjmení (firma) <span aria-hidden="true" class="form__req">*</span></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="form__row">
<div class="form__f">
<label for="f-email">E-mail <span aria-hidden="true" class="form__req">*</span></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="" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
<div class="form__f">
<label for="f-telefon">Telefon <span aria-hidden="true" class="form__req">*</span></label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 722 220 508 nebo +420 722 220 508." id="f-telefon" maxlength="40" name="telefon" placeholder="722 220 508" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
</div>
<div class="form__row">
<div class="form__f">
<span class="form__lbl" id="f-typ">Typ objektu</span>
<details class="ms ms--jeden">
<summary aria-describedby="f-typ">Vyberte</summary>
<div aria-labelledby="f-typ" class="ms__list" role="radiogroup">
<label><input name="typ" type="radio" value="Byt"/>Byt</label>
<label><input name="typ" type="radio" value="Bytový dům (SVJ)"/>Bytový dům (SVJ)</label>
<label><input name="typ" type="radio" value="Rodinný dům"/>Rodinný dům</label>
<label><input name="typ" type="radio" value="Chata"/>Chata</label>
<label><input name="typ" type="radio" value="Kancelář"/>Kancelář</label>
<label><input name="typ" type="radio" value="Hotel / penzion"/>Hotel / penzion</label>
<label><input name="typ" type="radio" value="Prodejna / provozovna"/>Prodejna / provozovna</label>
<label><input name="typ" type="radio" value="Jiné"/>Jiné</label>
</div>
</details>
</div>
<div class="form__f">
<label for="f-misto">Místo realizace <span aria-hidden="true" class="form__req">*</span></label>
<input aria-describedby="f-misto-err" autocomplete="address-level2" data-msg="Vyplňte místo realizace." id="f-misto" maxlength="200" name="misto" required="" type="text"/>
<p class="field__err" hidden="" id="f-misto-err"></p>
</div>
</div>
<div class="form__f">
<label for="f-zprava">Zpráva</label>
<textarea id="f-zprava" maxlength="5000" name="zprava" placeholder="Počet místností, přibližná plocha, termín nebo cokoliv dalšího…" rows="5"></textarea>
</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__gdpr">Odesláním souhlasíte se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na vaši poptávku.</p>
<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 722 220 508</a>.</p>
<button class="btn btn--plna form__odeslat" type="submit">Odeslat poptávku</button>
</form>
<div class="form__ok" id="odeslano" tabindex="-1"><p>Děkujeme za zprávu!</p></div></div>
</div>
</div>
</div>
<div class="ir pt20">
<div class="g">
<div class="c w33_3333 t-w100 t-cmb25">
<div class="tx"><ul> <li class="ikona-check">Projdeme vaši poptávku a připravíme orientační nabídku.</li> </ul></div>
</div>
<div class="c w33_3333 t-w100 t-cmb25">
<div class="tx"><ul> <li class="ikona-check">Poptávky řešíme co nejrychleji, většinou to stihneme za pár dnů.</li> </ul></div>
</div>
<div class="c w33_3333 t-w100">
<div class="tx"><ul> <li class="ikona-check">Domluvíme další postup, případně osobní prohlídku prostoru.</li> </ul></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
Obsah
Časté otázky
Rozbalovací otázky s červeným plusem, oddělené tenkou linkou. Třídy: faq, faq__i, faq__a.
HTML kód
<main class="obsah" id="obsah"><section class="r r--full max-width900 pt120 t-pt80 p-pt60 pb40 t-pb20" id="dotazy">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx"><h2>Co lidé řeší, než se ozvou</h2></div>
</div>
</div>
</div>
<div class="faq"><details class="faq__i"><summary>Je poptávka nezávazná?</summary><div class="faq__a"><p>Ano, je. Telefonát, e-mail i osobní schůzka - vše je zdarma a nezávazné.</p></div></details><details class="faq__i"><summary>Platí se něco za orientační nabídku?</summary><div class="faq__a"><p>Ne. Orientační nabídka je zdarma a nic za ni neplatíte. Slouží vám jako podklad pro rozhodnutí a pro srovnání s ostatními dodavateli.</p></div></details><details class="faq__i"><summary>Jak rychle se ozvete?</summary><div class="faq__a"><p>Obvykle do 48 hodin. Pokud pošlete základní údaje o objektu (typ, počet místností, město), odpovíme s konkrétním návrhem dalšího kroku.</p></div></details><details class="faq__i"><summary>Musím mít připravenou dokumentaci nebo půdorys?</summary><div class="faq__a"><p>Ne. Pro první orientaci stačí popsat, o jaký prostor jde a co od klimatizace očekáváte. Fotky nebo půdorys pomohou, ale nejsou podmínkou.</p></div></details><details class="faq__i"><summary>Působíte i v mém městě?</summary><div class="faq__a"><p>Působíme v Praze, Jižních Čechách (České Budějovice, Tábor, Písek), Středních Čechách (Kladno, Mladá Boleslav, Příbram), Plzeňském kraji (Plzeň, Klatovy, Rokycany) a na Vysočině (Jihlava, Třebíč, Havlíčkův Brod) - vždy včetně okolí. Pokud si nejste jistí, zeptejte se - rádi upřesníme.</p></div></details><details class="faq__i"><summary>Kdy je nejlepší objednat klimatizaci?</summary><div class="faq__a"><p>Ideálně na jaře před začátkem sezóny, kdy jsou termíny volnější. V létě poptávka výrazně roste a čekací doby se prodlužují. Ale ozvat se můžete kdykoli - termín domluvíme.</p></div></details></div>
</div>
</div></div>
</section></main>
Právní text
Stránka s právními informacemi: nadpis H1 a rozbalovací bloky. Třídy: s-texty, tx--i, mw1100, faq.
HTML kód
<main class="obsah" id="obsah">
<section class="r r--mb pt80 t-pt40 p-pt20 pb40 p-pb20">
<div class="w"><div class="g">
<div class="c">
<div class="tx tx--i mw1100"><h1><strong>Informace o cookies a jejich použití</strong></h1></div>
</div>
</div></div>
</section>
<section class="r pb40 t-pb20 p-pb0">
<div class="w"><div class="g">
<div class="c">
<div class="faq"><details class="faq__i"><summary>Vaše soukromí</summary><div class="faq__a"><p>Web jvsklima.cz používá cookies pro měření návštěvnosti (Google Analytics) a pro měření reklam na Facebooku a Instagramu (Meta Pixel), ale jen když s nimi souhlasíte v liště cookies. Bez souhlasu uložíme jen cookie, která si pamatuje vaši volbu. Jiné cookies neukládáme. Se souhlasem s analytickými cookies si web navíc v úložišti prohlížeče zapamatuje, odkud jste na něj přišli, a připojí to k vaší poptávce.</p></div></details><details class="faq__i"><summary>Správce</summary><div class="faq__a"><p>JVS Klima s.r.o., IČO: 21085960, se sídlem Varšavská 715/36, 120 00 Praha.</p></div></details><details class="faq__i"><summary>Co web ukládá</summary><div class="faq__a"><ol>
<li><strong>CookieYes</strong> ukládá cookie cookieyes-consent, ve které si pamatuje, jak jste se v liště cookies rozhodli. Platí 1 rok.</li>
<li><strong>Google Analytics</strong> (načítá ho Google Tag Manager) ukládá po vašem souhlasu cookies _ga a _ga_*, podle kterých počítá návštěvy a zjišťuje, které stránky čtete a odkud jste přišli. Platí až 2 roky.</li>
<li><strong>Meta Pixel</strong> ukládá po vašem souhlasu cookie _fbp (a při příchodu z reklamy _fbc), podle které Meta vyhodnocuje reklamy na Facebooku a Instagramu. Platí až 3 měsíce.</li>
<li><strong>Zdroj návštěvy</strong> (záznam jvs-zdroj v úložišti prohlížeče) ukládáme jen po vašem souhlasu s analytickými cookies: odkud jste na web přišli (vyhledávač, reklama, jiný web), na kterou stránku a kdy. Když pošlete poptávku, připojíme ho k ní. Platí 30 dní, při odvolání souhlasu se smaže. Bez souhlasu do prohlížeče nic neukládáme a zdroj zjistíme, jen když přijdete rovnou na stránku Kontakt.</li>
<li>Odeslání poptávkového formuláře žádné cookies nevytváří. Písmo a fotografie načítáme přímo z našeho webu.</li>
</ol></div></details><details class="faq__i"><summary>Jak souhlas změnit nebo odvolat</summary><div class="faq__a"><p>Svou volbu můžete kdykoli změnit v <a class="cky-banner-element" href="#">nastavení cookies</a>. Cookies můžete také smazat nebo zablokovat v nastavení svého prohlížeče. Měření Google Analytics vypnete doplňkem <a href="#" rel="noopener" target="_blank">Google Analytics Opt-out</a>, reklamy od Meta v <a href="#" rel="noopener" target="_blank">nastavení reklam na Facebooku</a>.</p></div></details><details class="faq__i"><summary>Zpracovatelé cookies</summary><div class="faq__a"><ol>
<li><a href="#" rel="noopener" target="_blank"><strong>CookieYes</strong></a> - lišta cookies a uložení vašeho souhlasu.</li>
<li><a href="#" rel="noopener" target="_blank"><strong>Google</strong></a> - měření návštěvnosti (Google Analytics, Google Tag Manager).</li>
<li><a href="#" rel="noopener" target="_blank"><strong>Meta</strong></a> - měření reklam (Meta Pixel).</li>
</ol></div></details><details class="faq__i"><summary>Když se to změní</summary><div class="faq__a"><p>Pokud začneme používat další cookies, doplníme sem informaci.</p></div></details><details class="faq__i"><summary>Vaše práva a kontaktní informace</summary><div class="faq__a"><p>Přečtěte si další informace o vašich právech týkajících se<strong> <a href="#">zpracování vašich osobních údajů</a></strong>. Kontaktní údaje pro další informace a stížnosti naleznete v sekci „<strong>Kontakt</strong>“.</p></div></details></div>
</div>
</div></div>
</section>
</main>
Chybová stránka
Stránka 404 s logem na střed, nadpisem H3 a seznamem odkazů. Třídy: menu-odkazy, img iw220, h3.
HTML kód
<main class="obsah" id="obsah"><section class="r mb20 m-mb18 t-mb20 p-mb17 pt80 p-pt60 pb40">
<div class="w"><div class="g">
<div class="c ta-c c--mid">
<div class="c__in">
<div class="img img--mb mb40 mt40 p-mt30 iw220 p-iw200 tpb15 img--c"><a class="imgodkaz" href="#"><img alt="JVS Klima" height="80" src="assets/foto/logo.svg" width="268"/></a></div>
<div class="tx mb20 m-mb18 t-mb20 p-mb17 tx--i mw700"><h1 class="h3"><strong>Vypadá to, že to, co jste hledali, už jsme stáhli z nabídky, můžete ale zkusit některý z odkazů</strong></h1></div>
<div class="ir pt20 pb20">
<div class="g">
<div class="c ta-c">
<div class="mb-15"><ul class="menu-odkazy"><li><a href="#">Služby</a></li><li><a href="#">Klimatizace pro firmy</a></li><li><a href="#">Klimatizace do domu</a></li><li><a href="#">Typy klimatizací</a></li><li><a href="#">Jak probíhá instalace</a></li><li><a href="#">Tepelná čerpadla</a></li></ul></div>
<ul class="menu-odkazy"><li><a href="#">Realizace</a></li><li><a href="#">O nás</a></li><li><a href="#">Kontakt</a></li><li><a href="#">Nezávazná poptávka</a></li></ul>
</div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
