Bílé stránky s tmavě modrým textem #0e1530, zelená #339966 je akcent pro štítky, ikony, čísla a ukazatel sbírky.
Šedozelená #eef2f0 je podklad výzvy, kontaktu, poděkování po odeslání a kruhů pod ikonami.
Jediné písmo Satoshi (řezy 300 až 900) ve všech velikostech, text 20 / 32 px řez 500, nadpisy řez 500, velké úvody 700.
Obsah široký nejvýš 1540 px, okraj stránky 30 px, pod 1100 px 6 % šířky okna. Hlavička 100 px, pod 1100 px 72 px.
Sekce oddělují svislé mezery 80 až 120 px, na mobilu 60 px.
Tlačítka a odkazy
Kulaté tlačítko btn výšky 74 px s obrysem 2 px, při najetí inverzní výplň. Plné btn--plna je tmavě modré.
Na tmavé ploše bílé varianty btn--bila (obrys) a btn--bila-plna (výplň), při najetí se prohodí.
Odkaz se šipkou odkaz-sipka je tučný, šipka se při najetí posune o 4 px doprava.
Odkazy v textu podtržené 1 px s odsazením 3 px, při najetí bez podtržení. V menu naopak podtržení až při najetí.
Karty, ikony a štítky
Karta karta má bílou plochu, rámeček 1 px #e3e6e4 a zaoblení 16 px.
Ikona ikona je kruh 56 px se šedozelenou plochou a zelenou linkovou ikonou.
Štítek stitek nad nadpisem je zelený, 14 px verzálkami s prostrkáním 0,12 em. Na tmavé ploše světle zelený #7fd1a6.
Ukazatel sbírky postup: vybraná částka tučně, cíl pod ní a zelený pruh 8 px na průhledné modré.
Obrázky
Fotky z akcí a projektů nadace, v ukázce volné fotky z Pexels. Fotky se otevírají ve fotogalerii (lb), malé kulaté tlačítko s lupou vpravo dole.
Fotky mají zaoblení 16 px, portréty týmu jsou kulaté.
Ilustrace oblastí (lidé, příroda, kultura) jsou zelené linkové SVG.
Navigace
Bílá přilepená hlavička se stínem, logo vlevo, odkazy s rozbalovací nabídkou Kde právě pomáháme.
Pod 1100 px tlačítko MENU otevírá tmavě modrý panel zprava s velkými odkazy, kontakty a právními odkazy dole.
Stránky projektů mají pod úvodem přilepenou lištu kotev na jednotlivé oddíly, na mobilu skrytou.
Každá stránka končí šedozelenou výzvou Pomáhejte s námi se třemi cestami a bílou patičkou.
Formuláře
Pole výšky 62 px s rámečkem #cdcdc1 a zaoblením, chyba se ukáže až po opuštění pole nebo odeslání, červeně #d0281e.
Po odeslání se formulář vymění za šedozelené poděkování (#odeslano-<typ>).
U projektu Maminky maminkám přepínají dvě karty Nabízím a Hledám mezi dvěma formuláři.
Responzivita
Zlomy 1300, 1100, 900, 690 a 400 px. Pod 1100 px mobilní menu, pod 690 px vše v jednom sloupci.
Patička: čtyři sloupce, pod 1300 px dva, pod 690 px jeden.
Velké nadpisy úvodů 68 px se zmenšují po krocích až na 34 px na mobilu.
Barvy
Značka
tmavě modrá#0e1530Text, nadpisy, plná tlačítka, úvod s fotkou a mobilní menu.
zelená#339966Logo, štítky nad nadpisy, ikony, číslované seznamy a ukazatel sbírky.
světle zelená#7fd1a6Štítek na tmavé ploše v sekci Od dobrovolnictví k nadaci.
Plochy
šedozelená#eef2f0Výzva Pomáhejte s námi, kontakt, poděkování, citace a kruhy pod ikonami.
bílá#ffffffStránka, hlavička, patička a karty.
rámeček#e3e6e4Rámeček karet, kulatých ikon v patičce a čára nad oddíly článku.
linka#cdcdc1Rámeček polí formuláře, linky častých dotazů a spodní řádek patičky.
Text
šedá#5d6275Popisky verzálkami a vedlejší text v poděkování.
šedá kotev#5b6072Odkazy v liště kotev na stránkách projektů.
poznámka#4b5165Poznámky pod platebními údaji.
zástupný text#8a8d98Zástupný text v polích formuláře.
Stavy
chyba#d0281eRámeček chybného pole, hláška pod polem a rámeček chyby odeslání.
Typografie
Rozměry
Mezery a šířky
Název
Hodnota
Ukázka
Použití
šířka obsahu
1540px
Nejvyšší šířka obsahu `--max-obsah`, hlavička jde přes celou šířku.
okraj stránky
30px
Boční okraj `--okraj`, pod 1100 px 6 % šířky okna.
sekce
110px
Svislá mezera velkých sekcí, na tabletu 80 px, na mobilu 60 px.
hlavička
100px
Výška hlavičky `--hlava`, pod 1100 px 72 px.
tlačítko
74px
Výška tlačítka, vnitřní okraj 36 px po stranách.
pole
62px
Výška pole formuláře.
Rádiusy
Název
Hodnota
Ukázka
Použití
tlačítko
200px
Kulatá tlačítka a pilulky kotev.
poděkování
18px
Poděkování po odeslání a rámeček chyby.
karta
16px
Karty, fotky, citace a rozbalená nabídka.
pruh sbírky
8px
Pruh ukazatele sbírky.
kruh
50%
Ikony, portréty a tlačítko s lupou.
Značka a obrazové prvky
LogoIlustrace LidéIlustrace PřírodaIlustrace KulturaLogo partnera LípaLogo partnera Spolek Most
Komponenty
Hlavička a patička
Hlavička
Bílá přilepená hlavička se stínem: logo vlevo, odkazy s rozbalovací nabídkou. Aktivní stránka a najetý odkaz jsou podtržené 1 px. Třídy: hlava, hlava__logo, nav, nav__sub.
Tmavě modrý panel zprava pod 1100 px s velkými odkazy, podnabídkou, kontakty a právními odkazy dole. Zavírá se křížkem, klávesou Esc nebo klepnutím na ztmavené pozadí. Třídy: ocm, ocm__panel, ocm__menu, ocm__spojeni.
Bílá patička: název nadace, popis a kulaté ikony sítí, sloupce odkazů a kontaktů, spodní řádek s právními odkazy. Třídy: pata, pata__w, pata__site, pata__spodek.
Tmavě modrý úvod s fotkou, bílým nadpisem, perexem a bílými tlačítky, vpravo karta sbírky s ukazatelem. Třídy: uv-hero, uv-hero__akce, uv-sbirka, postup.
HTML kód
<main class="obsah" id="obsah"><section class="uv-hero">
<img alt="Tým Nadace Peony v parku" class="uv-hero__foto" fetchpriority="high" height="902" sizes="100vw" src="assets/foto/tym-v-parku-01.webp" srcset="assets/foto/tym-v-parku-01-900.webp 900w, assets/foto/tym-v-parku-01.webp 1920w" width="1920"/>
<div class="w uv-hero__in">
<div class="uv-hero__t">
<h1 class="uv-hero__h">Pomáháme a tvoříme lepší svět kolem nás</h1>
<p class="uv-hero__lead">Jsme tým lidí, kteří mají společný cíl - dělat dobré skutky a vytvářet tak lepší prostor pro život.</p>
<div class="uv-hero__akce">
<a class="btn btn--bila-plna" href="#">Podpořit nás</a>
<a class="btn btn--bila" href="#">Naše projekty</a>
</div>
</div>
<aside aria-label="Veřejná sbírka Zachraň Kostel!" class="karta uv-sbirka">
<p class="stitek">Veřejná sbírka</p>
<p class="uv-sbirka__n">Zachraň Kostel!</p>
<div class="postup"><p class="postup__cisla"><strong>104 500 Kč</strong><span>vybráno z 2 000 000 Kč</span></p><div class="postup__pruh"><span style="--p:5.23%"></span></div></div>
<a class="odkaz-sipka" href="#"><span>Více o projektu</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</aside>
</div>
</section></main>
Poslání
Velký text poslání se štítkem a odkazem se šipkou, vedle skládané fotky. Třídy: uv-poslani, uv-poslani__fota.
HTML kód
<main class="obsah" id="obsah"><section class="uv-poslani">
<div class="w uv-poslani__in">
<div class="uv-poslani__fota">
<img alt="Rodina s dětmi při pletení pomlázek na Velikonočních tradicích v Doubravě" height="533" src="assets/foto/velikonoce.webp" style="object-position:30% 50%" width="800"/>
<img alt="Dobrovolníci přenášejí kamenný podstavec v bývalém kostele v Doubravě" height="675" src="assets/foto/prvni-brigada-na-kostele-12-900.webp" width="900"/>
</div>
<div>
<p class="stitek">Kdo jsme</p>
<h2 class="uv-poslani__h">Znáte ten skvělý pocit, když pomůžete stařence s nákupem? Dobré skutky nám lidem zkrátka dělají dobře.</h2>
<p>Jednotlivec sice zmůže hodně, ale společně dokážeme víc. A proto jsme tady. Sdílíme hodnoty jako respekt, pokora a odhodlání.</p>
<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>
</div>
</div>
</section></main>
Úvod podstránky
Štítek, velký nadpis 64 px a text vedle něj, bez fotky. Třídy: kp-uvod, kp-uvod__h, kp-uvod__text.
HTML kód
<main class="obsah" id="obsah"><section class="kp-uvod">
<div class="w kp-uvod__in">
<div>
<p class="stitek">Aktuální projekty</p>
<h1 class="kp-uvod__h">Kde právě pomáháme</h1>
</div>
<p class="kp-uvod__text">Podporujeme projekty, na které by jednotlivec sám nestačil. Právě teď zachraňujeme kostel v Doubravě a půjčujeme zdravotní pomůcky maminkám s miminky. Vyberte si, co chcete podpořit.</p>
</div>
</section></main>
Úvod projektu
Název projektu, perex, ukazatel sbírky a tlačítka vlevo, velká fotka s lupou vpravo. Třídy: pr-hero, pr-hero__postup, pr-akce.
Velký nadpis, perex a podpis autorů s kulatými portréty, vedle fotka. Třídy: ab-hero, ab-autori.
HTML kód
<main class="obsah" id="obsah"><section class="w ab-hero">
<p class="stitek">O nás</p>
<h1 class="ab-hero__h">Záleží nám na tom, co se kolem nás děje. Jako jednotlivci jsme ale narazili na limity vlastních možností. Rozhodli jsme se tedy spojit síly a páchat dobro společně.</h1>
<div class="ab-hero__in">
<div class="ab-hero__t">
<p class="ab-hero__lead tx">Naším domovem je Podlesí, na hranice a teritoria si ale nehrajeme, jiným dobročinným projektům fandíme a rádi je podporujeme. Budujeme komunitu lidí, kteří sdílí naše hodnoty. <a href="#">Pokud chcete, můžete pomáhat s námi.</a></p>
<div class="ab-autori">
<span class="ab-autori__fota">
<img alt="" height="120" src="assets/foto/lucie-horakova-01.webp" width="120"/>
<img alt="" height="120" src="assets/foto/pavel-horak-01.webp" width="120"/>
</span>
<p><strong>Lucie a Pavel Horákovi</strong><br/>Manželé z Doubravy a zakladatelé<br/>Nadace Peony</p>
</div>
</div>
<div class="ab-hero__foto">
<a aria-label="Zvětšit fotku" class="lb lb-lupa" href="#"><img alt="Tým Nadace Peony: Eva Malá, Pavel Horák a Lucie Horáková v parku nad brožurou nadace" fetchpriority="high" height="1280" sizes="(max-width: 1099px) 100vw, 58vw" src="assets/foto/tym-02.webp" srcset="assets/foto/tym-02-900.webp 900w, assets/foto/tym-02.webp 1920w" width="1920"/><span aria-hidden="true" class="lupa"><svg viewbox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m15.5 15.5 5 5"></path></svg></span></a>
</div>
</div>
</section></main>
Úvod Jak přispět
Nadpis, perex a pilulky se skoky na způsoby pomoci, vedle fotka. Třídy: po-uvod, po-skok.
HTML kód
<main class="obsah" id="obsah"><section class="w po-uvod">
<div class="po-uvod__t">
<p class="stitek">Pomáhejte s námi</p>
<h1 class="po-uvod__h">Jak můžete přispět</h1>
<p class="tx po-uvod__lead">Existuje několik způsobů, jak můžete přispět a pomoci. Můžete nám poskytnout <a href="#" rel="noopener" target="_blank">finanční dar</a>, stát se <strong>dobrovolníkem</strong>, darovat <a href="#">pomůcky pro maminky</a> nebo prostě pomoci šířit povědomí o naší činnosti.</p>
<ul aria-label="Způsoby pomoci na této stránce" class="po-skok">
<li><a href="#">Finanční dar<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"></path></svg></a></li>
<li><a href="#">Veřejná sbírka<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"></path></svg></a></li>
<li><a href="#">Pomůcky pro maminky<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"></path></svg></a></li>
<li><a href="#">Dobrovolnictví<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"></path></svg></a></li>
</ul>
</div>
<div class="po-uvod__foto">
<a aria-label="Zvětšit fotku" class="lb lb-lupa" href="#"><img alt="Lucie Horáková, Pavel Horák a Eva Malá v tričkách Nadace Peony v podzimním parku" fetchpriority="high" height="1280" sizes="(max-width: 1099px) 100vw, 55vw" src="assets/foto/tym-04.webp" srcset="assets/foto/tym-04-900.webp 900w, assets/foto/tym-04.webp 1920w" width="1920"/><span aria-hidden="true" class="lupa"><svg viewbox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m15.5 15.5 5 5"></path></svg></span></a>
</div>
</section></main>
Projekty a pomoc
Oblasti pomoci
Tři karty s ilustrací oblasti (lidé, příroda, kultura), nadpisem a textem. Třídy: uv-oblasti, uv-oblast.
HTML kód
<main class="obsah" id="obsah"><section class="uv-oblasti">
<div class="w">
<div class="uv-hlava">
<div>
<p class="stitek">Co děláme</p>
<h2 class="h-sekce">Oblasti, ve kterých pomáháme</h2>
</div>
</div>
<ul class="uv-oblasti__m">
<li class="karta uv-oblast">
<img alt="" height="100" src="assets/grafika/ikona-lide.svg" width="100"/>
<h3 class="uv-oblast__n">Lidé</h3>
<p>Podporujeme rodiny s miminky. Novopečeným maminkám půjčujeme zdravotní pomůcky a podporujeme je při kojení.</p>
</li>
<li class="karta uv-oblast">
<img alt="" height="100" src="assets/grafika/ikona-priroda.svg" width="100"/>
<h3 class="uv-oblast__n">Příroda</h3>
<p>Záleží nám na krajině Podlesí, kde je náš domov. Pořádáme brigády a zveme lidi ven, třeba na cyklovýlet OKOLO Doubravy.</p>
</li>
<li class="karta uv-oblast">
<img alt="" height="100" src="assets/grafika/ikona-kultura.svg" width="100"/>
<h3 class="uv-oblast__n">Kultura a památky</h3>
<p>Zachraňujeme bývalý kostel v Doubravě a vracíme do něj život koncerty, slavnostmi a místními tradicemi.</p>
</li>
</ul>
</div>
</section></main>
Projekty na úvodu
Karty projektů s fotkou, názvem, perexem, ukazatelem sbírky a odkazem se šipkou. Třídy: uv-projekty, uv-proj.
Projekty pod sebou: fotka, štítek, název, perex, fakta, kurátor projektu, ukazatel sbírky a tlačítko. Třídy: kp-proj, kp-fakta, kp-kurator.
HTML kód
<main class="obsah" id="obsah"><section aria-label="Projekty" class="kp-seznam">
<div class="w">
<article class="kp-proj">
<a aria-hidden="true" class="kp-proj__foto" href="#" tabindex="-1"><img alt="Kostel v Doubravě s věží za zdí a stromy" fetchpriority="high" height="1281" sizes="(max-width: 900px) 100vw, 58vw" src="assets/foto/kostel-zvenku-900.webp" srcset="assets/foto/kostel-zvenku-900.webp 900w, assets/foto/kostel-zvenku.webp 1920w" width="1920"/></a>
<div class="kp-proj__t">
<p class="stitek">Kultura a památky</p>
<h2 class="kp-proj__nazev"><a href="#">Zachraň Kostel!</a></h2>
<p class="kp-proj__perex">Pomozte nám obnovit důležitou historickou<br class="br-d"/> památku v obci Doubrava.</p>
<div class="postup kp-proj__postup">
<p class="postup__cisla"><strong>104 500 Kč</strong><span>vybráno z 2 000 000 Kč</span></p>
<div class="postup__pruh"><span style="--p:5.23%"></span></div>
</div>
<ul class="kp-fakta">
<li>Smlouva podepsána 16. 10. 2023</li>
<li>Projekt rekonstrukce je zpracovaný</li>
</ul>
<div class="kp-kurator">
<img alt="" height="120" src="assets/foto/pavel-horak-01.webp" width="120"/>
<p>Kurátor projektu<br/><strong>Pavel Horák</strong></p>
</div>
<div class="kp-proj__akce">
<a class="btn btn--plna" href="#" rel="noopener" target="_blank">Podpořit</a>
<a class="btn" href="#">Detail projektu</a>
</div>
</div>
</article>
<article class="kp-proj">
<a aria-hidden="true" class="kp-proj__foto" href="#" tabindex="-1"><img alt="Maminka s novorozeným miminkem v náručí" height="934" sizes="(max-width: 900px) 100vw, 58vw" src="assets/foto/maminka-s-miminkem-900.webp" srcset="assets/foto/maminka-s-miminkem-900.webp 900w, assets/foto/maminka-s-miminkem.webp 1600w" width="1600"/></a>
<div class="kp-proj__t">
<p class="stitek">Lidé</p>
<h2 class="kp-proj__nazev"><a href="#">Maminky maminkám</a></h2>
<p class="kp-proj__perex">Rádi bychom zajistili, aby podpora a péče o matky nekončila propuštěním z nemocnice.</p>
<ul class="kp-fakta">
<li>Bezplatné zapůjčení zdravotních pomůcek</li>
<li>Odsávačky mateřského mléka, kojenecké váhy, monitory dechu a další</li>
<li>Pomůcky darují rodiny, které je už nevyužijí</li>
</ul>
<div class="kp-kurator">
<img alt="" height="120" src="assets/foto/eva-mala-01.webp" width="120"/>
<p>Kurátorka projektu<br/><strong>Eva Malá</strong></p>
</div>
<div class="kp-proj__akce">
<a class="btn btn--plna" href="#">Podpořit</a>
<a class="btn" href="#">Detail projektu</a>
</div>
</div>
</article>
</div>
</section></main>
Nabídka spolupráce
Nadpis a text vlevo, plné tlačítko vpravo. Třídy: kp-spol, kp-spol__btn.
HTML kód
<main class="obsah" id="obsah"><section class="w kp-spol">
<div class="kp-spol__in">
<div class="kp-spol__t">
<p class="stitek">Spolupráce</p>
<h2 class="h-sekce">Máte vlastní dobročinný projekt?</h2>
<p>Jsme otevřeni spolupráci a rádi podpoříme i vaše charitativní aktivity.</p>
</div>
<a class="btn btn--plna kp-spol__btn" href="#">Napište nám</a>
</div>
</section></main>
Text s citací
Štítek a nadpis vlevo, vpravo úvodní odstavec, text a citace s podpisem. Třídy: pr-o, pr-citace, pr-podpis.
HTML kód
<main class="obsah" id="obsah"><section class="pr-blok pr-o" id="o-projektu">
<div class="w pr-o__in">
<div class="pr-o__h">
<p class="stitek">O projektu</p>
<h2 class="pr-o__lead">Stalo se vám někdy, že jste se dívali na chátrající stavbu ve vašem okolí a říkali jste si: „Taková škoda - vždyť by ten prostor šel tak krásně využít“?</h2>
</div>
<div class="pr-o__t">
<p class="pr-citace">V našem rodném kraji v obci Doubrava dlouhá léta chátral bývalý kostel. Denně jsme kolem něj chodili, v hlavě myšlenku, jaká je to škoda. Kostel v té době patřil soukromému majiteli, který neměl na jeho rekonstrukci žádný zájem. „Můj bratranec, místní kovář, ho jednoho dne u kostela potkal. Dal se s ním do řeči a vzal si na něj kontakt,“ vypráví Pavel Horák, předseda správní rady nadace, o tom, jak se s majitelem poprvé spojil. „Po několika večerech jsme měli jasno, že si příležitost k záchraně kostela nenecháme ujít.“</p>
<div class="pr-podpis">
<img alt="Pavel Horák" height="120" src="assets/foto/pavel-horak-01.webp" width="120"/>
<p><strong>Pavel Horák</strong><br/>Kurátor projektu Zachraň Kostel!</p>
</div>
</div>
</div>
</section></main>
Fotogalerie
Vodorovný pás fotek posouvaný šipkami nebo prstem, fotky se otevírají ve fotogalerii. Třídy: pr-gal, pr-gal__pas, pr-gal__sipka.
HTML kód
<main class="obsah" id="obsah"><section class="pr-blok pr-galerie" id="fotogalerie">
<div class="w">
<h2 class="h-sekce">Fotogalerie</h2>
</div>
<div class="pr-gal" data-pas="">
<div aria-label="Fotogalerie, posouvejte do stran" class="pr-gal__pas" role="region" tabindex="0">
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 1" height="1001" src="assets/foto/projekt-zachran-kostel-07.webp" width="822"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 2" height="601" src="assets/foto/projekt-zachran-kostel-06-900.webp" width="900"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 3" height="601" src="assets/foto/projekt-zachran-kostel-01-900.webp" width="900"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 4" height="601" src="assets/foto/projekt-zachran-kostel-03-900.webp" width="900"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 5" height="601" src="assets/foto/projekt-zachran-kostel-04-900.webp" width="900"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 6" height="601" src="assets/foto/projekt-zachran-kostel-02-900.webp" width="900"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 7" height="601" src="assets/foto/projekt-zachran-kostel-05-900.webp" width="900"/></a>
<a class="lb" data-galerie="zachran-kostel" href="#"><img alt="Záchrana kostela v Doubravě, fotografie 8" height="1075" src="assets/foto/projekt-zachran-kostel-08-900.webp" width="900"/></a>
</div>
<button aria-label="Předchozí fotka" class="pr-gal__sipka pr-gal__pred" data-dir="-1" hidden="" type="button"><svg aria-hidden="true" height="22" viewbox="0 0 24 24" width="22"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></button>
<button aria-label="Další fotka" class="pr-gal__sipka pr-gal__dal" data-dir="1" hidden="" type="button"><svg aria-hidden="true" height="22" viewbox="0 0 24 24" width="22"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></button>
</div>
</section></main>
Fotka a text
Dva sloupce: fotka s lupou a text s nadpisem a tlačítkem. Třídy: pr-dvou, pr-dvou__foto, pr-dvou__t.
HTML kód
<main class="obsah" id="obsah"><section class="pr-blok pr-proc" id="proc">
<div class="w pr-dvou">
<div class="pr-dvou__foto">
<a aria-label="Zvětšit fotku" class="lb lb-lupa" href="#"><img alt="Dobrovolníci při brigádě u brány kostela v Doubravě" height="1440" sizes="(max-width: 900px) 100vw, 50vw" src="assets/foto/prvni-brigada-na-kostele-09-900.webp" srcset="assets/foto/prvni-brigada-na-kostele-09-900.webp 900w, assets/foto/prvni-brigada-na-kostele-09.webp 1920w" width="1920"/><span aria-hidden="true" class="lupa"><svg viewbox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m15.5 15.5 5 5"></path></svg></span></a>
</div>
<div class="pr-dvou__t">
<p class="stitek">Proč pomáhat</p>
<h2 class="h-sekce">Proč je obnova kostela důležitá?</h2>
<p class="pr-text">Vyjednávání o koupi se vleklo, přesto jsme ale nepolevili a nakonec se naše snaha vyplatila. Po ročním nesnadném vyjednávání jsme kostel získali do péče a z dostupných prostředků chceme financovat jeho nabytí a rekonstrukci. Proto se nyní obracíme na vás. Není-li vám lhostejné vaše okolí, můžete podpořit obnovu dlouho chátrající památky.</p>
<div class="pr-akce">
<a class="btn btn--plna" href="#" rel="noopener" target="_blank">Chci podpořit obnovu památky</a>
</div>
</div>
</div>
</section></main>
Plánované kroky
Karty kroků v řadě s kruhovým ukazatelem průběhu v procentech, stavem a krátkým textem, u sbírky i odkaz na dar. Třídy: pr-kroky, pr-krok, pr-kr.
Nadpis a text vlevo, vpravo cesty k pomoci s nadpisem, popisem a odkazem. Třídy: pr-pomoc, pr-cesta.
HTML kód
<main class="obsah" id="obsah"><section class="pr-blok pr-pomoc" id="pomoc">
<div class="w">
<div class="pr-pomoc__in">
<div class="pr-pomoc__t">
<p class="stitek">Zapojte se</p>
<h2 class="h-sekce">Jak můžete pomoct?</h2>
<p>Nejnáročnější částí celého projektu jsou pro nás finance. Ačkoliv veškerou práci na projektu odvádíme dobrovolně, bez nároku na jakoukoliv odměnu, celé nabytí a rekonstrukci stavby sami nezvládneme. Podpořit nás můžete zasláním finančního daru v jakékoliv výši na náš transparentní účet 1234567890 / 0000 (Ukázková banka) nebo přispět prostřednictvím sbírky na <a href="#" rel="noopener" target="_blank">www.darujme.cz</a></p>
</div>
<ul class="pr-pomoc__cesty">
<li class="pr-cesta">
<p class="pr-cesta__l">Veřejná sbírka</p>
<p class="pr-cesta__h">Darujme.cz</p>
<a class="btn btn--plna" href="#" rel="noopener" target="_blank">Podpořit sbírku</a>
</li>
<li class="pr-cesta">
<p class="pr-cesta__l">Transparentní účet</p>
<p class="pr-cesta__h">1234567890 / 0000</p>
<p class="pr-cesta__p">Ukázková banka</p>
</li>
</ul>
</div>
</div>
</section></main>
Jak projekt funguje
Text vlevo a číslované kroky s ikonou vpravo, pod nimi tlačítko. Třídy: pr-jak, pr-jak__kroky, pr-jak__krok.
HTML kód
<main class="obsah" id="obsah"><section class="pr-blok pr-jak" id="jak">
<div class="w">
<div class="pr-jak__in">
<div>
<p class="stitek">Jak to funguje</p>
<h2 class="h-sekce">Projekt Maminky maminkám spojuje ženy</h2>
</div>
<div>
<p class="pr-text">Projekt Maminky maminkám spojuje ty ženy, které již mají období raného mateřství za sebou, a novopečené maminky, které by si nemohly dovolit potřebné zdravotní pomůcky pro své miminko. Nadace hraje roli prostředníka, který od dárkyň vybírá již nepoužívané pomůcky, připravuje je pro další použití a následně je propůjčuje potřebným. I zdánlivá drobnost jako zapůjčení pomůcky může mít velký dopad na komfort celé rodiny.</p>
<div class="pr-akce">
<a class="btn btn--plna" href="#">Nabízím pomoc maminkám</a>
<a class="odkaz-sipka" href="#"><span>Jsem maminka a hledám pomoc</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>
</div>
<ol class="pr-jak__kroky">
<li class="pr-jak__krok">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><rect height="12" rx="1" width="20" x="15" y="15"></rect><rect height="4" rx="1" width="24" x="13" y="11"></rect><path d="M25 11v16"></path><path d="M25 11c-1.5-3.5-6.5-4.5-6.5-1.5 0 1.8 3.5 1.5 6.5 1.5zM25 11c1.5-3.5 6.5-4.5 6.5-1.5 0 1.8-3.5 1.5-6.5 1.5z"></path><path d="M4.5 32h6.5l7 2.5h8a2.2 2.2 0 0 1 0 4.4h-7"></path><path d="M11 31v12M11 41l8.5 2.2 13.5-5.2 7.5-5a2.2 2.2 0 0 0-2.6-3.5l-7.4 4.5"></path></svg></span>
<h3>Dárkyně předají pomůcky</h3>
<p>Odsávačky mateřského mléka, kojenecké váhy, monitory dechu a další, které už doma nevyužijí.</p>
</li>
<li class="pr-jak__krok">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><path d="M21 10c0-3 1.3-5.5 3-5.5s3 2.5 3 5.5"></path><rect height="4" rx="1.5" width="14" x="17" y="10"></rect><path d="M18.5 14h11l1.5 4v20a5 5 0 0 1-5 5h-4a5 5 0 0 1-5-5V18z"></path><path d="M17 22h4M17 27h4M17 32h4"></path><path d="M38.5 7l1.2 3.3 3.3 1.2-3.3 1.2-1.2 3.3-1.2-3.3-3.3-1.2 3.3-1.2zM9 24l.9 2.4 2.4.9-2.4.9L9 30.6l-.9-2.4-2.4-.9 2.4-.9z"></path></svg></span>
<h3>Připravíme je k dalšímu použití</h3>
<p>Pomůcky od dárkyň převezmeme a připravíme pro další maminky.</p>
</li>
<li class="pr-jak__krok">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><path d="M24 28s-8.5-5.2-8.5-11.2A4.6 4.6 0 0 1 24 14.5a4.6 4.6 0 0 1 8.5 2.3C32.5 22.8 24 28 24 28z"></path><path d="M4 32h5l7.5 6.5c1.1 1 2.6 1.5 4.1 1.5H24M44 32h-5l-7.5 6.5c-1.1 1-2.6 1.5-4.1 1.5H24"></path><path d="M9 32l2.8-4.2c.8-1.2 2.6-1.3 3.5-.2l4.7 6M39 32l-2.8-4.2c-.8-1.2-2.6-1.3-3.5-.2L28 33.6"></path></svg></span>
<h3>Bezplatně je zapůjčíme</h3>
<p>Propůjčíme je rodinám, které je v danou dobu nejvíce potřebují.</p>
</li>
</ol>
</div>
</section></main>
Způsoby pomoci
Karty darů: sbírka s ukazatelem, převod na účet s číslem a QR kódem, dobrovolnictví a další cesty. Třídy: po-cesty, po-karta, po-sbirka, po-ucet, po-qr.
HTML kód
<main class="obsah" id="obsah"><section class="po-cesty">
<div class="w">
<div class="po-cesty__h">
<p class="stitek">Způsoby pomoci</p>
<h2 class="h-sekce">Vyberte si, jak pomůžete</h2>
</div>
<article class="karta po-dar" id="dar">
<div class="po-dar__t">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><path d="M24 21s-6.5-4-6.5-8.6a3.6 3.6 0 0 1 6.5-2 3.6 3.6 0 0 1 6.5 2C30.5 17 24 21 24 21z"></path><path d="M13 29.5c0-1.9 5-3.5 11-3.5s11 1.6 11 3.5-5 3.5-11 3.5-11-1.6-11-3.5z"></path><path d="M13 29.5V35c0 1.9 5 3.5 11 3.5s11-1.6 11-3.5v-5.5M13 35v5.5c0 1.9 5 3.5 11 3.5s11-1.6 11-3.5V35"></path></svg></span>
<h3 class="po-h">Finanční dary</h3>
<div class="tx">
<p>Nejrychlejší a nejjednodušší cesta je finanční podpora. Otevřete v telefonu svou bankovní aplikaci, naskenujte <strong>QR kód a pošlete libovolnou částku</strong> bankovním převodem na transparentní účet Nadace Peony č. <strong>1234567890 / 0000</strong> (Ukázková banka).</p>
</div>
<p class="po-pozn">Pro vystavení potvrzení o poskytnutí daru nás prosím <a href="#">kontaktujte</a>.</p>
</div>
<div class="po-platba">
<figure class="po-qr">
<img alt="QR kód pro platbu na transparentní účet" height="160" src="assets/foto/qr-platba.webp" width="160"/>
<figcaption>QR platba</figcaption>
</figure>
<div class="po-ucet">
<p class="po-ucet__popis">Transparentní účet</p>
<p class="po-ucet__cislo">1234567890 / 0000</p>
<p class="po-ucet__banka">Ukázková banka</p>
<button class="btn btn--plna po-kopie" data-kopirovat="1234567890 / 0000" hidden="" type="button"><svg aria-hidden="true" viewbox="0 0 24 24"><rect height="11" rx="2" width="11" x="8.5" y="8.5"></rect><path d="M15.5 8.5V6.5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2"></path></svg><span aria-live="polite">Zkopírovat číslo účtu</span></button>
</div>
</div>
</article>
<article class="karta po-sbirka" id="sbirka">
<div class="po-sbirka__foto">
<img alt="Kostel v Doubravě zvenku" height="600" sizes="(max-width: 900px) 100vw, 40vw" src="assets/foto/kostel-zvenku-900.webp" srcset="assets/foto/kostel-zvenku-900.webp 900w, assets/foto/kostel-zvenku.webp 1920w" width="900"/>
</div>
<div class="po-sbirka__t">
<div class="po-hlavicka">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><path d="M24 3.5v6M21.5 6h5"></path><path d="M19.5 22v-8l4.5-4.5 4.5 4.5v8"></path><path d="M8 44V28l11.5-6h9L40 28v16"></path><path d="M4.5 44h39"></path><path d="M21 44v-6.5a3 3 0 0 1 6 0V44"></path><circle cx="24" cy="16" r="1.6"></circle><path d="M13.5 32.5v4.5M34.5 32.5v4.5"></path></svg></span>
<span class="po-znacka">Veřejná sbírka</span>
</div>
<h3 class="po-h">Zachraň Kostel!</h3>
<div class="tx">
<p>Nejnáročnější částí celého projektu jsou pro nás finance. Ačkoliv veškerou práci na projektu odvádíme dobrovolně, bez nároku na jakoukoliv odměnu, rekonstrukci kostela bez vaší pomoci nezvládneme. Pro projekt <a href="#">Zachraň Kostel!</a> jsme proto vypsali veřejnou sbírku.</p>
</div>
<div class="postup">
<p class="postup__cisla"><strong>104 500 Kč</strong><span>vybráno z 2 000 000 Kč</span></p>
<div class="postup__pruh"><span style="--p:5.23%"></span></div>
</div>
<div class="po-akce">
<a class="btn btn--plna" href="#" rel="noopener" target="_blank">Podpořit opravu kostela</a>
</div>
<p class="po-pozn">Všechny vybrané finanční prostředky budou použity na rekonstrukci a obnovu kostela.</p>
</div>
</article>
<div class="po-dvojice">
<article class="karta po-karta" id="pomucky">
<img alt="Odsávačky mateřského mléka a lahvičky na stole" class="po-karta__foto" height="506" src="assets/foto/maminky-maminkam-01-900.webp" width="900"/>
<div class="po-karta__t">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><path d="M21 10c0-3 1.3-5.5 3-5.5s3 2.5 3 5.5"></path><rect height="4" rx="1.5" width="14" x="17" y="10"></rect><path d="M18.5 14h11l1.5 4v20a5 5 0 0 1-5 5h-4a5 5 0 0 1-5-5V18z"></path><path d="M17 22h4M17 27h4M17 32h4"></path></svg></span>
<h3 class="po-h">Darování pomůcek pro maminky</h3>
<div class="tx">
<p>Máte doma nepotřebné pomůcky pro péči o miminko? Darujte je v rámci projektu <a href="#">Maminky maminkám</a> rodičům, kteří si jejich pořízení nemohou dovolit.</p>
</div>
<div class="po-akce">
<a class="btn btn--plna" href="#">Nabízím pomoc maminkám</a>
</div>
</div>
</article>
<article class="karta po-karta" id="dobrovolnictvi">
<img alt="Dobrovolníci odklízejí větve na brigádě u kostela v Doubravě" class="po-karta__foto" height="675" src="assets/foto/brigada25-strom-900.webp" width="900"/>
<div class="po-karta__t">
<span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><circle cx="17" cy="15" r="5.5"></circle><path d="M6.5 39c0-6.4 4.7-11.5 10.5-11.5S27.5 32.6 27.5 39"></path><circle cx="33" cy="18" r="4.5"></circle><path d="M28.5 29.3a9 9 0 0 1 4.5-1.3c5.2 0 9 4.4 9 10"></path><path d="M4.5 39h39"></path></svg></span>
<h3 class="po-h">Dobrovolnictví</h3>
<div class="tx">
<p>Rádi byste se zapojili i jinak než finančně? Staňte se dobrovolníkem a pomáhejte při různých nadačních akcích. <a href="#">Kontaktujte nás</a>, rádi s vámi probereme možnosti spolupráce.</p>
</div>
<div class="po-akce">
<a class="btn btn--plna" href="#">Chci se stát dobrovolníkem</a>
</div>
</div>
</article>
</div>
</div>
</section></main>
Citát důvěry
Vystředěný citát s ikonou o tom, jak nadace s dary zachází. Třídy: po-duvera, po-duvera__citat.
HTML kód
<main class="obsah" id="obsah"><section class="po-duvera">
<div class="w po-duvera__in">
<span aria-hidden="true" class="po-duvera__ikona"><svg viewbox="0 0 24 24"><path d="M12 3l7.5 3v5.5c0 4.6-3.2 8.3-7.5 9.5-4.3-1.2-7.5-4.9-7.5-9.5V6z"></path><path d="M8.8 12.2l2.3 2.3 4.3-4.6"></path></svg></span>
<blockquote class="po-duvera__citat">
<p><strong>Staráme se o to, aby vaše dary podpořily prověřené projekty a pomohly tak dobré věci.</strong> Naším cílem je <strong>poskytovat příspěvky na společensky užitečné projekty</strong>.</p>
</blockquote>
</div>
</section></main>
Poděkování
Poděkování partnerům v kruzích s logy a zeď jmen dárců a dobrovolníků. Třídy: po-dik, po-loga, po-zed, po-darci.
HTML kód
<main class="obsah" id="obsah"><section class="w po-dik">
<div class="po-dik__h">
<p class="stitek">Poděkování</p>
<h2 class="h-sekce">Děkujeme sponzorům, dárcům a dobrovolníkům</h2>
</div>
<h3 class="po-dik__nadpis">Firmy a organizace</h3>
<ul class="po-loga">
<li><a class="karta" href="#" rel="noopener" target="_blank"><img alt="Lípa" height="80" src="assets/grafika/logo-partner-lipa.svg" width="68"/></a></li>
<li><a class="karta" href="#" rel="noopener" target="_blank"><img alt="Spolek Most" height="80" src="assets/grafika/logo-partner-most.svg" width="196"/></a></li>
<li><a class="karta" href="#" rel="noopener" target="_blank"><img alt="Krajina" height="80" src="assets/grafika/logo-partner-krajina.svg" width="112"/></a></li>
<li><a class="karta" href="#" rel="noopener" target="_blank"><img alt="Dílna" height="80" src="assets/grafika/logo-partner-dilna.svg" width="83"/></a></li>
<li><a class="karta" href="#" rel="noopener" target="_blank"><img alt="Sousedé" height="80" src="assets/grafika/logo-partner-sousede.svg" width="137"/></a></li>
</ul>
<div class="po-lide">
<div class="po-lide__blok po-lide__blok--darci">
<h3 class="po-dik__nadpis">Dárci</h3>
<ul class="po-darci">
<li>Jaroslav a Jana Kratochvílovi<span>, Doubrava</span></li>
<li>Lenka Svobodová<span>, Lesná</span></li>
<li>Michal a Kateřina Benešovi<span>, Horní Ves</span></li>
<li>Tereza Kolářová<span>, Dolní Lhota</span></li>
<li>Tomáš Veselý</li>
<li>Aleš Pokorný<span>, Nová Ves</span></li>
<li>Bára Marková<span>, Praha</span></li>
<li>David Krejčí<span>, Praha</span></li>
</ul>
</div>
<div class="po-lide__blok">
<h3 class="po-dik__nadpis">Dobrovolníci</h3>
<ul class="po-zed">
<li>Tereza Kolářová</li>
<li>Zdeněk Fiala</li>
<li>Kristýna Urbanová</li>
<li>Radek Kučera</li>
<li>Jiří Sedláček</li>
<li>Miroslav Hájek</li>
<li>Petr a Matěj Šimkovi</li>
<li>manželé Michal a Kateřina Benešovi</li>
<li>Aleš Doležal</li>
<li>Bohumil Zeman</li>
<li>Jiří Kopecký</li>
<li>Jan Holub</li>
<li>David Vávra</li>
<li>Daniel Říha</li>
<li>Kateřina Moravcová</li>
</ul>
</div>
</div>
<p class="po-dekujeme"><strong>Děkujeme!</strong> Bez vás by nebylo možné dokázat nic z toho, co děláme.</p>
</section></main>
O nás
Hodnoty
Štítek, nadpis, tři hodnoty velkým písmem a věta o společenství. Třídy: ab-hodnoty, ab-hodnoty__seznam.
Členové týmu s kulatou fotkou, jménem, rolí a citací. Třídy: ab-tym, ab-clen.
HTML kód
<main class="obsah" id="obsah"><section class="w ab-tym" id="lide">
<p class="stitek">Tým</p>
<h2 class="h-sekce">Lidé z Nadace Peony</h2>
<article class="ab-clen">
<a class="lb lb-lupa ab-clen__foto" data-galerie="tym" href="#"><img alt="Pavel Horák" height="1000" src="assets/foto/pavel-horak.webp" width="800"/><span aria-hidden="true" class="lupa"><svg viewbox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m15.5 15.5 5 5"></path></svg></span></a>
<div class="ab-clen__t">
<h3 class="ab-clen__jmeno">Pavel Horák</h3>
<p class="ab-clen__role">Řízení organizace, komunikace s partnery a fundraising</p>
<div class="tx">
<p><strong>Nadšenec do historie, vášnivý zahrádkář, zvídavý technik a v neposlední řadě také spoluzakladatel nadace.</strong> Na starosti má řízení celé organizace, komunikaci s partnery a fundraising. V rámci projektů se nejvíce angažuje v projektu <a href="#">Záchrany kostela v Doubravě</a>.</p>
<p class="ab-clen__citat">Když jsme přišli s nápadem založit nadaci, byl jsem nadšený. Nadace s sebou přináší velkou zodpovědnost, tu ale vítám stejně jako nové možnosti, protože jedno bez druhého zkrátka nefunguje.</p>
</div>
</div>
</article>
<article class="ab-clen">
<a class="lb lb-lupa ab-clen__foto" data-galerie="tym" href="#"><img alt="Lucie Horáková" height="1000" src="assets/foto/lucie-horakova.webp" width="800"/><span aria-hidden="true" class="lupa"><svg viewbox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m15.5 15.5 5 5"></path></svg></span></a>
<div class="ab-clen__t">
<h3 class="ab-clen__jmeno">Lucie Horáková</h3>
<p class="ab-clen__role">Finance, legislativa a chod nadace</p>
<div class="tx">
<p>Energická maminka a manželka s velkým srdcem. <strong>Záleží jí na lokální kultuře a tradicích.</strong> Ráda organizuje setkání a sportovní akce. Jako spoluzakladatelka nadace se stará o finance, legislativu a interní chod nadace. S manželem dlouhodobě podporuje dobročinné projekty se širokým záběrem - od kultury po podporu rodin v nouzi. <strong>Je pro ni důležitá nejen samotná pomoc, ale také inspirace a motivace ostatních</strong>.</p>
</div>
</div>
</article>
<article class="ab-clen">
<a class="lb lb-lupa ab-clen__foto" data-galerie="tym" href="#"><img alt="Eva Malá" height="1000" src="assets/foto/eva-mala.webp" width="800"/><span aria-hidden="true" class="lupa"><svg viewbox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"></circle><path d="m15.5 15.5 5 5"></path></svg></span></a>
<div class="ab-clen__t">
<h3 class="ab-clen__jmeno">Eva Malá</h3>
<p class="ab-clen__role">Komunikace a budování vztahů s dárci</p>
<div class="tx">
<p>Aktivní sportovkyně se zálibou ve filozofii, která <strong>celou svou kariéru zasvětila pomoci druhým</strong>. Jako zdravotní sestra a laktační poradkyně denně pomáhá novorozencům, předčasně narozeným dětem a jejich rodičům. V rámci nadace má na starosti komunikaci, budování vztahů s dárci a hlavně projekt <a href="#">Maminky maminkám</a>.</p>
<p class="ab-clen__citat">Vždy pro mě bylo důležité, aby se lidé zajímali jeden o druhého. Dle toho také žiju - pomoci druhým se věnuji v pracovním i osobním životě.</p>
</div>
</div>
</article>
</section></main>
Příběh
Tmavě modrá sekce s historií nadace v krocích a bílými tlačítky. Štítek je světle zelený. Třídy: ab-pribeh, ab-kroky.
HTML kód
<main class="obsah" id="obsah"><section class="ab-pribeh" id="zacatky">
<div class="w">
<p class="stitek">Náš příběh</p>
<h2 class="h-sekce">Od dobrovolnictví k nadaci</h2>
<ol class="ab-kroky">
<li>
<span aria-hidden="true" class="ab-kroky__c">1</span>
<h3>Pomáhali jsme každý zvlášť</h3>
<p>Pavel podporoval neziskové organizace, Lucie kulturu a sport ve svém okolí a Eva děti a jejich rodiny.</p>
</li>
<li>
<span aria-hidden="true" class="ab-kroky__c">2</span>
<h3>Pak přišel kostel v Doubravě</h3>
<p>Na jeho záchranu jsme sami nestačili a žádná organizace ji nechtěla vzít pod svá křídla.</p>
</li>
<li>
<span aria-hidden="true" class="ab-kroky__c">3</span>
<h3>Založili jsme nadaci</h3>
<p>Propojujeme lidi a podporujeme projekty, na které by jednotlivec nestačil. Protože společně dokážeme víc.</p>
</li>
</ol>
<div class="ab-akce">
<a class="btn btn--bila-plna" href="#">Kde právě pomáháme</a>
<a class="btn btn--bila" href="#">Jak můžete pomoci</a>
</div>
</div>
</section></main>
Časté dotazy
Rozbalovací otázky s linkami, ikona plus a mínus, odpověď se plynule rozbalí. Třídy: faq, faq__i, faq__a.
HTML kód
<main class="obsah" id="obsah"><section class="w ab-faq" id="dotazy">
<div class="ab-faq__h">
<p class="stitek">Máte otázky?</p>
<h2 class="h-sekce">Časté dotazy</h2>
<p class="tx">Nenašli jste odpověď? <a href="#">Napište nám</a>, rádi poradíme.</p>
</div>
<div class="faq">
<details class="faq__i">
<summary>Jak fungujete a jaké projekty podporujete?</summary>
<div class="faq__a"><p>Nadace Peony se zaměřuje na podporu charitativních projektů v oblastech rozvoje kulturního dědictví, přírody a společenství a vytváření lepšího prostoru pro život. Spolupracujeme s dalšími organizacemi a podporujeme různé dobročinné aktivity. Naše hlavní projekty jsou <a href="#">záchrana kostela v Doubravě</a> a projekt <a href="#">Maminky maminkám</a>.</p></div>
</details>
<details class="faq__i">
<summary>Jak mohu pomoci?</summary>
<div class="faq__a"><p>Existuje mnoho způsobů, jak můžete pomoci. Můžete se stát dobrovolníkem, <a href="#">přispět finančním darem</a> nebo se zapojit do našich charitativních akcí. Vaše podpora je pro nás velmi důležitá a vážíme si každého drobného příspěvku, hmotné či fyzické pomoci.</p></div>
</details>
<details class="faq__i">
<summary>Kde se nacházíte?</summary>
<div class="faq__a"><p>Sídlo Nadace Peony je v Praze, ale podporujeme projekty po celé České republice. Jsme otevřeni spolupráci a rádi podpoříme i vaše charitativní aktivity.</p></div>
</details>
<details class="faq__i">
<summary>Jaké jsou vaše hodnoty?</summary>
<div class="faq__a"><p>Naše hodnoty jsou respekt, pokora a odhodlání. Věříme v sílu společenství a vědomě se snažíme tvořit lepší svět pro všechny. Budujeme komunitu lidí, kteří sdílí naše hodnoty. Pokud chcete, můžete se přidat mezi nás. <a href="#">Napište nám</a>!</p></div>
</details>
<details class="faq__i">
<summary>Máte další otázky?</summary>
<div class="faq__a"><p>Pokud máte jakékoli další otázky, <a href="#">neváhejte nás kontaktovat</a>. Rádi vám odpovíme a poskytneme veškeré potřebné informace.</p></div>
</details>
</div>
</section></main>
Články
Z našeho dění
Tři nejnovější články v kartách s fotkou, datem a nadpisem, odkaz na všechny. Třídy: uv-aktuality, uv-clanky, uv-clanek.
HTML kód
<main class="obsah" id="obsah"><section class="uv-aktuality">
<div class="w">
<div class="uv-hlava">
<div>
<p class="stitek">Aktuálně</p>
<h2 class="h-sekce">Z našeho dění</h2>
</div>
<a class="odkaz-sipka" href="#"><span>Všechny aktuality</span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</div>
<ul class="uv-clanky">
<li>
<a class="karta uv-clanek" href="#">
<img alt="Účastníci cyklovýletu Okolo Doubravy s koly na společné fotce" class="uv-clanek__foto" height="675" src="assets/foto/okolo-doubravy-2026-01-900.webp" width="900"/>
<div class="uv-clanek__t">
<p class="uv-clanek__d"><time datetime="2026-10-15">15. října 2026</time></p>
<h3 class="uv-clanek__n">Třetí ročník cyklovýletu Okolo Doubravy</h3>
</div>
</a>
</li>
<li>
<a class="karta uv-clanek" href="#">
<img alt="Bývalý kostel v Doubravě a nákladní auto s lešením" class="uv-clanek__foto" height="675" src="assets/foto/strecha-leseni-2026-01-900.webp" width="900"/>
<div class="uv-clanek__t">
<p class="uv-clanek__d"><time datetime="2026-08-15">15. srpna 2026</time></p>
<h3 class="uv-clanek__n">Lešení a provizorní zakrytí střechy kostela</h3>
</div>
</a>
</li>
<li>
<a class="karta uv-clanek" href="#">
<img alt="Bývalý kostel zvenku v Doubravě" class="uv-clanek__foto" height="601" src="assets/foto/projekt-zachran-kostel-05-900.webp" width="900"/>
<div class="uv-clanek__t">
<p class="uv-clanek__d"><time datetime="2026-08-07">7. srpna 2026</time></p>
<h3 class="uv-clanek__n">Místo letního kina zachraňujeme střechu: První krok k záchraně kostela</h3>
</div>
</a>
</li>
</ul>
</div>
</section></main>
Výpis článků
Štítek, H1 a články pod sebou s fotkou vlevo, datem, nadpisem a perexem. Třídy: ak-uvod, ak-pol.
HTML kód
<main class="obsah" id="obsah"><section class="ak-uvod">
<div class="w">
<p class="stitek">Aktuálně</p>
<h1>Pomáháme, setkáváme se a inspirujeme k nezištné pomoci a podpoře rozvoje kulturního dědictví, přírody a společenství.</h1>
<div class="ak-obal">
<ul class="ak-sez">
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Účastníci cyklovýletu Okolo Doubravy s koly na společné fotce" height="675" src="assets/foto/okolo-doubravy-2026-01-900.webp" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Třetí ročník cyklovýletu Okolo Doubravy</a></h2>
<p class="ak-pol__p">V sobotu 5. září se konal třetí ročník cyklovýletu Okolo Doubravy. Děkujeme cyklistům za fajn atmosféru na cestě, počasí nám přálo a my se těšíme na další ročníky.</p>
<p class="ak-pol__d"><time datetime="2026-10-15">15. října 2026</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Bývalý kostel v Doubravě a nákladní auto s lešením" height="675" src="assets/foto/strecha-leseni-2026-01-900.webp" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Lešení a provizorní zakrytí střechy kostela</a></h2>
<p class="ak-pol__p">Konečně jsme postavili lešení, abychom mohli připravit rozpadající se část střechy na demontáž nevhodně instalovaných skleněných panelů. Minulý týden se podařilo sundat skla a střechu provizorně zakrýt plachtou.</p>
<p class="ak-pol__d"><time datetime="2026-08-15">15. srpna 2026</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Bývalý kostel zvenku v Doubravě" height="601" src="assets/foto/projekt-zachran-kostel-05-900.webp" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Místo letního kina zachraňujeme střechu: První krok k záchraně kostela</a></h2>
<p class="ak-pol__p">Jak jsme psali v březnovém článku, celou zimu a jaro jsme se připravovali na sezónu a domlouvali s firmami možnosti provizorního zajištění střechy kostela. Bohužel jsme museli plány přehodnotit.</p>
<p class="ak-pol__d"><time datetime="2026-08-07">7. srpna 2026</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Interiér bývalého kostela v Doubravě s oltářem a poškozenými zdmi" height="601" src="assets/foto/projekt-zachran-kostel-04-900.webp" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Březen v kostele: Přípravy na sezónu a první kroky k záchraně střechy</a></h2>
<p class="ak-pol__p">Zima v bývalém kostele v Doubravě nebyla letos jednoduchá. Každý větší déšť a tání sněhu nám připomínaly, že stav střechy se nezlepšuje - a my jsme dělali, co bylo v našich silách, abychom vodu…</p>
<p class="ak-pol__d"><time datetime="2026-03-15">15. března 2026</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Cyklisté na odpočinku během cyklovýletu OKOLO Doubravy" height="523" src="assets/foto/kola-900.webp" style="object-position:50% 50%" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Pozvánka na akci: OKOLO Doubravy II</a></h2>
<p class="ak-pol__p">Zveme vás na druhý ročník odpočinkového cyklovýletu OKOLO Doubravy. Letošní trasu jsme naplánovali dlouhou 26 km a vybírali jsme ji tak, aby ji zvládli i méně zkušení cyklisté, ale líbila se i zkušenějším.</p>
<p class="ak-pol__d"><time datetime="2025-08-21">21. srpna 2025</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Návštěvníci pod klenbou bývalého kostela v Doubravě" height="675" src="assets/foto/navstevnici-pod-klenbou-900.webp" style="object-position:50% 40%" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Pozvánka na akci: Slavnosti Peony 2025</a></h2>
<p class="ak-pol__p">Zveme vás na druhý ročník Slavností Peony - benefičního odpoledne s Nadací Peony! Přidejte se k nám na nezapomenutelné odpoledne plné umění a zábavy ve prospěch našich projektů, a to zejména…</p>
<p class="ak-pol__d"><time datetime="2025-06-01">1. června 2025</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Dobrovolníci kácejí suchý strom na zahradě bývalého kostela v Doubravě" height="675" src="assets/foto/brigada25-strom-900.webp" style="object-position:50% 90%" width="900"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Zahájení sezóny 2025 - brigáda</a></h2>
<p class="ak-pol__p">Jaro 2025 - práce na zahradě a brigáda. Na sobotu 5. 4. připravujeme další pracovní brigádu v prostorách bývalého kostela.</p>
<p class="ak-pol__d"><time datetime="2025-03-20">20. března 2025</time></p>
</div>
</li>
<li class="ak-pol">
<a aria-hidden="true" class="ak-pol__obr" href="#" tabindex="-1"><img alt="Svatomartinský průvod s jezdcem na koni a pochodněmi v Doubravě" height="598" src="assets/foto/svaty-martin-pochod.webp" style="object-position:50% 5%" width="905"/></a>
<div class="ak-pol__t">
<h2 class="ak-pol__n"><a href="#">Závěr roku 2024: Koncerty, sbírka pro povodně i svatomartinské setkání</a></h2>
<p class="ak-pol__p">Milí přátelé, od poslední pozvánky na procházku přírodou se u nás v Nadaci Peony udála spousta krásných…</p>
<p class="ak-pol__d"><time datetime="2025-01-01">1. ledna 2025</time></p>
</div>
</li>
</ul>
</div>
</div>
</section></main>
Článek
Štítek, H1 a datum, hlavní fotka, text s oddíly H2 oddělenými linkou, fotky v textu a karta dalšího článku. Třídy: ak-cl, ak-tx, ak-foto, ak-dal.
HTML kód
<main class="obsah" id="obsah"><div class="ak-cl">
<div class="w">
<article class="ak-cl__in">
<header class="ak-cl__hlava">
<p class="stitek">Aktuálně</p>
<h1>Místo letního kina zachraňujeme střechu: První krok k záchraně kostela</h1>
<p class="ak-cl__datum"><svg aria-hidden="true" viewbox="0 0 24 24"><rect height="15.5" rx="2.5" width="17" x="3.5" y="5"></rect><path d="M3.5 10h17M8 3v4M16 3v4"></path></svg><time datetime="2026-08-07">7. srpna 2026</time></p>
</header>
<figure class="ak-foto ak-foto--hlavni"><img alt="Bývalý kostel zvenku v Doubravě" fetchpriority="high" height="1001" src="assets/foto/projekt-zachran-kostel-05.webp" width="1500"/></figure>
<div class="tx ak-tx">
<p>Jak jsme psali v březnovém článku, celou zimu a jaro jsme se připravovali na sezónu a domlouvali s firmami možnosti provizorního zajištění střechy kostela. Bohužel jsme museli plány přehodnotit.</p>
<h2>Letní promítání musíme zrušit</h2>
<p>Původně jsme na léto plánovali večery s promítáním filmů v prostorách kostela. Těšili jsme se na ně a věřili, že by se mohly stát novou tradicí. Bohužel jsme je nuceni zrušit.</p>
<p>Důvod? Stav střechy se během jara výrazně zhoršil.</p>
<figure class="ak-foto ak-foto--vyrez ak-foto--c" style="--w:360px"><img alt="Dřevěné trámy a skleněné panely na střeše kostela, kterými prosvítá obloha" height="1200" src="assets/foto/img-0276-900.webp" width="900"/></figure>
<h2>Co se stalo se střechou</h2>
<p>Část střechy kostela je pokrytá skleněnými panely - jistě zajímavý architektonický prvek, který však na konstrukci krovu nepatří. Bohužel dřevěné latě, které tyto těžké panely na střeše jistí, jsou v důsledku téměř dvou desítek let zatékání a střídání teplot shnilé a přestaly plnit svou funkci.</p>
<p>Panely začaly sjíždět. Nejenže s každým centimetrem jejich sesuvu do kostela prší mnohem víc, ale takový stav ohrožuje i okolí.</p>
<h2>Co děláme teď - provizorní zásah</h2>
<p>I když stále nemáme dostatek prostředků na úplnou opravu střechy a výměnu poškozené třetiny krovu, rozhodli jsme se nečekat. Letní měsíce věnujeme provizornímu zásahu, který má jediný cíl: zabránit dalšímu poškozování konstrukce a alespoň provizorně zastavit zatékání.</p>
<p>Konkrétně to znamená:</p>
<ol><li>demontáž skleněných panelů</li><li>výměna zlomené krokve</li><li>zakrytí střešní fólií</li></ol>
<p>Věříme, že do konce srpna bychom měli mít střechu alespoň provizorně zajištěnou a do kostela přestane zatékat.</p>
<figure class="ak-foto ak-foto--c" style="--w:600px"><img alt="Pohled zevnitř na střešní panely kostela v Doubravě zajištěné zelenými popruhy" height="675" src="assets/foto/img-0448-900.webp" width="900"/></figure>
<h2>A co Dny hudby?</h2>
<p>Na přelom září a října připravujeme další ročník Dnů hudby Peony. Věříme, že budou moci proběhnout - uděláme všechno pro to, aby unikátní atmosféra pod klenbou kostela zůstala zachována i pro letošní ročník. O programu vás budeme včas informovat.</p>
<h2>Poděkování</h2>
<p>Děkujeme všem, kdo nás v této nelehké situaci podporujete - slovem, pomocí i darem. Každý příspěvek jde právě na tyhle kroky. Díky vám můžeme jednat, místo abychom jen přihlíželi.</p>
<p>Děkujeme, že nám fandíte. Každá pomocná ruka se počítá.</p>
</div>
<a class="ak-dal" href="#"><img alt="" class="ak-dal__foto" height="601" src="assets/foto/projekt-zachran-kostel-04-900.webp" width="900"/><span class="ak-dal__t"><span class="ak-dal__l">Pokračovat</span><span class="ak-dal__n">Březen v kostele: Přípravy na sezónu a první kroky k záchraně střechy</span></span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a>
</article>
</div>
</div></main>
Partneři
Štítek Podporují nás, text s odkazem a řada log partnerů. Třídy: uv-partneri, uv-loga.
Šedozelená sekce: nadpis, karty kontaktů s ikonou a šipkou, tým s portréty a formulář s volbou tématu. Třídy: ko-hlavni, ko-kanal, ko-formular, form, form__volba.
HTML kód
<main class="obsah" id="obsah"><section class="ko-hlavni">
<div class="w">
<div class="ko-uvod">
<p class="stitek">Kontakt</p>
<h1 class="ko-uvod__h">Ozvěte se, ať už s námi chcete spolupracovat, nebo se jen něco zeptat</h1>
</div>
<div class="ko-sloupce">
<div class="ko-spojeni">
<ul class="ko-kanaly">
<li><a class="karta ko-kanal" href="#"><span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><path d="M11 7h7.5l4 10-5 3.2a22 22 0 0 0 10.3 10.3L31 25.5l10 4V37a4 4 0 0 1-4 4A31 31 0 0 1 7 11a4 4 0 0 1 4-4z"></path><path d="M29 7.5a12 12 0 0 1 11.5 11.5M29 13.5a6 6 0 0 1 5.5 5.5"></path></svg></span><span class="ko-kanal__t"><strong>+420 600 123 456</strong></span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
<li><a class="karta ko-kanal" href="#"><span class="ikona"><svg aria-hidden="true" viewbox="0 0 48 48"><rect height="28" rx="4" width="37" x="5.5" y="10"></rect><path d="M7 13.5l17 12.5 17-12.5"></path><path d="M7 35.5l12.5-11M41 35.5l-12.5-11"></path></svg></span><span class="ko-kanal__t"><strong>info@example.com</strong><span>Odpovíme obvykle do 24 hodin</span></span><svg aria-hidden="true" class="sipka" viewbox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"></path></svg></a></li>
</ul>
<p class="ko-mezititulek">Kdo se vám ozve</p>
<div class="ko-tym">
<span class="ko-tym__fota">
<img alt="Pavel Horák" height="120" src="assets/foto/pavel-horak-01.webp" width="120"/>
<img alt="Lucie Horáková" height="120" src="assets/foto/lucie-horakova-01.webp" width="120"/>
<img alt="Eva Malá" height="120" src="assets/foto/eva-mala-01.webp" width="120"/>
</span>
<p><strong>Pavel Horák, Lucie Horáková a Eva Malá</strong><br/>Tým Nadace Peony</p>
</div>
</div>
<div class="karta ko-formular">
<h2 class="ko-formular__h">Napište nám</h2>
<div class="form__dik" id="odeslano-kontakt" tabindex="-1">
<h3>Děkujeme, že jste nás kontaktovali!</h3>
<p>Brzy se s vámi spojíme. Když spěcháte, zavolejte nám na <a href="#">+420 600 123 456</a>.</p>
</div>
<form class="form" data-typ="kontakt" id="kontakt-form">
<input name="typ" type="hidden" value="kontakt"/>
<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__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 class="form__f">
<label for="f-zprava">Zpráva</label>
<textarea aria-describedby="f-zprava-err" data-msg="Napište nám zprávu." 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, že berete na vědomí zpracování osobních údajů." id="f-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="f-souhlas">Beru na vědomí zpracování <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 600 123 456</a>.</p>
<button class="btn btn--plna form__odeslat" type="submit">Odeslat zprávu</button>
</form>
</div>
</div>
</div>
</section></main>
Obchodní údaje
Údaje nadace ve sloupcích oddělených linkou. Třídy: ko-udaje.
HTML kód
<main class="obsah" id="obsah"><section aria-labelledby="ko-udaje-h" class="w ko-udaje">
<h2 class="ko-udaje__h" id="ko-udaje-h">Obchodní údaje</h2>
<dl class="ko-udaje__in">
<div><dt>Název a sídlo</dt><dd><strong>Nadace Peony</strong><br/>Lipová 128/4<br/>110 00 Praha 1</dd></div>
<div><dt>IČO</dt><dd>12345678</dd></div>
<div><dt>Zápis</dt><dd>N 1234 vedená u Městského soudu v Praze</dd></div>
<div><dt>Číslo účtu</dt><dd>1234567890 / 0000</dd></div>
<div><dt>Datová schránka</dt><dd>abc1234</dd></div>
</dl>
</section></main>
Nabízím a hledám
Dvě karty volby přepínají mezi formuláři Nabízím a Hledám, každý s vlastním poděkováním. Třídy: pr-formy, pr-volba, pr-panel, form.
HTML kód
<main class="obsah" id="obsah"><section class="pr-blok pr-formy" data-prepinac="" id="pomoc">
<div class="w pr-formy__in">
<div class="pr-formy__h">
<p class="stitek">Zapojte se</p>
<h2 class="h-sekce">Nabízíte, nebo hledáte pomůcky?</h2>
</div>
<div class="pr-formy__t">
<p class="pr-krok-l" data-krok="" hidden=""><span>1</span>Vyberte, co potřebujete</p>
<div aria-label="Vyberte, co potřebujete" class="pr-volba" hidden="" role="tablist">
<button aria-controls="nabizim" aria-selected="true" class="pr-volba__b" id="zalozka-nabizim" role="tab" type="button">
<span class="pr-volba__t"><span class="pr-volba__nazev">Chci darovat pomůcky</span><span class="pr-volba__popis">Máte doma pomůcky pro miminko, které už nepotřebujete</span></span>
</button>
<button aria-controls="hledam" aria-selected="false" class="pr-volba__b" id="zalozka-hledam" role="tab" tabindex="-1" type="button">
<span class="pr-volba__t"><span class="pr-volba__nazev">Hledám pomůcky</span><span class="pr-volba__popis">Potřebujete pomůcku pro miminko bezplatně zapůjčit</span></span>
</button>
</div>
<div class="pr-panel" id="nabizim">
<h3 class="pr-panel__n">Jak můžete pomoct?</h3>
<p class="pr-text">Máte doma nepotřebné pomůcky pro péči o miminko? Darujte je Nadaci Peony a podpořte tak rodiče, kteří si je nemohou dovolit. Pomůcky budeme propůjčovat těm, kteří je budou v danou dobu nejvíce potřebovat. Vyplňte kontaktní formulář a my se vám brzy ozveme zpět.</p>
<p class="pr-krok-l" data-krok="" hidden=""><span>2</span>Vyplňte formulář</p>
<div class="form__dik" id="odeslano-nabizim" tabindex="-1">
<h3>Děkujeme, že jste nás kontaktovali!</h3>
<p>Velmi si vážíme vašeho odhodlání pomoci maminkám, pro které není snadné si pomůcky pořídit. Brzy se s vámi spojíme a dohodneme detaily.</p>
<p>Tým Nadace Peony</p>
</div>
<form class="form" data-typ="nabizim" id="nabizim-form">
<input name="typ" type="hidden" value="nabizim"/>
<div class="form__f">
<label for="n-jmeno">Jméno a příjmení</label>
<input aria-describedby="n-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="n-jmeno" maxlength="200" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="n-jmeno-err"></p>
</div>
<div class="form__f">
<label for="n-email">E-mail</label>
<input aria-describedby="n-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="n-email" maxlength="200" name="email" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="n-email-err"></p>
</div>
<div class="form__f">
<label for="n-telefon">Telefon</label>
<input aria-describedby="n-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 777 123 456 nebo +420 777 123 456." id="n-telefon" maxlength="40" name="telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="n-telefon-err"></p>
</div>
<div class="form__f">
<label for="n-zprava">Informace o pomůckách</label>
<textarea aria-describedby="n-zprava-err" data-msg="Popište nám stručně, jaké pomůcky nabízíte." id="n-zprava" maxlength="5000" name="zprava" placeholder="Popište nám prosím stručně, jaké pomůcky můžete nabídnout." required="" rows="5"></textarea>
<p class="field__err" hidden="" id="n-zprava-err"></p>
</div>
<div class="form__f form__volba">
<input aria-describedby="n-souhlas-err" data-msg="Potvrďte, že berete na vědomí zpracování osobních údajů." id="n-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="n-souhlas">Beru na vědomí zpracování <a href="#" target="_blank">osobních údajů</a> za účelem odpovědi na mou zprávu.</label>
<p class="field__err" hidden="" id="n-souhlas-err"></p>
</div>
<div aria-hidden="true" class="form__hp"><label for="n-web">Web</label><input autocomplete="off" id="n-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 600 123 456</a>.</p>
<button class="btn btn--plna form__odeslat" type="submit">Odeslat</button>
</form>
</div>
<div class="pr-panel" id="hledam">
<h3 class="pr-panel__n">Potřebujete naši podporu?</h3>
<p class="pr-text">Nejste v tom sami! Pokud si nemůžete dovolit zakoupit praktické pomůcky pro péči o miminko, Nadace Peony vám nabízí bezplatnou možnost jejich zapůjčení. Pomůcky pro vás poskytly rodiny, které je již nevyužijí. Vyplňte kontaktní formulář a my se vám brzy ozveme zpět.</p>
<p class="pr-krok-l" data-krok="" hidden=""><span>2</span>Vyplňte formulář</p>
<div class="form__dik" id="odeslano-hledam" tabindex="-1">
<h3>Děkujeme, že jste nás kontaktovali!</h3>
<p>Brzy se s vámi spojíme. Když spěcháte, zavolejte nám na <a href="#">+420 600 123 456</a>.</p>
</div>
<form class="form" data-typ="hledam" id="hledam-form">
<input name="typ" type="hidden" value="hledam"/>
<div class="form__f">
<label for="h-jmeno">Jméno a příjmení</label>
<input aria-describedby="h-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="h-jmeno" maxlength="200" name="jmeno" required="" type="text"/>
<p class="field__err" hidden="" id="h-jmeno-err"></p>
</div>
<div class="form__f">
<label for="h-email">E-mail</label>
<input aria-describedby="h-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="h-email" maxlength="200" name="email" required="" spellcheck="false" type="email"/>
<p class="field__err" hidden="" id="h-email-err"></p>
</div>
<div class="form__f">
<label for="h-telefon">Telefon</label>
<input aria-describedby="h-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 777 123 456 nebo +420 777 123 456." id="h-telefon" maxlength="40" name="telefon" required="" type="tel"/>
<p class="field__err" hidden="" id="h-telefon-err"></p>
</div>
<div class="form__f">
<label for="h-zprava">Popište nám prosím stručně, jakou pomůcku potřebujete</label>
<textarea aria-describedby="h-zprava-err" data-msg="Popište nám stručně, jakou pomůcku potřebujete." id="h-zprava" maxlength="5000" name="zprava" required="" rows="5"></textarea>
<p class="field__err" hidden="" id="h-zprava-err"></p>
</div>
<div class="form__f form__volba">
<input aria-describedby="h-souhlas-err" data-msg="Potvrďte, že berete na vědomí zpracování osobních údajů." id="h-souhlas" name="souhlas" required="" type="checkbox" value="1"/>
<label for="h-souhlas">Beru na vědomí zpracování <a href="#" target="_blank">osobních údajů</a> za účelem odpovědi na mou zprávu.</label>
<p class="field__err" hidden="" id="h-souhlas-err"></p>
</div>
<div aria-hidden="true" class="form__hp"><label for="h-web">Web</label><input autocomplete="off" id="h-web" name="web" tabindex="-1" type="text"/></div>
<input name="kontrola" type="hidden" value=""/>
<p class="form__chyba" hidden="" role="alert">Žádost se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 600 123 456</a>.</p>
<button class="btn btn--plna form__odeslat" type="submit">Odeslat</button>
</form>
</div>
</div>
</div>
</section></main>
Právní text
Úzký sloupec s H1, úvodem a oddíly jako rozbalovací otázky. Třídy: tx-strana, tx-uvod, faq.
HTML kód
<main class="obsah" id="obsah"><section class="tx-strana">
<div class="w w--uzka">
<h1>Osobní údaje</h1>
<div class="tx tx-uvod">
<p>Tady vysvětlujeme, jak zacházíme s osobními údaji lidí, kteří nás kontaktují, darují nám peníze nebo pomůcky, požádají o pomoc nebo navštíví náš web: co zpracováváme, proč, jak dlouho a jaká máte práva.</p>
<p>Když budete mít k osobním údajům dotaz, napište nám na <a href="#">info@example.com</a> nebo zavolejte na <a class="tx-nb" href="#">+420 600 123 456</a>.</p>
</div>
<div class="faq">
<details class="faq__i"><summary>Kdo vaše údaje zpracovává?</summary><div class="faq__a">
<p>Správcem vašich osobních údajů je Nadace Peony, Lipová 128/4, 110 00 Praha 1, IČO 12345678, zapsaný v nadačním rejstříku vedeném Městským soudem v Praze, oddíl N, vložka 1234.</p>
<p>Tyto zásady platí pro každého, kdo navštíví tento web, i pro ty, kdo nás kontaktují e-mailem na info@example.com nebo telefonicky na +420 600 123 456 a dobrovolně nám své údaje poskytnou, například když nám pošlou dar, nabídnou pomoc nebo o ni požádají.</p>
</div></details>
<details class="faq__i"><summary>Jaké údaje o vás zpracováváme?</summary><div class="faq__a">
<p class="tx-pod">Identifikační údaje</p>
<p>Jméno, příjmení, název a adresa sídla firmy, IČ, DIČ, u fyzických osob datum narození a korespondenční adresa. Díky nim vás jednoznačně identifikujeme, například když potřebujete potvrzení o daru.</p>
<p class="tx-pod">Kontaktní údaje</p>
<p>Hlavně e-mailová adresa a telefonní číslo, případně korespondenční adresa. Díky nim vás můžeme kontaktovat.</p>
<p class="tx-pod">Další podklady</p>
<p>Podle situace se vás můžeme zeptat i na další údaje, třeba na fotografie nebo popis pomůcky. Vždy chceme jen to, co je nezbytné, abychom vám mohli odpovědět, pomoc poskytnout nebo splnit povinnosti, které z ní vyplývají.</p>
</div></details>
<details class="faq__i"><summary>Proč údaje zpracováváme?</summary><div class="faq__a">
<p>Vaše osobní údaje zpracováváme v rozsahu, který je nezbytný k vyřízení vaší žádosti, k plnění smlouvy, například darovací, a k plnění zákonných povinností, které z ní vyplývají. Jsou to zejména identifikační a kontaktní údaje.</p>
<p>Poskytnutí údajů je dobrovolné. Pokud nám ale potřebné údaje nesdělíte, nemůžeme vám odpovědět, vystavit potvrzení o daru ani s vámi uzavřít smlouvu.</p>
</div></details>
<details class="faq__i"><summary>Co se děje se zprávou z formuláře na webu?</summary><div class="faq__a">
<p>Na webu nám můžete poslat zprávu, nabídnout pomůcky pro maminky nebo požádat o jejich zapůjčení. Z formuláře dostaneme údaje, které vyplníte: jméno, e-mail, telefon a text zprávy.</p>
<p>Zpráva nám přijde e-mailem a použijeme ji jen k tomu, abychom vám odpověděli a případně domluvili další postup. E-mail i telefon jsou povinné, abychom se vám mohli ozvat. Před odesláním jen potvrdíte, že o tomto zpracování víte.</p>
</div></details>
<details class="faq__i"><summary>Komu údaje předáváme?</summary><div class="faq__a">
<p>Údaje, které nám poskytnete, jsou přístupné nám a našim zpracovatelům. Jsou to:</p>
<ul>
<li>externí správci našich webových stránek,</li>
<li>účetní kancelář,</li>
<li>advokátní kancelář.</li>
</ul>
<p>Se všemi zpracovateli máme uzavřené smlouvy, které upravují jejich povinnosti při práci s vašimi údaji.</p>
</div></details>
<details class="faq__i"><summary>Kde údaje uchováváme?</summary><div class="faq__a">
<p>Všechny osobní údaje uchováváme v zabezpečeném profesionálním cloudovém řešení se servery na území Evropské unie, případně v sídle nadace. Když údaje sdílíme s externími zpracovateli, děláme to jedině na základě uzavřené smlouvy o zpracování osobních údajů.</p>
</div></details>
<details class="faq__i"><summary>Jak dlouho údaje uchováváme?</summary><div class="faq__a">
<p>Jen po nezbytně nutnou dobu a podle zákonných lhůt, které nám ukládají právní předpisy. Běžná doba uchování je nejvýše 10 let od poslední části plnění. Když zanikne zákonný důvod nebo skončí doba archivace, údaje skartujeme nebo vymažeme ze systémů.</p>
</div></details>
<details class="faq__i"><summary>Jak údaje chráníme?</summary><div class="faq__a">
<p>K zabezpečení osobních údajů používáme ověřené a šifrované programy a webové aplikace. Web je chráněný bezpečnostním certifikátem HTTPS. Údaje v tištěné podobě archivujeme podle platných právních a účetních norem.</p>
</div></details>
<details class="faq__i"><summary>Používá web cookies?</summary><div class="faq__a">
<p>Ne. Web nepoužívá cookies ani analytické nástroje, nevkládá cizí měřicí skripty a do vašeho prohlížeče nic neukládá. Víc se dočtete na stránce <a href="#">Cookies</a>.</p>
</div></details>
<details class="faq__i"><summary>Jaká máte práva?</summary><div class="faq__a">
<p>Můžete nás kdykoli kontaktovat, abyste se dozvěděli, jak s vašimi osobními údaji nakládáme, nebo abyste uplatnili některé z níže uvedených práv. Napište nám na <a href="#">info@example.com</a>. Na žádost odpovíme bez zbytečného odkladu, nejpozději do 30 dnů od jejího obdržení.</p>
<p>Když požádáte o omezení zpracování, opravu, doplnění nebo výmaz údajů, bez zbytečného odkladu o tom informujeme příjemce vašich údajů. To neplatí, když by to bylo nemožné nebo by to vyžadovalo neúměrné úsilí.</p>
<p class="tx-pod">Přístup k údajům</p>
<p>Můžete si vyžádat kopii svých osobních údajů.</p>
<p class="tx-pod">Oprava</p>
<p>Pokud se domníváte, že jsou vaše údaje nepravdivé, nepřesné nebo neúplné, můžete nás požádat o jejich aktualizaci nebo doplnění.</p>
<p class="tx-pod">Výmaz (právo být zapomenut)</p>
<p>Můžete požadovat výmaz svých údajů, pokud už nejsou potřebné pro účel, pro který jsme je zpracovávali.</p>
<p class="tx-pod">Omezení zpracování</p>
<p>Můžete požadovat, abychom zpracování omezili, pokud popíráte přesnost svých údajů nebo pokud je zpracování protiprávní, ale vy výmaz odmítáte.</p>
<p class="tx-pod">Přenositelnost</p>
<p>Pokud údaje zpracováváme automatizovaně, máte právo na jejich přenositelnost. Zpracovávané údaje vám poskytneme ve formátu PDF.</p>
<p class="tx-pod">Námitka</p>
<p>Kdykoli můžete vznést námitku proti zpracování svých údajů. Pro daný účel je pak už zpracovávat nebudeme, pokud nám zákon nenařizuje jinak.</p>
<p class="tx-pod">Stížnost u dozorového úřadu</p>
<p>Pokud se domníváte, že jsme při zpracování vašich osobních údajů porušili pravidla jejich ochrany, můžete podat stížnost u <a href="#" rel="noopener" target="_blank">Úřadu pro ochranu osobních údajů</a>.</p>
</div></details>
<details class="faq__i"><summary>Od kdy tyto zásady platí?</summary><div class="faq__a">
<p>Tyto zásady platí od 8. 10. 2026 a nahrazují předchozí znění. Kvůli změnám právních předpisů je můžeme kdykoli upravit. Aktuální znění najdete vždy na této stránce.</p>
</div></details>
</div>
</div>
</section></main>
Stránka nenalezena
Číslo 404, nadpis, text a tlačítko zpět, pod nimi rozcestník Kam dál? s odkazy na hlavní stránky. Bez patičky. Třídy: e404, e404-rozcestnik.
HTML kód
<main class="obsah" id="obsah"><section class="e404">
<div class="w e404__in">
<p aria-hidden="true" class="e404__cislo">404</p>
<div class="e404__text">
<h1>Tato stránka tu není</h1>
<p>Odkaz je možná starý nebo je v adrese překlep. Vraťte se na úvod, podívejte se na naše projekty nebo nám napište, rádi poradíme.</p>
<div class="e404__tlacitka">
<a class="btn btn--plna" href="#">Na úvod</a>
<a class="btn" href="#">Projekty</a>
</div>
</div>
</div>
</section></main><main class="obsah" id="obsah"><section class="e404-rozcestnik">
<div class="w">
<h2>Kam dál?</h2>
<ul class="e404__seznam">
<li><a class="e404__d" href="#"><span class="e404__d-nadpis">O nás</span><span class="e404__d-text">Kdo jsme a proč jsme se spojili, abychom páchali dobro společně.</span></a></li>
<li><a class="e404__d" href="#"><span class="e404__d-nadpis">Aktuálně</span><span class="e404__d-text">Pozvánky na akce, novinky z kostela v Doubravě a z našich projektů.</span></a></li>
<li><a class="e404__d" href="#"><span class="e404__d-nadpis">Projekty</span><span class="e404__d-text">Zachraň Kostel! a Maminky maminkám. Kde právě pomáháme.</span></a></li>
<li><a class="e404__d" href="#"><span class="e404__d-nadpis">Pomáhejte s námi</span><span class="e404__d-text">Finanční dar, veřejná sbírka, pomůcky pro maminky nebo dobrovolnictví.</span></a></li>
<li><a class="e404__d" href="#"><span class="e404__d-nadpis">Kontakt</span><span class="e404__d-text">Napište nám nebo zavolejte, rádi se ozveme.</span></a></li>
</ul>
</div>
</section></main>
