Vycentrovaný úvod stránky s velkým nadpisem a perexem. Třídy: uv-uvod, uv-uvod__nadpis, uv-uvod__perex.
HTML kód
<main class="obsah" id="obsah"><section class="uv-uvod">
<div class="w">
<h1 class="uv-uvod__nadpis">Centrum Freedom Art - volnočasový svět pro děti i dospělé</h1>
<p class="uv-uvod__perex"><strong>Freedom Art v Nedvědici u Brna</strong> je prostor pro děti, dospělé i seniory. Můžete tu tvořit, učit se nové věci a hlavně se potkávat v přátelské atmosféře. Pořádáme pravidelné kroužky, workshopy i společenské akce pro všechny generace.</p>
</div>
</section></main>
Úvod kroužků s brožurou
Růžový nadpis podstránky a vějíř brožury ke stažení. Třídy: kr-uvod, h--ruzova, kr-brozura.
HTML kód
<main class="obsah" id="obsah"><div class="kr-vypis"><div class="w"><div class="kr-uvod">
<div class="kr-uvod__text">
<h1 class="h--ruzova">Kroužky a kurzy 2026/27</h1>
<p>Přineste své nápady. Přineste svou vášeň. Přineste svou zvědavost.<br/>Jsme Freedom Art a přinášíme pestré využití volného času v Nedvědici.</p>
</div>
<div class="kr-brozura">
<a aria-hidden="true" class="kr-brozura__vejir" href="#" rel="noopener" tabindex="-1" target="_blank"><img alt="" class="kr-brozura__list kr-brozura__list--3" height="851" src="assets/foto/brozura-strana-3.webp" width="600"/><img alt="" class="kr-brozura__list kr-brozura__list--2" height="851" src="assets/foto/brozura-strana-2.webp" width="600"/><img alt="Titulní strana brožury volnočasových aktivit Freedom Art" class="kr-brozura__list" height="851" src="assets/foto/brozura-2pololeti-2026.webp" width="600"/></a>
<div>
<p><strong>Stáhněte si brožuru</strong> volnočasových aktivit v PDF.</p>
<a class="btn btn--ruzova" href="#" rel="noopener" target="_blank">Stáhnout</a>
</div>
</div>
</div></div></div></main>
Úvod kontaktu
Nadpis s perexem a odkazy na sítě. Třídy: ko-uvod, ko-site.
Karty dnešních kroužků s časem. Třídy: uv-dnes, uv-k, uv-k__cas, uv-k__dolni.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="uv-dnes-nadpis" class="uv-dnes" hidden="">
<div class="w uv-w">
<div class="uv-hlava">
<div>
<p class="stitek uv-dnes__datum">středa 11. listopadu</p>
<h2 class="uv-dnes__nadpis" id="uv-dnes-nadpis">Ve středu v centru</h2>
</div>
<a class="odkaz-sipka uv-dnes__vse" href="#"><span>Všechny kroužky a kurzy</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
<div class="uv-dnes__mrizka">
<article class="uv-k" data-slug="klubik-pro-maminky-s-detmi">
<img alt="Maminka cvičí s malou dcerou na podložce" height="600" src="assets/foto/klubicko-900.webp" width="900"/>
<p class="uv-k__cas">8:30-9:30</p>
<div class="uv-k__dolni">
<h3><a href="#">Cvičení KLUBÍČKO</a></h3>
<p class="uv-k__mesicne"></p>
<p class="uv-k__pro">Pro maminky nebo rodiče s dětmi</p>
</div>
</article>
<article class="uv-k" data-slug="pevecky-sbor-patron">
<img alt="Zpěvačky sboru zpívají z not v kostele u vánočního stromku" height="601" src="assets/foto/patron-koncert-900.webp" width="900"/>
<p class="uv-k__cas">18:00-19:30</p>
<div class="uv-k__dolni">
<h3><a href="#">Pěvecký sbor P. A. T. R. O. N</a></h3>
<p class="uv-k__mesicne"></p>
<p class="uv-k__pro">Pro dospělé a děti od 13 let</p>
</div>
</article>
<article class="uv-k" data-slug="siti-2">
<img alt="Šicí stroj, nitě a látky na pracovním stole" height="601" src="assets/foto/siti-900.webp" width="900"/>
<p class="uv-k__cas">Čtvrtek 16:00-17:30</p>
<div class="uv-k__dolni">
<h3><a href="#">Šití 2</a></h3>
<p class="uv-k__mesicne"></p>
<p class="uv-k__pro">Pro všechny se šikovnýma rukama</p>
</div>
</article>
</div>
<p class="uv-dnes__dalsi" hidden=""><strong>Další kroužky ve čtvrtek:</strong> <span class="uv-dnes__odkazy"></span></p>
</div>
<template id="uv-dnes-sablona">
<article class="uv-k" data-slug="">
<img alt="" height="" src="" width=""/>
<p class="uv-k__cas">-</p>
<div class="uv-k__dolni">
<h3><a href=""></a></h3>
<p class="uv-k__mesicne"></p>
<p class="uv-k__pro"></p>
</div>
</article>
</template>
</section></main>
Nejbližší akce
Hlavní karty akcí s datem a štítky. Třídy: uv-akce, uv-akce__mrizka, ka-karta ka-karta--hlavni.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="uv-akce-nadpis" class="uv-akce">
<div class="w uv-w">
<div class="uv-hlava">
<div>
<p class="stitek">Co chystáme</p>
<h2 id="uv-akce-nadpis">Nejbližší akce</h2>
</div>
<a class="odkaz-sipka" href="#"><span>Kalendář akcí</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
<div class="uv-akce__mrizka">
<article class="ka-karta ka-karta--hlavni" data-do="2026-11-11" data-od="2026-11-11" data-poradi="2026-11-11 08:00 psani-jeziskovi-se-svatomartinskym-posezenim" data-uprava="akce:psani-jeziskovi-se-svatomartinskym-posezenim:karta_hlavni">
<div class="ka-karta__obr"><img alt="Chlapec píše dopis u stolu s vánoční výzdobou" height="1067" sizes="(max-width: 690px) 88vw, 640px" src="assets/foto/akce-dopis-jeziskovi.webp" srcset="assets/foto/akce-dopis-jeziskovi-900.webp 900w, assets/foto/akce-dopis-jeziskovi.webp 1600w" width="1600"/></div>
<div class="ka-karta__telo">
<p class="ka-datum"><time class="skryte" datetime="2026-11-11">středa 11. listopadu 2026</time><span aria-hidden="true"><span class="ka-datum__tyden">středa</span><span class="ka-datum__cislo">11</span><span class="ka-datum__mesic">listopadu</span></span></p>
<h3 class="ka-karta__nazev"><a href="#">Psaní Ježíškovi se svatomartinským posezením</a></h3>
<p class="ka-karta__perex">Přijďte s námi na svatého Martina posedět, vytvořit si vánoční dekoraci a třeba i zformulovat vlastní přání.</p>
<ul class="ka-stitky"><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5V12l3 3"></path></svg><span>Celý den</span></li><li class="ka-stitek ka-stitek--doma"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><path d="M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z"></path><circle cx="12" cy="10" r="2.3"></circle></svg><span>Freedom Art, Nedvědice 247</span></li></ul>
<span aria-hidden="true" class="btn ka-karta__btn">Podrobnosti o akci</span>
</div>
</article>
<article class="ka-karta ka-karta--hlavni" data-do="2026-11-18" data-od="2026-11-11" data-poradi="2026-11-11 08:00 svatomartinska-stezka" data-uprava="akce:svatomartinska-stezka:karta_hlavni" hidden="">
<div class="ka-karta__obr"><img alt="Lidé s dětmi na procházce lesní cestou plnou podzimního listí" height="1067" sizes="(max-width: 690px) 88vw, 640px" src="assets/foto/akce-svatomartinska-stezka-podzim.webp" srcset="assets/foto/akce-svatomartinska-stezka-podzim-900.webp 900w, assets/foto/akce-svatomartinska-stezka-podzim.webp 1600w" width="1600"/></div>
<div class="ka-karta__telo">
<p class="ka-datum ka-datum--vice"><time class="skryte" datetime="2026-11-11">11.-18. listopadu 2026</time><span aria-hidden="true"><span class="ka-datum__tyden">st-st</span><span class="ka-datum__cislo">11-18</span><span class="ka-datum__mesic">listopadu</span></span></p>
<h3 class="ka-karta__nazev"><a href="#">Svatomartinská stezka</a></h3>
<p class="ka-karta__perex">Vydejte se s námi na zábavnou cestu plnou úkolů, hádanek a svatomartinských tradic!</p>
<ul class="ka-stitky"><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5V12l3 3"></path></svg><span>Celý den</span></li><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><path d="M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z"></path><circle cx="12" cy="10" r="2.3"></circle></svg><span>Nedvědice</span></li></ul>
<span aria-hidden="true" class="btn ka-karta__btn">Podrobnosti o akci</span>
</div>
</article>
<article class="ka-karta ka-karta--hlavni" data-do="2026-12-05" data-od="2026-12-05" data-poradi="2026-12-05 16:00 mikulasska-nadilka" data-uprava="akce:mikulasska-nadilka:karta_hlavni" hidden="">
<div class="ka-karta__obr"><img alt="Mikuláš s andělem a čerty" height="1200" src="assets/foto/galerie-04.webp" width="900"/></div>
<div class="ka-karta__telo">
<p class="ka-datum"><time class="skryte" datetime="2026-12-05">sobota 5. prosince 2026</time><span aria-hidden="true"><span class="ka-datum__tyden">sobota</span><span class="ka-datum__cislo">5</span><span class="ka-datum__mesic">prosince</span></span></p>
<h3 class="ka-karta__nazev"><a href="#">Mikulášská nadílka</a></h3>
<p class="ka-karta__perex">Freedom Art pro vás pořádá tradiční Mikulášskou nadílku. Mikuláš si opět pozve děti na přesný čas, proto je třeba rezervovat si místo.</p>
<ul class="ka-stitky"><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5V12l3 3"></path></svg><span>16:00</span></li><li class="ka-stitek ka-stitek--doma"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><path d="M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z"></path><circle cx="12" cy="10" r="2.3"></circle></svg><span>Freedom Art, Nedvědice 247</span></li></ul>
<span aria-hidden="true" class="btn ka-karta__btn">Podrobnosti o akci</span>
</div>
</article>
<article class="ka-karta ka-karta--hlavni" data-do="2026-12-23" data-od="2026-12-23" data-poradi="2026-12-23 17:00 tradicni-vanocni-koncert-v-kostele-sv-kunhuty" data-uprava="akce:tradicni-vanocni-koncert-v-kostele-sv-kunhuty:karta_hlavni" hidden="">
<div class="ka-karta__obr"><img alt="Zpěvačky sboru zpívají z not v kostele u vánočního stromku" height="801" sizes="(max-width: 690px) 88vw, 640px" src="assets/foto/patron-koncert.webp" srcset="assets/foto/patron-koncert-900.webp 900w, assets/foto/patron-koncert.webp 1199w" width="1199"/></div>
<div class="ka-karta__telo">
<p class="ka-datum"><time class="skryte" datetime="2026-12-23">středa 23. prosince 2026</time><span aria-hidden="true"><span class="ka-datum__tyden">středa</span><span class="ka-datum__cislo">23</span><span class="ka-datum__mesic">prosince</span></span></p>
<h3 class="ka-karta__nazev"><a href="#">Tradiční vánoční koncert pěveckého sboru P.A.T.R.O.N v kostele sv. Kunhuty v Nedvědici</a></h3>
<p class="ka-karta__perex">V nádherném prostředí kostela svaté Kunhuty v Nedvědici zazní adventní i vánoční skladby, které vás naladí na klidné a radostné prožití svátků.</p>
<ul class="ka-stitky"><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><circle cx="12" cy="12" r="8.5"></circle><path d="M12 7.5V12l3 3"></path></svg><span>17:00</span></li><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><path d="M3.5 7h17v3.2a1.8 1.8 0 0 0 0 3.6V17h-17v-3.2a1.8 1.8 0 0 0 0-3.6z"></path><path d="M14.5 7.5v1.5M14.5 11.25v1.5M14.5 15v1.5"></path></svg><span>Vstupné dobrovolné</span></li><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><path d="M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z"></path><circle cx="12" cy="10" r="2.3"></circle></svg><span>Kostel sv. Kunhuty, Nedvědice</span></li></ul>
<span aria-hidden="true" class="btn ka-karta__btn">Podrobnosti o akci</span>
</div>
</article>
<article class="ka-karta ka-karta--hlavni" data-do="2027-03-31" data-od="2027-03-01" data-poradi="2027-03-01 00:00 13-memorial-alese-glosra" data-uprava="akce:13-memorial-alese-glosra:karta_hlavni" hidden="">
<div class="ka-karta__obr"><img alt="Maminka se dvěma dcerami na zahradě před keřem s červenými listy" height="700" sizes="(max-width: 690px) 88vw, 640px" src="assets/foto/akce-memorial-rodina.webp" srcset="assets/foto/akce-memorial-rodina-900.webp 900w, assets/foto/akce-memorial-rodina.webp 1050w" width="1050"/></div>
<div class="ka-karta__telo">
<p class="ka-datum ka-datum--mesic"><time class="skryte" datetime="2027-03">březen 2027</time><span aria-hidden="true"><span class="ka-datum__tyden">březen</span><span class="ka-datum__cislo">2027</span></span></p>
<h3 class="ka-karta__nazev"><a href="#">13. Memoriál Aleše Glosra</a></h3>
<p class="ka-karta__perex">Turistická vycházka na počest života milovníka přírody Aleše Glosra. Přijďte při letošním výročním memoriálu zavzpomínat na nezapomenutelného manžela, tatínka a skvělého kamaráda.</p>
<ul class="ka-stitky"><li class="ka-stitek"><svg aria-hidden="true" class="ka-ikona" viewbox="0 0 24 24"><path d="M12 21s-6.5-5.7-6.5-11a6.5 6.5 0 0 1 13 0c0 5.3-6.5 11-6.5 11z"></path><circle cx="12" cy="10" r="2.3"></circle></svg><span>Nedvědice</span></li></ul>
<span aria-hidden="true" class="btn ka-karta__btn">Podrobnosti o akci</span>
</div>
</article>
</div>
</div>
</section></main>
Co nabízíme
Tři karty nabídky pro děti, dospělé a seniory. Třídy: uv-nabidka, uv-nab, uv-nab__pocet.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="uv-nabidka-nadpis" class="uv-nabidka">
<div class="w uv-w">
<div class="uv-hlava">
<div>
<p class="stitek">Pro koho</p>
<h2 id="uv-nabidka-nadpis">Co nabízíme</h2>
</div>
<a class="odkaz-sipka" href="#"><span>Všechny kroužky a kurzy</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
<div class="uv-nabidka__seznam">
<a class="uv-nab" href="#">
<span class="uv-nab__foto"><img alt="Děti tvoří z hlíny na příměstském táboře s keramikou a angličtinou" height="600" src="assets/foto/akce-primestsky-tabor-keramika-anglictina-900.webp" width="900"/></span>
<div class="uv-nab__telo">
<span class="uv-nab__pocet"><span data-pocet-krouzku="anglictina-pro-deti klubik-pro-maminky-s-detmi keramika-deti kytara siti-1 siti-2 streetdance" data-skupina="deti" data-tvary="kroužek kroužky kroužků">7 kroužků</span></span>
<h3 class="uv-nab__nadpis">Dětem</h3>
<span class="uv-nab__text">Pro děti všech věkových kategorií máme keramiku, angličtinu, zpěv, tanec, kreativní psaní i lukostřelbu. Velké oblibě se těší také příměstské tábory a jednorázové akce.</span>
<span class="odkaz-sipka uv-nab__odkaz"><span>Kroužky pro děti</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</div>
</a>
<a class="uv-nab" href="#">
<span class="uv-nab__foto"><img alt="Dospělí a senioři malují keramiku na workshopu" height="600" src="assets/foto/dospeli-dilna-900.webp" width="900"/></span>
<div class="uv-nab__telo">
<span class="uv-nab__pocet"><span data-pocet-krouzku="anglictina klubik-pro-maminky-s-detmi klub-aktivnich-muzu pevecky-sbor-patron kytara rodicovsky-klub siti-1 siti-2 streetdance" data-skupina="dospeli" data-tvary="kroužek kroužky kroužků">9 kroužků</span></span>
<h3 class="uv-nab__nadpis">Dospělým</h3>
<span class="uv-nab__text">Pěvecký sbor, angličtina, keramika, šití nebo cvičení pro zdravá záda. Během roku pořádáme semináře, workshopy a sousedská setkávání.</span>
<span class="odkaz-sipka uv-nab__odkaz"><span>Kroužky pro dospělé</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</div>
</a>
<a class="uv-nab" href="#">
<span class="uv-nab__foto"><img alt="Senioři si u stolu s kávou prohlížejí album" height="600" src="assets/foto/senior-club-900.webp" width="900"/></span>
<div class="uv-nab__telo">
<span class="uv-nab__pocet"><span data-pocet-krouzku="kytara senior-club siti-1 siti-2" data-skupina="seniori" data-tvary="kroužek kroužky kroužků">4 kroužky</span></span>
<h3 class="uv-nab__nadpis">Seniorům</h3>
<span class="uv-nab__text">Senior Club nabízí pravidelná setkávání v přátelském prostředí: povídání, drobné tvoření, hry i neformální posezení. Přidat se můžete i k šití, cvičení pro zdravá záda nebo písničkám k ohni.</span>
<span class="odkaz-sipka uv-nab__odkaz"><span>Kroužky pro seniory</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></span>
</div>
</a>
</div>
</div>
</section></main>
Pás galerie
Vodorovný pás fotek s nálepkou a šipkami. Třídy: uv-galerie, uv-pas, uv-pas__f, lb, nalepka.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="uv-galerie-nadpis" class="uv-galerie">
<div class="w uv-w">
<div class="uv-hlava">
<div>
<p class="stitek">Fotky z akcí</p>
<h2 id="uv-galerie-nadpis">Ze života centra</h2>
</div>
</div>
</div>
<p aria-hidden="true" class="nalepka uv-nalepka"><span>Přijďte</span><strong>mezi</strong><span>nás</span></p>
<div class="uv-pas">
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Elsa, Anna a Olaf v kostýmech z Ledového království na dřevěném mostě" height="1600" sizes="(max-width: 690px) 200px, 333px" src="assets/foto/freedomart-galerie-18-900.webp" srcset="assets/foto/freedomart-galerie-18-900.webp 900w, assets/foto/freedomart-galerie-18.webp 1065w" width="1065"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Dívka modeluje z hlíny postavu na keramickém kroužku" height="1600" sizes="(max-width: 690px) 223px, 372px" src="assets/foto/freedomart-galerie-13-900.webp" srcset="assets/foto/freedomart-galerie-13-900.webp 900w, assets/foto/freedomart-galerie-13.webp 1190w" width="1190"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Princezna s maskotem Artíkem na lesní cestě" height="1600" sizes="(max-width: 690px) 225px, 375px" src="assets/foto/freedomart-galerie-03-900.webp" srcset="assets/foto/freedomart-galerie-03-900.webp 900w, assets/foto/freedomart-galerie-03.webp 1200w" width="1200"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Tři prasátka v kostýmech u hromádky dřevěných kostek v lese" height="1600" sizes="(max-width: 690px) 225px, 375px" src="assets/foto/freedomart-galerie-08-900.webp" srcset="assets/foto/freedomart-galerie-08-900.webp 900w, assets/foto/freedomart-galerie-08.webp 1200w" width="1200"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Usměvavý chlapec u stolu při tvoření z přírodnin" height="960" src="assets/foto/freedomart-galerie-17.webp" width="720"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Šmoula a Šmoulinka v kostýmech v lese" height="1600" sizes="(max-width: 690px) 225px, 375px" src="assets/foto/freedomart-galerie-07-900.webp" srcset="assets/foto/freedomart-galerie-07-900.webp 900w, assets/foto/freedomart-galerie-07.webp 1200w" width="1200"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Barevné obrazy zvířat od dětí na stolech výtvarné dílny" height="1600" sizes="(max-width: 690px) 223px, 372px" src="assets/foto/freedomart-galerie-15-900.webp" srcset="assets/foto/freedomart-galerie-15-900.webp 900w, assets/foto/freedomart-galerie-15.webp 1190w" width="1190"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Pat a Mat v kostýmech u lavičky" height="1600" sizes="(max-width: 690px) 225px, 375px" src="assets/foto/freedomart-galerie-04-900.webp" srcset="assets/foto/freedomart-galerie-04-900.webp 900w, assets/foto/freedomart-galerie-04.webp 1200w" width="1200"/></a>
<a class="lb uv-pas__f" data-galerie="pas" href="#"><img alt="Dívka v brýlích tvaruje hlínu na keramickém kroužku" height="1600" sizes="(max-width: 690px) 223px, 372px" src="assets/foto/freedomart-galerie-14-900.webp" srcset="assets/foto/freedomart-galerie-14-900.webp 900w, assets/foto/freedomart-galerie-14.webp 1190w" width="1190"/></a>
</div>
<div class="w uv-pas__ovl">
<button aria-label="Předchozí fotky" class="uv-pas__sipka uv-pas__sipka--pred" disabled="" type="button"><svg aria-hidden="true" class="sipka" viewbox="0 0 48 24"><path d="M44 12H5M11 6l-6 6 6 6"></path></svg></button>
<button aria-label="Další fotky" class="uv-pas__sipka uv-pas__sipka--dal" type="button"><svg aria-hidden="true" class="sipka" viewbox="0 0 48 24"><path d="M4 12h39M37 6l6 6-6 6"></path></svg></button>
</div>
</section></main>
Naše mise
Vycentrovaný text na světlém podkladu. Třídy: uv-mise, uv-mise__text, uv-mise__odkazy.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="uv-mise-nadpis" class="uv-mise">
<div class="w uv-mise__w">
<p class="stitek">O nás</p>
<h2 id="uv-mise-nadpis">Naše mise</h2>
<p class="uv-mise__text">Prioritou centra je poskytnout prostor pro kvalitně strávený volný čas. Díky tomu je v naší obci pamatováno na prevenci sociálně patologických jevů, které se jinak v souvislosti s dospívající mládeží mohou objevit. Velkým plusem je také sbližování dětí z různých škol v širokém okolí.</p>
<p class="uv-mise__odkazy"><a class="odkaz-sipka" href="#"><span>Více o nás</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a><a class="odkaz-sipka" href="#"><span>Přidejte se</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
</div>
</section></main>
Akce
Karta akce
Karta akce s fotkou, datem, štítky a tlačítkem. Třídy: ka-karta, ka-karta__obr, ka-datum, ka-stitek, ka-karta__btn.
Fotokarty kroužků s dnem a názvem. Třídy: kr-sekce, kr-mrizka, kr-k, kr-k__den.
HTML kód
<main class="obsah" id="obsah"><div class="kr-vypis"><div class="w"><div class="kr-krouzky"><section aria-labelledby="kr-zdarma" class="kr-sekce">
<h2 id="kr-zdarma">Kroužky zdarma</h2>
<div class="kr-mrizka kr-mrizka--velka">
<article class="kr-k" data-cena="zdarma" data-den="st" data-poradi="2 0570 senior club" data-pro="seniori" data-registrace-do="2027-07-01T00:00:00+02:00" data-uprava="krouzky:senior-club:karta">
<img alt="Senioři si u stolu s kávou prohlížejí album" height="800" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/senior-club.webp" srcset="assets/foto/senior-club-900.webp 900w, assets/foto/senior-club.webp 1200w" width="1200"/>
<div class="kr-k__horni"><span class="kr-k__den">Středa 9:30-11:00</span><span class="kr-k__cena kr-k__cena--zdarma">Zdarma</span></div>
<div class="kr-k__dolni">
<h3><a href="#">Senior Club</a></h3>
<p class="kr-k__mesicne">Každou 3. středu v měsíci</p>
<p>Pro seniory</p>
<p class="kr-k__stav" hidden="">Registrace uzavřena</p>
</div>
</article>
<article class="kr-k" data-cena="zdarma" data-den="st" data-poradi="2 1080 pevecky sbor p. a. t. r. o. n" data-pro="teen dospeli" data-registrace-do="2027-01-28T00:00:00+01:00" data-uprava="krouzky:pevecky-sbor-patron:karta">
<img alt="Zpěvačky sboru zpívají z not v kostele u vánočního stromku" height="801" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/patron-koncert.webp" srcset="assets/foto/patron-koncert-900.webp 900w, assets/foto/patron-koncert.webp 1199w" width="1199"/>
<div class="kr-k__horni"><span class="kr-k__den">Středa 18:00-19:30</span><span class="kr-k__cena kr-k__cena--zdarma">Zdarma</span></div>
<div class="kr-k__dolni">
<h3><a href="#">Pěvecký sbor P. A. T. R. O. N</a></h3>
<p>Pro dospělé a děti od 13 let</p>
<p class="kr-k__stav" hidden="">Registrace uzavřena</p>
</div>
</article>
<article class="kr-k" data-cena="zdarma" data-den="ct" data-poradi="3 1080 klub aktivnich muzu (kam?)" data-pro="dospeli" data-registrace-do="2027-01-08T00:00:00+01:00" data-uprava="krouzky:klub-aktivnich-muzu:karta">
<img alt="Dva muži si při rozhovoru podávají ruce" height="800" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/klub-aktivnich-muzu.webp" srcset="assets/foto/klub-aktivnich-muzu-900.webp 900w, assets/foto/klub-aktivnich-muzu.webp 1200w" width="1200"/>
<div class="kr-k__horni"><span class="kr-k__den">Čtvrtek 18:00-19:30</span><span class="kr-k__cena kr-k__cena--zdarma">Zdarma</span></div>
<div class="kr-k__dolni">
<h3><a href="#">Klub Aktivních Mužů (KAM?)</a></h3>
<p class="kr-k__mesicne">Každý 1. čtvrtek v měsíci</p>
<p>Pro dospělé</p>
<p class="kr-k__stav" hidden="">Registrace uzavřena</p>
</div>
</article>
<article class="kr-k" data-cena="zdarma" data-den="ct" data-poradi="3 1080 rodicovsky klub" data-pro="dospeli" data-registrace-do="2027-01-22T00:00:00+01:00" data-uprava="krouzky:rodicovsky-klub:karta">
<img alt="Dospělí sedí v kruhu blízko u sebe a s úsměvem si povídají" height="800" sizes="(max-width: 690px) 88vw, 44vw" src="assets/foto/rodicovsky-klub-dospeli.webp" srcset="assets/foto/rodicovsky-klub-dospeli-900.webp 900w, assets/foto/rodicovsky-klub-dospeli.webp 1200w" width="1200"/>
<div class="kr-k__horni"><span class="kr-k__den">Čtvrtek 18:00-19:30</span><span class="kr-k__cena kr-k__cena--zdarma">Zdarma</span></div>
<div class="kr-k__dolni">
<h3><a href="#">Rodičovský klub</a></h3>
<p class="kr-k__mesicne">Každý 3. čtvrtek v měsíci</p>
<p>Pro dospělé a rodiče</p>
<p class="kr-k__stav" hidden="">Registrace uzavřena</p>
</div>
</article>
</div>
</section></div></div></div></main>
Záhlaví kroužku
Nadpis, perex, údaje a fotka s nálepkou. Třídy: kr-zahlavi, kr-perex, kr-udaje, kr-registrovat, nalepka.
HTML kód
<main class="obsah" id="obsah"><div class="kr-detail"><div class="w"><div class="kr-zahlavi">
<div class="kr-zahlavi__text">
<p class="stitek">Kroužky a kurzy</p>
<h1>Klub Aktivních Mužů (KAM?)</h1>
<p class="kr-perex">Kam směřujeme? Kam míříme? Co chceme? Co je dobré pro nás a naše blízké? A máme s kým sdílet své starosti?</p>
<dl class="kr-udaje">
<div><dt>Termín</dt><dd>1. října 2026 - 7. ledna 2027</dd></div>
<div><dt>Vhodné pro</dt><dd>dospělé</dd></div>
<div><dt>Cena</dt><dd>Zdarma<span>Uvítáme dobrovolný příspěvek na občerstvení a energie</span></dd></div>
<div><dt>Místo</dt><dd>Freedom Art, Nedvědice 247</dd></div>
</dl>
<a class="btn btn--plna kr-registrovat" href="#">Registrovat</a>
</div>
<figure class="kr-zahlavi__foto">
<a class="lb" href="#"><img alt="Dva muži si při rozhovoru podávají ruce" height="800" sizes="(max-width: 690px) 100vw, (max-width: 1099px) 88vw, 1010px" src="assets/foto/klub-aktivnich-muzu.webp" srcset="assets/foto/klub-aktivnich-muzu-900.webp 900w, assets/foto/klub-aktivnich-muzu.webp 1200w" width="1200"/></a>
<p aria-hidden="true" class="nalepka kr-nalepka"><span>Každý 1. čtvrtek v měsíci</span><strong>18:00</strong><span>do 19:30</span></p>
</figure>
</div></div></div></main>
Text kroužku
Dvousloupcový popis a postranní fakta. Třídy: kr-clanek, kr-vytah, tx, kr-fakta.
HTML kód
<main class="obsah" id="obsah"><div class="kr-detail"><div class="w"><section class="kr-clanek">
<div class="kr-clanek__text">
<h2>O kroužku</h2>
<p class="kr-vytah">Klub aktivních mužů je místem pro setkávání, otevřené rozhovory a společně strávený čas.</p>
<div class="tx kr-text">
<p>Je <strong>určen všem mužům, kteří chtějí na chvíli zpomalit, vypnout od každodenních povinností</strong> a být součástí komunity lidí s podobnými životními zkušenostmi.</p>
<p><strong>Program bude vznikat bez lektora, podle zájmů a nápadů samotných účastníků.</strong></p>
<p>V případě zájmu o nějaké konkrétní téma <strong>můžeme přizvat hosta z odborných kruhů</strong>. Přijďte sdílet své zkušenosti, načerpat novou energii a inspiraci a najít prostor pro témata, na která v běžném životě často nezbývá čas.</p>
</div>
</div>
<div class="kr-clanek__bok">
<div class="kr-fakta tx">
<div>
<p class="stitek">Rozvrh</p>
<p>Každý 1. čtvrtek v měsíci od 1. 10. 2026 do 7. 1. 2027, od 18:00 do 19:30.</p>
</div>
<div>
<p class="stitek">Místo</p>
<p>Freedom Art<br/>Nedvědice 247, 592 62 Nedvědice<br/><a href="#" rel="noopener" target="_blank">Zobrazit na mapě</a></p>
</div>
</div>
</div>
</section></div></div></main>
Formuláře
Registrace na kroužek
Info o ceně vlevo, formulář vpravo. Třídy: kr-reg-sekce, form, form__f, kr-radek, field__err.
HTML kód
<main class="obsah" id="obsah"><div class="kr-detail"><div class="w"><section aria-label="Registrace" class="kr-reg-sekce" id="registrace-na-krouzek">
<div class="kr-reg-sekce__info">
<p class="stitek"><span class="kr-reg__otevreno">Registrace</span><span class="kr-reg__zavreno">Registrace jsou uzavřeny</span><span class="kr-reg__plno">Kroužek je plně obsazený</span></p>
<h2>Klub Aktivních Mužů (KAM?)</h2>
<p class="kr-reg-sekce__cena"><strong>Zdarma</strong>Uvítáme dobrovolný příspěvek na občerstvení a energie</p>
<div class="kr-reg__zajem">
<p>Máte o kroužek zájem? Ozvěte se nám, rádi poradíme.</p>
<a class="btn btn--plna" href="#">Napište nám</a>
</div>
<ul class="kr-reg-sekce__body">
<li><svg aria-hidden="true" viewbox="0 0 24 24"><rect height="13" rx="2" width="18" x="3" y="5.5"></rect><path d="M3.5 7l8.5 6 8.5-6"></path></svg><span>Potvrzení přijde e-mailem</span></li>
</ul>
</div>
<div class="kr-reg-sekce__form">
<div class="form__skryto" id="skryto-registrace" tabindex="-1"><p>Registrace na kroužky jsou momentálně uzavřené. Pro více informací nám napište na <a href="#">freedomart@centrum.cz</a> nebo zavolejte na <a href="#">+420 725 875 914</a>.</p></div>
<div class="form__dik" data-qr="../qr.php" id="odeslano-registrace" tabindex="-1">
<h3>Registrace na akci byla úspěšná</h3>
<p>Potvrzení obdržíte e-mailem.</p>
</div>
<form class="form kr-reg" data-krouzek="klub-aktivnich-muzu" data-registrace-do="2027-01-08T00:00:00+01:00" data-typ="registrace" id="registrace">
<input name="krouzek" type="hidden" value="klub-aktivnich-muzu"/>
<div class="form__chyba" hidden="" role="alert">Registraci se nepodařilo odeslat. Zkontrolujte prosím vyplněné údaje a zkuste to znovu, případně nám zavolejte na <a href="#">+420 725 875 914</a>.</div>
<div class="form__chyba kr-chyba-plno" hidden="" role="alert">Registraci nebylo možné dokončit, volných míst už není tolik, kolik jste zvolili. Vyberte prosím menší počet míst.</div>
<input data-cena="0" data-max="5" name="varianta" type="hidden" value="396"/>
<div class="kr-radek">
<div class="form__f">
<label for="f-mist">Počet míst</label>
<select id="f-mist" name="mist"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select>
</div>
<div class="form__f">
<label for="f-jmeno">Jméno účastníka/účastníků</label>
<input aria-describedby="f-jmeno-chyba" autocomplete="name" data-msg="Vyplňte prosím jméno účastníka." id="f-jmeno" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-chyba"></p>
</div>
</div>
<div class="kr-radek kr-radek--pul">
<div class="form__f">
<label for="f-telefon">Telefon</label>
<input aria-describedby="f-telefon-chyba" autocomplete="tel" data-msg="Vyplňte prosím telefon." data-msg-format="Zadejte prosím telefon ve správném tvaru, například 725 875 914." id="f-telefon" name="telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-chyba"></p>
</div>
<div class="form__f">
<label for="f-email">E-mail</label>
<input aria-describedby="f-email-chyba" autocomplete="email" data-msg="Vyplňte prosím e-mail." data-msg-format="Zadejte prosím e-mail ve správném tvaru, například jana@seznam.cz." id="f-email" name="email" required="" type="email"/>
<p class="field__err" hidden="" id="f-email-chyba"></p>
</div>
</div>
<div class="form__f">
<label for="f-komentar">Komentář</label>
<textarea id="f-komentar" name="komentar" rows="3"></textarea>
</div>
<div class="form__f form__volba">
<input aria-describedby="f-souhlas-chyba" data-msg="Potvrďte prosím souhlas se zpracováním údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="f-souhlas">Souhlasím se <a href="#" target="_blank">zpracováním údajů</a></label>
<p class="field__err" hidden="" id="f-souhlas-chyba"></p>
</div>
<div class="kr-odeslani">
<p class="kr-souhrn">Celková cena<span><strong aria-live="polite" class="kr-souhrn__celkem" data-kr="celkem">Zdarma</strong> <span class="kr-souhrn__rozpis" data-kr="rozpis" hidden=""></span></span></p>
<button class="btn btn--plna" type="submit">Odeslat registraci</button>
</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=""/>
</form>
</div>
</section></div></div></main>
Kontaktní formulář
Karta s formulářem a údaji organizace. Třídy: ko-karta, ko-napiste, form, form__f, ko-panel, ko-udaj.
HTML kód
<main class="obsah" id="obsah"><div class="ko"><div class="w ko-w"><div class="ko-karta">
<section class="ko-napiste" id="napiste-nam">
<h2>Napište nám</h2>
<p class="ko-vyzva" data-formular-uvod="">Neváhejte se na nás obracet se svými dotazy, nápady a potřebami. Jsme tu pro vás.</p>
<div class="form__skryto" id="skryto-kontakt" tabindex="-1"><p>Formulář je momentálně mimo provoz. Napište nám prosím na <a href="#">freedomart@centrum.cz</a> nebo zavolejte na <a href="#">+420 725 875 914</a>.</p></div>
<div class="form__dik" id="odeslano-kontakt" tabindex="-1">
<h3>Děkujeme, že jste nás kontaktovali!</h3>
<p>Brzy vám odpovíme na e-mail nebo telefon, který jste uvedli.</p>
</div>
<form class="form" data-typ="kontakt" id="kontakt-form">
<div class="form__f">
<label for="f-jmeno">Jméno a příjmení</label>
<input aria-describedby="f-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="f-jmeno" maxlength="200" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="f-jmeno-err"></p>
</div>
<div class="form__dvoj">
<div class="form__f">
<label for="f-email">E-mail</label>
<input aria-describedby="f-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="f-email" maxlength="200" name="email" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="f-email-err"></p>
</div>
<div class="form__f">
<label for="f-telefon">Telefon</label>
<input aria-describedby="f-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 777 123 456 nebo +420 777 123 456." id="f-telefon" maxlength="40" name="telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="f-telefon-err"></p>
</div>
</div>
<div class="form__f">
<label for="f-zprava">Zpráva nebo dotaz</label>
<textarea aria-describedby="f-zprava-err" data-msg="Napište nám zprávu nebo dotaz." id="f-zprava" maxlength="5000" name="zprava" required="" rows="5"></textarea>
<p class="field__err" hidden="" id="f-zprava-err"></p>
</div>
<div class="form__f form__volba">
<input aria-describedby="f-souhlas-err" data-msg="Potvrďte 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 mou zprávu.</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=""/>
<p class="form__chyba" hidden="" role="alert">Zprávu se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 725 875 914</a>.</p>
<button class="btn btn--plna form__odeslat" type="submit">Odeslat</button>
</form>
</section>
<aside aria-labelledby="ko-org" class="ko-panel">
<div class="ko-foto"><a class="lb" href="#"><img alt="Děti a dospělí v pohádkových kostýmech s Artíkem před týpím" height="1200" src="assets/foto/freedomart-foto-01-900.webp" width="900"/></a><p aria-hidden="true" class="nalepka ko-nalepka"><span>Přijďte</span><strong>se</strong><span>podívat</span></p></div>
<h2 id="ko-org">Freedom Art z. s.</h2>
<ul class="ko-udaje">
<li class="ko-udaj"><p><span class="ko-udaj__popisek">Koordinátorka</span><strong>Simona Šindelková</strong></p></li>
<li class="ko-udaj"><p><span class="ko-udaj__popisek">Telefon</span><a class="ko-udaj__velky" href="#">+420 725 875 914</a></p></li>
<li class="ko-udaj"><p><span class="ko-udaj__popisek">E-mail</span><a href="#">freedomart@centrum.cz</a><br/><a href="#">info@freedomart.cz</a></p></li>
<li class="ko-udaj"><p><span class="ko-udaj__popisek">Adresa</span>Nedvědice 247, 592 62<br/><a href="#" rel="noopener" target="_blank">Zobrazit na mapě</a></p></li>
<li class="ko-udaj"><p><span class="ko-udaj__popisek">IČ</span>03305007</p></li>
<li class="ko-udaj"><p><span class="ko-udaj__popisek">Číslo účtu</span>2800655805/2010 (Fio banka)</p></li>
</ul>
</aside>
</div></div></div></main>
O nás
O nás úvod s koláží
Úvodní text a koláž fotek s nálepkou. Třídy: on-uvod, on-kolaz, lb, nalepka.
HTML kód
<main class="obsah" id="obsah"><section class="on-uvod">
<div class="w">
<h1 class="on-uvod__nadpis">Naší prioritou je poskytnout prostor pro <span>kvalitně strávený volný čas.</span></h1>
<div class="on-uvod__text">
<p>Díky tomu je v naší obci Nedvědice pamatováno na prevenci sociálně patologických jevů, které se jinak v souvislosti s dospívající mládeží mohou objevit. Velkým přínosem je sbližování dětí z různých škol v širokém okolí.</p>
<p>Celkově dění ve volnočasovém centru Freedom Art přispívá k vytváření estetických hodnot u malých i velkých návštěvníků. Je zde poskytnut prostor pro společné trávení času dětí a rodičů, v rámci kterého se utužují a prohlubují rodinné vazby.</p>
</div>
</div>
<div class="w on-kolaz">
<a class="lb" data-galerie="kolaz" href="#"><img alt="Děti a dospělí v pohádkových kostýmech před týpím" height="1600" sizes="(max-width: 690px) 44vw, 30vw" src="assets/foto/freedomart-foto-01-900.webp" srcset="assets/foto/freedomart-foto-01-900.webp 900w, assets/foto/freedomart-foto-01.webp 1200w" width="1200"/></a>
<a class="lb" data-galerie="kolaz" href="#"><img alt="Dívky s pomalovanými obličeji dělají strašidelné grimasy" height="800" sizes="(max-width: 690px) 88vw, 30vw" src="assets/foto/jsme-freedom-art-05-900.webp" srcset="assets/foto/jsme-freedom-art-05-900.webp 900w, assets/foto/jsme-freedom-art-05.webp 1200w" width="1200"/></a>
<a class="lb" data-galerie="kolaz" href="#"><img alt="Princezna s maskotem Artíkem na lesní cestě" height="1600" sizes="(max-width: 690px) 44vw, 15vw" src="assets/foto/freedomart-galerie-03-900.webp" srcset="assets/foto/freedomart-galerie-03-900.webp 900w, assets/foto/freedomart-galerie-03.webp 1200w" width="1200"/></a>
<a class="lb" data-galerie="kolaz" href="#"><img alt="Lesní skřítek v zeleném kostýmu s lucernou u skály" height="1600" sizes="(max-width: 690px) 44vw, 15vw" src="assets/foto/freedomart-galerie-16-900.webp" srcset="assets/foto/freedomart-galerie-16-900.webp 900w, assets/foto/freedomart-galerie-16.webp 1067w" width="1067"/></a>
<a class="lb" data-galerie="kolaz" href="#"><img alt="Dívka modeluje z hlíny postavu na keramickém kroužku" height="1600" sizes="15vw" src="assets/foto/freedomart-galerie-13-900.webp" srcset="assets/foto/freedomart-galerie-13-900.webp 900w, assets/foto/freedomart-galerie-13.webp 1190w" width="1190"/></a>
<a class="lb" data-galerie="kolaz" href="#"><img alt="Děti s dospělými na raftu u mola na řece" height="1200" sizes="30vw" src="assets/foto/galerie-02-900.webp" srcset="assets/foto/galerie-02-900.webp 900w, assets/foto/galerie-02.webp 1600w" width="1600"/></a>
<p aria-hidden="true" class="nalepka on-nalepka"><span>Pro</span><strong>všechny</strong><span>generace</span></p>
</div>
</section></main>
Fakta
Čtyři čísla na světlém pásu. Třída: on-fakta.
HTML kód
<main class="obsah" id="obsah"><section aria-label="Freedom Art v číslech" class="on-fakta">
<ul class="w">
<li><strong data-let-od="2014-09-01">12</strong><span>let k dispozici pro všechny děti, teenagery i dospělé</span></li>
<li><strong>2</strong><span>prostorné třídy (cca 52 m²), hudební a výtvarná</span></li>
<li><strong data-pocet-krouzku="anglictina anglictina-pro-deti klubik-pro-maminky-s-detmi keramika-deti keramika-nactileti klub-aktivnich-muzu pevecky-sbor-patron kytara rodicovsky-klub senior-club siti-1 siti-2 streetdance">13</strong><span>kroužků a kurzů pro děti, dospělé i seniory</span></li>
<li><strong data-lektori='[[["romana-zelezna"],["anglictina","kytara"]],[["zuzana-gabriela-glosrova"],["anglictina-pro-deti"]],[["zuzana-maternova"],["klubik-pro-maminky-s-detmi"]],[["petra-jiraskova"],["keramika-deti","keramika-nactileti"]],[["petra-glosr-cvrkalova"],["pevecky-sbor-patron"]],[["hana-zveskova"],["siti-1","siti-2"]],[["andrea-klaskova-a-gabriela-prochazkova"],["streetdance"]],[["andrea-klaskova-a-gabriela-prochazkova"],["streetdance"]]]'>8</strong><span>lektorek a lektorů, kteří kroužky vedou</span></li>
</ul>
</section></main>
Karty nabídky
Karty s fotkou a textem střídavě vlevo a vpravo. Třídy: on-nabidka, on-karta, on-karta__foto, tx.
HTML kód
<main class="obsah" id="obsah"><section class="on-nabidka" id="co-nabizime">
<div class="w on-nabidka__w">
<div class="on-karta">
<a class="lb on-karta__foto" data-galerie="nabidka" href="#"><img alt="Děti tvoří u stolu ve výtvarné dílně" height="800" sizes="(max-width: 860px) 88vw, 46vw" src="assets/foto/jsme-freedom-art-09-900.webp" srcset="assets/foto/jsme-freedom-art-09-900.webp 900w, assets/foto/jsme-freedom-art-09.webp 1200w" width="1200"/></a>
<div class="on-karta__obsah tx">
<h2 class="h--ruzova">Co nabízíme dětem</h2>
<p><strong>Pro děti všech věkových kategorií jsou připraveny rozmanité volnočasové aktivity.</strong> Velké oblibě se těší také pravidelné příměstské tábory či jednorázové akce.</p>
<p class="on-odkazy"><a class="odkaz-sipka" href="#"><span>Zobrazit kalendář nejbližších akcí</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a><a class="odkaz-sipka" href="#"><span>Kroužky a kurzy</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></p>
<p class="on-info"><svg aria-hidden="true" viewbox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 11v5.5M12 7.6v.1"></path></svg><span>Rodičům dětí na 1. stupni ZŠ v Nedvědici nabízíme službu bezpečného přesunu na kroužek. V praxi to znamená, že lektorka dle domluvy s rodiči a vedením ZŠ Nedvědice vyzvedne děti před družinou a bezpečně je dovede na jejich zájmovou aktivitu.</span></p>
</div>
</div>
<div class="on-karta">
<a class="lb on-karta__foto" data-galerie="nabidka" href="#"><img alt="Senioři si u stolu s kávou prohlížejí album" height="800" sizes="(max-width: 860px) 88vw, 46vw" src="assets/foto/senior-club-900.webp" srcset="assets/foto/senior-club-900.webp 900w, assets/foto/senior-club.webp 1200w" width="1200"/></a>
<div class="on-karta__obsah tx">
<h2 class="h--ruzova">Co nabízíme ostatním</h2>
<p><strong>Dospělým a seniorům nabízíme pěvecký sbor, angličtinu, keramiku a šití.</strong> Během roku pořádáme semináře, workshopy a sousedská setkávání.</p>
<div class="faq">
<details class="faq__i">
<summary>Prostory centra Freedom Art</summary>
<div class="faq__a"><p>Centrum má dvě prostorné třídy (cca 52 m²) - hudební a výtvarnou - obě s podlahovým vytápěním. Většina výuky tanečních, literárních, relaxačních a dalších kroužků se totiž odehrává vsedě na zemi a nám jde především o to, aby našim malým i velkým návštěvníkům bylo u nás příjemně a zbytečně se nenachladili.</p></div>
</details>
<details class="faq__i">
<summary>Pronájem prostor pro soukromé akce</summary>
<div class="faq__a"><p>Nabízíme i <a href="#">pronájem prostor pro soukromé akce</a> (oslavy, soustředění, workshopy, semináře apod.). K dispozici je profiaudio sestava, promítací plátno, flipchart, tabule aj. Cena dle dohody a využití techniky. Dotazy zodpovíme na naší e-mailové adrese <a href="#">freedomart@centrum.cz</a>.</p></div>
</details>
</div>
</div>
</div>
</div>
</section></main>
Lidé a partneři
Lektoři
Mřížka karet lektorů s fotkou. Třídy: le, le-uvod, le-mrizka, le-karta.
HTML kód
<main class="obsah" id="obsah"><section class="le">
<div class="w">
<header class="le-uvod">
<h1 class="h--ruzova">Lektoři Freedom Art</h1>
<p class="le-uvod__perex">Lektoři kroužků a kurzů Freedom Art v Nedvědici u Brna: zpěv, keramika, šití, angličtina, cvičení, lukostřelba, tanec a psaní.</p>
</header>
<div class="le-mrizka">
<article class="le-karta" id="petra-glosr-cvrkalova">
<a class="lb le-foto" href="#"><picture></picture></a>
<div class="le-karta__text">
<h2 class="le-karta__jmeno">Mgr. Petra Glosr Cvrkalová</h2>
<div class="le-krouzky">
<p class="le-krouzky__popis">Vede kroužek:</p>
<ul>
<li><a href="#">Pěvecký sbor P. A. T. R. O. N</a></li>
</ul>
</div>
<div class="le-karta__bio">
<p>Již jako studentka PedF MU v Brně založila Nedvědický pěvecký sbor Petry Cvrkalové - Cvrčci s vizí vrátit do Nedvědice tradici sborového zpěvu. Při představě obsahové náplně tělesa brala v potaz přirozenost dětského nejen pěveckého, ale i pohybově dramatického projevu.</p>
<p>Pokládá za důležité, aby děti vlastním prožitkem našly cestu k hudbě a oborům s hudbou spojeným. Pod jejím vedením se zpěváčci učí základům hlasové hygieny, techniky dechu, intonace a dramatizace.</p>
<p><strong>Jako textařka a autorka dětských skladeb upravuje či přímo tvoří písně pro potřeby sboru. Spolupracuje se zpěváky české hudební scény, kterým píše texty k písním.</strong> K nejznámějším patří <strong>Ewa Farna</strong> (alba Měl’s mě vůbec rád, Ticho, Virtuální), <strong>Helena Vondráčková</strong>, Kamila Nývltová, Markéta Konvičková, Gabriela Gunčíková, Alžběta Kolečkářová, David Deyl, Sandra Rosová, Lenya, Embassy, Adéla Zouharová atd. Poslední rok <strong>spolupracuje na vytváření dětských pořadů pro TV</strong>.</p>
<p><strong>Ocenění:</strong> Osobnost NNO 2021 za přínos České republice v činnosti nestátních neziskových organizací.</p>
</div>
<button aria-haspopup="dialog" class="odkaz-sipka le-vice" type="button"><span>Celý medailonek</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg><span class="skryte"> - Mgr. Petra Glosr Cvrkalová</span></button>
</div>
</article>
<article class="le-karta" id="petra-jiraskova">
<a class="lb le-foto" href="#"><picture></picture></a>
<div class="le-karta__text">
<h2 class="le-karta__jmeno">Petra Jirásková</h2>
<div class="le-krouzky">
<p class="le-krouzky__popis">Vede kroužky:</p>
<ul>
<li><a href="#">Keramika pro děti</a></li>
<li><a href="#">Keramika pro teenagery</a></li>
</ul>
</div>
<div class="le-karta__bio">
<p>S tvorbou jsem začala po narození dvojčátek - na podzim roku 2016. Keramika se pro mě tehdy stala prostorem klidu, soustředění a možností otisknout momentální rozpoložení do tvaru.</p>
<p>Prvních devět let jsem hlínu převážně ručně modelovala a malovala engobami. Pracovala jsem s kameninou i porcelánem a postupně hledala vlastní rukopis - v organických tvarech, strukturách a glazurách, které nikdy nevypadají úplně stejně.</p>
<p>Začala jsem tvořit v ložnici našeho bytu, po přestěhování v kuchyni a následně na chodbě. Keramika si v mém životě vždy našla své místo, byť jsem ji měla jako doplněk ke kancelářské práci.</p>
<p>Dnes už mám tři děti a tvořím ve svém ateliéru v Lomnici u Tišnova. Zde mám prostor i pro točení na kruhu a soukromé kurzy. Příroda v okolí a místní lidé jsou skvělými múzami.</p>
<p>Dělá mi radost vytvořit něco originálního a zároveň předávat nadšení pro řemeslo dál.</p>
</div>
<button aria-haspopup="dialog" class="odkaz-sipka le-vice" type="button"><span>Celý medailonek</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg><span class="skryte"> - Petra Jirásková</span></button>
</div>
</article>
<article class="le-karta" id="hana-zveskova">
<a class="lb le-foto" href="#"><picture></picture></a>
<div class="le-karta__text">
<h2 class="le-karta__jmeno">Hana Zvéšková</h2>
<div class="le-krouzky">
<p class="le-krouzky__popis">Vede kroužky:</p>
<ul>
<li><a href="#">Šití 1</a></li>
<li><a href="#">Šití 2</a></li>
</ul>
</div>
<div class="le-karta__bio">
<p><strong>Tvořím z různých materiálů v podstatě celý život.</strong> Dřevo i hlína jsou mi velmi blízké, i když se posledních 20 let zabývám především materiálem textilním v různých podobách. <strong>Základem a inspirací je dotek s přírodou.</strong></p>
</div>
<button aria-haspopup="dialog" class="odkaz-sipka le-vice" type="button"><span>Celý medailonek</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg><span class="skryte"> - Hana Zvéšková</span></button>
</div>
</article>
<article class="le-karta" id="romana-zelezna">
<a class="lb le-foto" href="#"><img alt="Žena s britskou vlajkou na tváři drží stoh knih" height="600" src="assets/foto/anglictina-900.webp" width="900"/></a>
<div class="le-karta__text">
<h2 class="le-karta__jmeno">Mgr. Romana Železná</h2>
<div class="le-krouzky">
<p class="le-krouzky__popis">Vede kroužky:</p>
<ul>
<li><a href="#">Angličtina</a></li>
<li><a href="#">Písničky k ohni</a></li>
</ul>
</div>
<div class="le-karta__bio">
<p>Jazyky i hudba jsou mojí celoživotní vášní. Už během studia jsem strávila rok na gymnáziu v německém Ambergu. Později jsem studovala bohemistiku a nederlandistiku na Filozofické fakultě Masarykovy univerzity. Své zkušenosti jsem si rozšířila také během ročního studijního pobytu na Univerzitě v Utrechtu.</p>
<p>Během své profesní dráhy jsem získala zkušenosti v mnoha různých oblastech. Vedla jsem kurzy nizozemštiny pro dospělé, věnovala jsem se tvorbě slovníků, překladům i tlumočení. Pracovala jsem také jako školní asistentka, hotelová recepční, servírka, barmanka i uklízečka. Každá z těchto zkušeností mě obohatila a naučila mě otevřenosti, trpělivosti a schopnosti přizpůsobit se různým situacím i lidem.</p>
<p>Hudba mě provází od dětství. Na klavír hraji od šesti let a v posledních letech jsem si zamilovala také kytaru. Velkou součástí mého života je i sborový zpěv, díky kterému jsem poznala, jakou sílu má společné zpívání a hraní.</p>
<p>Ve svých kroužcích propojuji lásku k jazykům a hudbě s přátelským přístupem. Mým cílem je vytvářet prostředí, ve kterém jsou děti i dospělí přirozeně, s radostí a bez zbytečného stresu a ostychu.</p>
</div>
<button aria-haspopup="dialog" class="odkaz-sipka le-vice" type="button"><span>Celý medailonek</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg><span class="skryte"> - Mgr. Romana Železná</span></button>
</div>
</article>
<article class="le-karta" id="zuzana-maternova">
<a class="lb le-foto" href="#"><picture></picture></a>
<div class="le-karta__text">
<h2 class="le-karta__jmeno">Mgr. Zuzana Maternová</h2>
<div class="le-krouzky">
<p class="le-krouzky__popis">Vede kroužek:</p>
<ul>
<li><a href="#">Cvičení KLUBÍČKO</a></li>
</ul>
</div>
</div>
</article>
<article class="le-karta" id="andrea-klaskova-a-gabriela-prochazkova">
<a class="lb le-foto" href="#"><img alt="Tanečnice v pohybu před barevnou stěnou" height="600" src="assets/foto/streetdance-900.webp" width="900"/></a>
<div class="le-karta__text">
<h2 class="le-karta__jmeno">Andrea Klašková a Gabriela Procházková</h2>
<div class="le-krouzky">
<p class="le-krouzky__popis">Vedou kroužek:</p>
<ul>
<li><a href="#">Streetdance a taneční průprava</a></li>
</ul>
</div>
</div>
</article>
</div>
</div>
</section></main>
Partneři
Mřížka karet partnerů s logy. Třídy: pa, pa-hlava, pa-mrizka, pa-karta.
HTML kód
<main class="obsah" id="obsah"><section class="pa">
<div class="w pa-w">
<div class="pa-hlava">
<h1 class="h--ruzova">Děkujeme partnerům</h1>
<p class="pa-uvod">Všem našim partnerům, spolupracujícím společnostem i jednotlivcům <strong>velmi děkujeme za pomoc a podporu</strong> volnočasového a komunitního centra Freedom Art v Nedvědici.</p>
</div>
<div class="pa-mrizka">
<div class="pa-karta">
<div class="pa-plocha"><a class="pa-logo pa-logo--ned" href="#" rel="noopener" target="_blank"><img alt="Znak městyse Nedvědice" height="145" src="assets/foto/partner-nedvedice-e1580461420934.webp" width="120"/></a></div>
<div class="pa-telo tx">
<h2 class="stitek">Obec</h2>
<p><strong>Některé akce centra Freedom Art vznikly za podpory <a href="#" rel="noopener" target="_blank">Městyse Nedvědice</a>.</strong></p>
</div>
</div>
<div class="pa-karta">
<div class="pa-plocha"><a class="pa-logo pa-logo--jmk" href="#" rel="noopener" target="_blank"><img alt="Jihomoravský kraj" height="36" src="assets/grafika/logo-jihomoravsky-kraj.svg" width="350"/></a></div>
<div class="pa-telo tx">
<h2 class="stitek">Kraj</h2>
<p>Sebevzdělávací semináře a prorodinné aktivity byly podpořeny z finančních prostředků <strong><a href="#" rel="noopener" target="_blank">Jihomoravského kraje</a></strong>.</p>
</div>
</div>
<div class="pa-karta">
<div class="pa-plocha"><a class="pa-logo pa-logo--mpsv" href="#" rel="noopener" target="_blank"><img alt="Ministerstvo práce a sociálních věcí ČR" height="93" src="assets/grafika/logo-mpsv.svg" width="250"/></a></div>
<div class="pa-telo tx">
<h2 class="stitek">Stát</h2>
<p>Sebevzdělávací semináře a prorodinné aktivity byly podpořeny z finančních prostředků <strong><a href="#" rel="noopener" target="_blank">Ministerstva práce a sociálních věcí</a></strong>.</p>
</div>
</div>
<div class="pa-karta">
<div class="pa-plocha"><span class="pa-logo pa-logo--eu"><img alt="Spolufinancováno Evropskou unií" height="80" src="assets/grafika/logo-spolufinancovano-eu.svg" width="288"/></span></div>
<div class="pa-telo tx">
<h2 class="stitek">Evropská unie</h2>
<p><strong>Evropská unie, Evropský sociální fond,</strong> <a href="#" rel="noopener" target="_blank"><strong>Operační program Zaměstnanost</strong></a> a <a href="#" rel="noopener" target="_blank"><strong>Ministerstvo práce a sociálních věcí ČR</strong></a> podporují Příměstské tábory v Nedvědici CZ.03.2.65/<wbr>0.0/<wbr>0.0/<wbr>16_047/<wbr>0010353</wbr></wbr></wbr></wbr></p>
</div>
</div>
</div>
<div class="pa-firmy">
<h2 class="stitek">Další partneři</h2>
<div class="pa-loga">
<div class="pa-plocha"><a class="pa-logo pa-logo--reontech" href="#" rel="noopener" target="_blank"><img alt="Reontech" height="60" src="assets/grafika/reontech-logo.svg" width="277"/></a></div>
</div>
</div>
</div>
</section></main>
