Holixys

Konzultace, GAP analýzy a interní audity informační a kybernetické bezpečnosti podle ISO 27001, NZKB, DORA, TISAX a dalších standardů a regulací.

Náhled webu Holixys

Barvy

  • Značková barva je tmavá navy --ink #001141. Má ji skoro všechen text a nadpisy, plochy úvodu, tmavého pásu a patičky i plná tlačítka a jejich obrysy. Stejnou hodnotu má proměnná --text.
  • Jediný akcent je azurová --modra #06a8e8. Používá se na logo, čísla kroků a úkonů, štítky, tečky a linky na časové ose a při najetí na ikony a tlačítka. Nikdy jako plocha celé sekce.
  • Plochy střídají bílou #fff a světle modrošedou --bez #eef1f7 (sec--bez). Karty a boxy při najetí mění podklad na #f7f9fc.
  • Vedlejší text je šedomodrý --seda #4a5470. Na tmavých plochách je text rgba(255,255,255,.76).
  • Linky jsou --line #c9cfdb, pod hlavičkou #d6dce8, obrys polí formuláře #b9c3d6. Chyba formuláře je #e00000 na podkladu #fdecec.

Písmo

  • Jediná rodina je Urbanist, hostovaná u nás v řezech 400 až 800. Tělo je 500, základ 19 px, na telefonu 18 px, se záporným prostrkáním −0.008em.
  • Nadpisy h1, h2, h3 mají řez 600, v sekcích a úvodu 800, těsné řádkování kolem 1.0 a záporné prostrkání. Velikosti plynou přes clamp().
  • Štítky mal a popisky typů jsou malé verzálky s prostrkáním, tučné. Úvodní h1 je bílé na navy, s azurovým druhým řádkem.

Rozvržení

  • Obsah je v w, maximum --obsah 1440 px plus boční okraj --okraj clamp(20px,4vw,56px). Hlavička n3 i patička f3 jdou přes celou šířku okna.
  • Sekce sec mají svislý okraj clamp(70px,7vw,130px), jak a k3 clamp(80px,9vw,150px). Dvousloupcové bloky (k3__in, std3__in, dva) se na šířce 900 až 1100 px skládají pod sebe.
  • Karty a mřížky mají 2 až 5 sloupců a postupně se zužují až na jeden sloupec na telefonu.
  • Hlavička je pevná, výška --navh 88 px (66 px na telefonu). Pod 1100 px nahradí menu tlačítko burger a boční mob-menu.

Tvary

  • Vše je hranaté: tlačítka, pole i karty mají border-radius:0. Dělení obstarávají tenké linky a změny podkladu, ne zaoblení ani stíny.
  • Kruhové jsou jen tečky na časové ose (osa li::before, 50 %). Mezi kroky v tmavém pásu vede čárkovaná azurová linka.

Obrázky

  • Fotky serveroven a práce jsou webp, bez rámečku a zaoblení. V úvodu a tmavém pásu jsou pod gradientem navy, aby na nich držel bílý text.
  • Ikony jsou ploché jednobarevné SVG (třída ik), kreslené obrysem nebo výplní currentColor, velikost 52 až 64 px. V kartách a boxech zmodrají při najetí.

Tlačítka

  • Hlavní akce je btn nebo n3__btn: plná navy s obrysem, verzálky, řez 700. Při najetí se obrátí na azurovou. Na tmavém úvodu je uvod__btn bílé a uvod__btn--ram jen s bílým obrysem.
  • Odkaz v textu odkaz je podtržený 1 px s odsazením 4 px, při najetí se podtržení ztratí (a naopak).

Jazyk

  • Web je jen česky. Za jednopísmennými předložkami i krátkými slovy jsou nezlomitelné mezery.

Barvy

Značka

--ink#001141Nadpisy, text, tmavé plochy úvodu a patičky, plná tlačítka a obrysy. Stejnou hodnotu má proměnná --text.
--modra#06a8e8Akcent: logo, čísla kroků a úkonů, štítky, tečky a linky na časové ose, najetí na ikony a tlačítka.

Plochy

bílá#ffffffPodklad stránky, karet a poptávkového formuláře.
--bez#eef1f7Podklad světlých sekcí (sec--bez) a bloku Pro koho.
#f7f9fc#f7f9fcPodklad karty, boxu a dlaždice standardu při najetí.

Text

--seda#4a5470Perex, popisky, drobný text a odpovědi v dotazech.
bílá .76rgba(255,255,255,.76)Text a perex na tmavých plochách (úvod, tmavý pás, patička).

Linky

--line#c9cfdbTenké linky, obrysy karet, mřížek a časové osy.
#d6dce8#d6dce8Spodní linka pevné hlavičky.
#b9c3d6#b9c3d6Obrys polí poptávkového formuláře.

Stavy

#e00000#e00000Chyba u jednotlivého pole i celé hlášky formuláře.
#fdecec#fdececPodklad chybové hlášky formuláře.

Typografie

Rozměry

Mezery a šířky

NázevHodnotaUkázkaPoužití
--okrajclamp(20px,4vw,56px)Boční okraj obsahu i hlavičky a patičky.
--obsah1440pxMaximální šířka obsahu v bloku w.
--navh88pxVýška pevné hlavičky, 66 px na telefonu.
--padclamp(24px,3vw,56px)Vnitřní okraj buněk rozbalovacího menu.
sekceclamp(70px,7vw,130px)Svislý okraj sekce sec; jak a k3 clamp(80px,9vw,150px).

Rádiusy

NázevHodnotaUkázkaPoužití
vše0Tlačítka, pole i karty jsou hranaté, bez zaoblení.
tečky osy50%Kruhové značky na časové ose termínů.

Komponenty

Navigace

Hlavička

Pevná hlavička s logem, hlavním menu s rozbalovacím blokem Služby, telefonem a tlačítkem poptávky. Třídy: n3, n3__in, n3__logo, n3__links, n3__right, n3__tel, n3__btn, burger.

HTML kód
<header class="n3">
<div class="n3__in">
<a aria-label="Holixys, úvodní stránka" class="n3__logo" href="#"><svg aria-hidden="true" class="logo__svg" viewbox="0 0 263.59 73.181"><path d="M0.174 0.036C7.496 0.048 14.822 0 22.145 0.06C22.099 7.248 22.099 14.437 22.095 21.625C22.087 24.043 21.799 26.664 23.042 28.857C24.413 31.128 26.759 32.622 29.185 33.57C32.431 34.815 35.944 35.19 39.397 35.14C44.967 35.14 50.534 35.14 56.101 35.14C60.742 35.097 65.427 36.026 69.612 38.065C71.918 39.215 74.11 40.764 75.581 42.917C76.42 44.144 76.917 45.605 76.961 47.095C76.966 55.782 76.955 64.471 76.966 73.159C69.635 73.174 62.305 73.176 54.974 73.157C54.97 64.413 54.979 55.667 54.97 46.923C54.853 44.751 53.36 42.942 51.671 41.708C48.457 39.406 44.484 38.432 40.594 38.136C36.451 37.883 32.306 38.022 28.161 38.084C22.951 38.115 17.652 38.299 12.556 36.998C8.827 36.055 5.135 34.389 2.478 31.534C1.523 30.476 0.783 29.201 0.454 27.807C0 25.723 0.136 23.577 0.112 21.462C0.139 18.65 0.052 15.834 0.174 13.025C0.174 8.696 0.162 4.364 0.174 0.036ZM15.298 44.361C17.54 43.965 19.825 43.879 22.099 43.918C22.104 54.64 22.1 62.437 22.1 73.159C14.792 73.181 7.484 73.166 0.175 73.166C0.157 66.311 0.174 62.381 0.174 55.524C0.308 52.721 2.213 50.361 4.376 48.742C7.56 46.367 11.418 45.051 15.298 44.361ZM54.974 0.041C62.303 0.025 69.635 0.025 76.966 0.041C76.955 6.775 76.966 10.582 76.961 17.316C76.928 19.655 75.675 21.802 73.997 23.361C71.507 25.74 68.266 27.161 65 28.116C61.749 29.058 58.349 29.366 54.976 29.281C54.972 18.56 54.974 10.762 54.974 0.041" fill="#06a8e8"></path><path d="M110.666 50.666V16.848H115.592V28.998C116.262 28.136 117.036 27.419 117.913 26.845C118.789 26.271 119.738 25.841 120.758 25.553C121.779 25.266 122.799 25.123 123.82 25.123C126.243 25.123 128.141 25.641 129.512 26.677C130.883 27.714 131.856 29.109 132.43 30.863C133.004 32.617 133.291 34.594 133.291 36.794V50.666H128.316V37.942C128.316 36.922 128.245 35.917 128.101 34.929C127.957 33.94 127.694 33.04 127.312 32.226C126.929 31.413 126.347 30.759 125.566 30.265C124.785 29.771 123.74 29.524 122.433 29.524C121.189 29.524 120.129 29.795 119.252 30.337C118.375 30.879 117.673 31.604 117.147 32.513C116.621 33.422 116.23 34.411 115.975 35.479C115.72 36.547 115.592 37.608 115.592 38.66V50.666ZM150.415 50.953C147.8 50.953 145.584 50.419 143.767 49.351C141.949 48.282 140.57 46.776 139.629 44.83C138.688 42.885 138.218 40.637 138.218 38.086C138.218 35.503 138.696 33.247 139.653 31.317C140.609 29.388 141.997 27.873 143.814 26.773C145.632 25.673 147.848 25.123 150.463 25.123C153.078 25.123 155.294 25.673 157.112 26.773C158.93 27.873 160.301 29.396 161.226 31.341C162.151 33.287 162.613 35.551 162.613 38.134C162.613 40.653 162.143 42.885 161.202 44.83C160.261 46.776 158.89 48.282 157.088 49.351C155.286 50.419 153.062 50.953 150.415 50.953ZM150.415 46.553C152.137 46.553 153.532 46.17 154.601 45.405C155.669 44.639 156.458 43.611 156.969 42.319C157.479 41.028 157.734 39.617 157.734 38.086C157.734 36.555 157.479 35.152 156.969 33.876C156.458 32.601 155.669 31.572 154.601 30.791C153.532 30.01 152.137 29.619 150.415 29.619C148.725 29.619 147.338 30.01 146.254 30.791C145.17 31.572 144.38 32.601 143.886 33.876C143.392 35.152 143.145 36.555 143.145 38.086C143.145 39.648 143.392 41.067 143.886 42.343C144.38 43.619 145.17 44.639 146.254 45.405C147.338 46.17 148.725 46.553 150.415 46.553ZM167.683 50.666V16.848H172.61V50.666ZM178.685 50.666V25.458H183.612V50.666ZM181.125 22.11C180.168 22.11 179.395 21.815 178.805 21.225C178.215 20.635 177.92 19.877 177.92 18.952C177.92 18.028 178.223 17.27 178.829 16.68C179.435 16.09 180.2 15.796 181.125 15.796C181.986 15.796 182.743 16.09 183.397 16.68C184.05 17.27 184.377 18.028 184.377 18.952C184.377 19.877 184.066 20.635 183.445 21.225C182.822 21.815 182.049 22.11 181.125 22.11ZM187.2 50.666L196.144 37.799L187.63 25.458H193.514L199.445 34.498L205.185 25.458H210.877L202.411 37.942L211.499 50.666H205.663L199.158 41.482L192.748 50.666ZM226.136 62.05C224.191 62.05 222.309 61.787 220.492 61.261C218.674 60.735 217.016 59.818 215.517 58.511L217.478 54.588C218.626 55.513 219.894 56.247 221.281 56.789C222.668 57.331 224.143 57.602 225.706 57.602C228.288 57.602 230.154 56.901 231.302 55.498C232.45 54.094 233.024 52.261 233.024 49.996V47.557C232.45 48.354 231.741 49.016 230.896 49.542C230.05 50.068 229.118 50.451 228.098 50.69C227.077 50.929 226.04 51.049 224.988 51.049C222.533 51.049 220.579 50.547 219.128 49.542C217.678 48.538 216.641 47.158 216.019 45.405C215.397 43.651 215.086 41.626 215.086 39.329V25.458H220.061V38.134C220.061 39.154 220.125 40.174 220.253 41.195C220.38 42.215 220.651 43.132 221.066 43.946C221.48 44.759 222.086 45.412 222.883 45.907C223.68 46.401 224.765 46.648 226.136 46.648C227.858 46.648 229.213 46.226 230.202 45.38C231.191 44.535 231.892 43.419 232.307 42.032C232.721 40.645 232.928 39.138 232.928 37.512V25.458H237.855V49.47C237.855 51.448 237.624 53.217 237.161 54.78C236.7 56.343 235.982 57.666 235.009 58.75C234.037 59.834 232.825 60.655 231.374 61.214C229.923 61.772 228.177 62.05 226.136 62.05ZM253.306 50.953C252.126 50.953 250.946 50.842 249.766 50.619C248.586 50.395 247.486 49.996 246.466 49.423C245.445 48.849 244.584 48.075 243.882 47.102C243.181 46.13 242.734 44.926 242.543 43.491H247.565C247.821 44.256 248.275 44.878 248.929 45.357C249.583 45.835 250.316 46.186 251.129 46.409C251.942 46.632 252.748 46.744 253.545 46.744C254.023 46.744 254.557 46.712 255.147 46.648C255.737 46.584 256.303 46.441 256.845 46.218C257.388 45.994 257.834 45.667 258.185 45.237C258.536 44.807 258.711 44.224 258.711 43.491C258.711 42.917 258.559 42.439 258.257 42.056C257.953 41.673 257.539 41.363 257.013 41.123C256.487 40.884 255.857 40.701 255.123 40.573C253.688 40.255 252.15 39.944 250.507 39.641C248.865 39.338 247.422 38.803 246.178 38.038C245.732 37.751 245.334 37.424 244.983 37.058C244.632 36.691 244.329 36.268 244.074 35.79C243.819 35.311 243.627 34.802 243.5 34.259C243.372 33.717 243.309 33.127 243.309 32.489C243.309 31.182 243.572 30.066 244.098 29.141C244.624 28.216 245.349 27.459 246.274 26.869C247.199 26.279 248.251 25.841 249.431 25.553C250.611 25.266 251.855 25.123 253.162 25.123C254.852 25.123 256.383 25.394 257.754 25.936C259.125 26.478 260.257 27.275 261.151 28.328C262.043 29.38 262.57 30.703 262.729 32.298H258.089C257.898 31.437 257.348 30.743 256.439 30.217C255.53 29.691 254.39 29.428 253.019 29.428C252.541 29.428 252.022 29.46 251.464 29.524C250.906 29.587 250.372 29.731 249.862 29.954C249.352 30.177 248.937 30.488 248.618 30.887C248.299 31.285 248.14 31.804 248.14 32.442C248.14 33.047 248.291 33.558 248.594 33.972C248.897 34.387 249.343 34.722 249.934 34.977C250.524 35.232 251.201 35.439 251.966 35.599C253.051 35.854 254.222 36.093 255.482 36.316C256.742 36.539 257.77 36.778 258.567 37.034C259.62 37.321 260.52 37.735 261.27 38.277C262.019 38.819 262.593 39.505 262.992 40.334C263.391 41.163 263.59 42.168 263.59 43.348C263.59 44.878 263.287 46.13 262.681 47.102C262.075 48.075 261.27 48.849 260.266 49.423C259.261 49.996 258.145 50.395 256.917 50.619C255.69 50.842 254.486 50.953 253.306 50.953" fill="#001141"></path></svg>
</a>
<nav aria-label="Hlavní menu" class="n3__links">
<div class="nav__dd">
<a aria-haspopup="true" class="nav__dd-a" href="#">Služby<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg></a>
<div class="mega">
<div class="mega__in">
<div class="bunka bunka--cerna"><p class="mal stit">Naše služby</p><p>Konzultace, interní audity a doplňkové služby podle standardů, regulací i vašich interních předpisů.</p></div>
<ul class="mega__list" data-mega=""><li><a data-alt="Videohovor s konzultantem na notebooku při jednání" data-foto="assets/foto/sl-konzultace-600.webp" data-nazev="Konzultace" data-text="GAP analýza, návrh řešení a podpora zavedení opatření" href="#">Konzultace</a></li>
<li><a data-alt="Notebook s přehledem metrik a grafů" data-foto="assets/foto/sl-audity-600.webp" data-nazev="Interní audity" data-text="Audit vůči standardu, regulaci nebo interním předpisům" href="#">Interní audity</a></li>
<li><a data-alt="Specialista u monitorů s kódem v kanceláři" data-foto="assets/foto/sl-doplnkove-600.webp" data-nazev="Doplňkové služby" data-text="Testy, školení a prověřování dodavatelů jednorázově i pravidelně" href="#">Doplňkové služby</a></li>
<li><a data-alt="Ruce s mobilem nad klávesnicí notebooku" data-foto="assets/foto/sl-phishing-600.webp" data-nazev="Phishing testy" data-text="Simulované podvodné e-maily ověří, jak zaměstnanci reagují" href="#">Phishing testy</a></li>
<li><a data-alt="Lektor ukazuje kolegům postup na notebooku" data-foto="assets/foto/sl-skoleni-600.webp" data-nazev="Školení uživatelů" data-text="Bezpečnostní povědomí, aby zaměstnanci poznali podvod" href="#">Školení uživatelů</a></li>
<li><a data-alt="Kód na monitorech odražený v brýlích" data-foto="assets/foto/sl-skeny-600.webp" data-nazev="Skeny zranitelností" data-text="Vyhledání známých zranitelností v systémech a aplikacích" href="#">Skeny zranitelností</a></li>
<li><a data-alt="Ruce píšou kód na notebooku" data-foto="assets/foto/sl-pentest-600.webp" data-nazev="Penetrační testy" data-text="Řízený pokus o průnik ověří, jestli se zranitelnosti dají zneužít" href="#">Penetrační testy</a></li>
<li><a data-alt="Notebook s přehledem zásilek vedle balíků" data-foto="assets/foto/sl-dodavatele-600.webp" data-nazev="Prověřování dodavatelů" data-text="Posouzení bezpečnosti dodavatelů s přístupem k vašim systémům" href="#">Prověřování dodavatelů</a></li>
</ul>
<div class="bunka"><a class="mega__karta" data-mega-karta="" href="#"><span class="mega__karta-obr"><img alt="Videohovor s konzultantem na notebooku při jednání" class="foto" height="400" src="assets/foto/sl-konzultace-600.webp" width="600"/></span><span><span class="stitek mal">Konzultace</span><b>GAP analýza, návrh řešení a podpora zavedení opatření</b></span></a></div>
</div>
</div>
</div>
<a href="#">Pro koho</a>
<a href="#">Standardy</a>
<a href="#">Jak pracujeme</a>
<a href="#">Dotazy</a>
<a href="#">Kontakt</a>
</nav>
<div class="n3__right">
<a class="n3__tel" href="#"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M13 2a9 9 0 0 1 9 9"></path><path d="M13 6a5 5 0 0 1 5 5"></path><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"></path></svg><span>+420 603 415 521</span></a>
<a class="n3__btn" href="#">Nezávazná poptávka</a>
<button aria-controls="mobMenu" aria-expanded="false" aria-label="Otevřít menu" class="burger n3__burger" type="button"><span>Menu</span><span aria-hidden="true" class="n3__lines"><span></span><span></span><span></span></span></button>
</div>
</div>
</header>

Rozbalovací menu služeb

Pod položkou Služby vyjede široký panel s úvodní buňkou, seznamem služeb a kartou. Třídy: nav__dd, mega, mega__in, bunka, mega__list, mega__karta.

HTML kód
<header class="n3"><div class="n3__in"><nav class="n3__links"><div class="nav__dd">
<a aria-haspopup="true" class="nav__dd-a" href="#">Služby<svg aria-hidden="true" viewbox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg></a>
<div class="mega">
<div class="mega__in">
<div class="bunka bunka--cerna"><p class="mal stit">Naše služby</p><p>Konzultace, interní audity a doplňkové služby podle standardů, regulací i vašich interních předpisů.</p></div>
<ul class="mega__list" data-mega=""><li><a data-alt="Videohovor s konzultantem na notebooku při jednání" data-foto="assets/foto/sl-konzultace-600.webp" data-nazev="Konzultace" data-text="GAP analýza, návrh řešení a podpora zavedení opatření" href="#">Konzultace</a></li>
<li><a data-alt="Notebook s přehledem metrik a grafů" data-foto="assets/foto/sl-audity-600.webp" data-nazev="Interní audity" data-text="Audit vůči standardu, regulaci nebo interním předpisům" href="#">Interní audity</a></li>
<li><a data-alt="Specialista u monitorů s kódem v kanceláři" data-foto="assets/foto/sl-doplnkove-600.webp" data-nazev="Doplňkové služby" data-text="Testy, školení a prověřování dodavatelů jednorázově i pravidelně" href="#">Doplňkové služby</a></li>
<li><a data-alt="Ruce s mobilem nad klávesnicí notebooku" data-foto="assets/foto/sl-phishing-600.webp" data-nazev="Phishing testy" data-text="Simulované podvodné e-maily ověří, jak zaměstnanci reagují" href="#">Phishing testy</a></li>
<li><a data-alt="Lektor ukazuje kolegům postup na notebooku" data-foto="assets/foto/sl-skoleni-600.webp" data-nazev="Školení uživatelů" data-text="Bezpečnostní povědomí, aby zaměstnanci poznali podvod" href="#">Školení uživatelů</a></li>
<li><a data-alt="Kód na monitorech odražený v brýlích" data-foto="assets/foto/sl-skeny-600.webp" data-nazev="Skeny zranitelností" data-text="Vyhledání známých zranitelností v systémech a aplikacích" href="#">Skeny zranitelností</a></li>
<li><a data-alt="Ruce píšou kód na notebooku" data-foto="assets/foto/sl-pentest-600.webp" data-nazev="Penetrační testy" data-text="Řízený pokus o průnik ověří, jestli se zranitelnosti dají zneužít" href="#">Penetrační testy</a></li>
<li><a data-alt="Notebook s přehledem zásilek vedle balíků" data-foto="assets/foto/sl-dodavatele-600.webp" data-nazev="Prověřování dodavatelů" data-text="Posouzení bezpečnosti dodavatelů s přístupem k vašim systémům" href="#">Prověřování dodavatelů</a></li>
</ul>
<div class="bunka"><a class="mega__karta" data-mega-karta="" href="#"><span class="mega__karta-obr"><img alt="Videohovor s konzultantem na notebooku při jednání" class="foto" height="400" src="assets/foto/sl-konzultace-600.webp" width="600"/></span><span><span class="stitek mal">Konzultace</span><b>GAP analýza, návrh řešení a podpora zavedení opatření</b></span></a></div>
</div>
</div>
</div></nav></div></header>

Mobilní menu

Boční panel menu pro telefon, na webu vyjede zprava přes ztmavené pozadí. Třídy: mob-menu, mob-menu__x, mob-menu__dd, mob-menu__sub.

HTML kód
<nav aria-hidden="true" aria-label="Menu pro mobil" class="mob-menu" id="mobMenu">
<button aria-label="Zavřít menu" class="mob-menu__x" type="button"><span></span><span></span></button>
<details class="mob-menu__dd"><summary>Služby<span aria-hidden="true" class="mob-menu__ic"></span></summary><ul class="mob-menu__sub"><li><a href="#">Konzultace</a></li>
<li><a href="#">Interní audity</a></li>
<li><a href="#">Doplňkové služby</a></li>
<li><a href="#">Phishing testy</a></li>
<li><a href="#">Školení uživatelů</a></li>
<li><a href="#">Skeny zranitelností</a></li>
<li><a href="#">Penetrační testy</a></li>
<li><a href="#">Prověřování dodavatelů</a></li>
</ul></details>
<a href="#">Standardy</a>
<a href="#">Dotazy</a>
<a href="#">Kontakt</a>
</nav>

Patička

Tmavá patička se čtyřmi sloupci (logo, služby, kontakt, firma) a spodním řádkem s rokem, právními odkazy a kreditem. Třídy: f3, f3__mriz, f3__b, f3__h, f3__dole, foot__credit.

HTML kód
<footer class="f3">
<div class="f3__in">
<div class="f3__mriz">
<div class="f3__b">
<a aria-label="Holixys, úvodní stránka" class="f3__logo" href="#"><svg aria-hidden="true" class="logo__svg" viewbox="0 0 263.59 73.181"><path d="M0.174 0.036C7.496 0.048 14.822 0 22.145 0.06C22.099 7.248 22.099 14.437 22.095 21.625C22.087 24.043 21.799 26.664 23.042 28.857C24.413 31.128 26.759 32.622 29.185 33.57C32.431 34.815 35.944 35.19 39.397 35.14C44.967 35.14 50.534 35.14 56.101 35.14C60.742 35.097 65.427 36.026 69.612 38.065C71.918 39.215 74.11 40.764 75.581 42.917C76.42 44.144 76.917 45.605 76.961 47.095C76.966 55.782 76.955 64.471 76.966 73.159C69.635 73.174 62.305 73.176 54.974 73.157C54.97 64.413 54.979 55.667 54.97 46.923C54.853 44.751 53.36 42.942 51.671 41.708C48.457 39.406 44.484 38.432 40.594 38.136C36.451 37.883 32.306 38.022 28.161 38.084C22.951 38.115 17.652 38.299 12.556 36.998C8.827 36.055 5.135 34.389 2.478 31.534C1.523 30.476 0.783 29.201 0.454 27.807C0 25.723 0.136 23.577 0.112 21.462C0.139 18.65 0.052 15.834 0.174 13.025C0.174 8.696 0.162 4.364 0.174 0.036ZM15.298 44.361C17.54 43.965 19.825 43.879 22.099 43.918C22.104 54.64 22.1 62.437 22.1 73.159C14.792 73.181 7.484 73.166 0.175 73.166C0.157 66.311 0.174 62.381 0.174 55.524C0.308 52.721 2.213 50.361 4.376 48.742C7.56 46.367 11.418 45.051 15.298 44.361ZM54.974 0.041C62.303 0.025 69.635 0.025 76.966 0.041C76.955 6.775 76.966 10.582 76.961 17.316C76.928 19.655 75.675 21.802 73.997 23.361C71.507 25.74 68.266 27.161 65 28.116C61.749 29.058 58.349 29.366 54.976 29.281C54.972 18.56 54.974 10.762 54.974 0.041" fill="#06a8e8"></path><path d="M110.666 50.666V16.848H115.592V28.998C116.262 28.136 117.036 27.419 117.913 26.845C118.789 26.271 119.738 25.841 120.758 25.553C121.779 25.266 122.799 25.123 123.82 25.123C126.243 25.123 128.141 25.641 129.512 26.677C130.883 27.714 131.856 29.109 132.43 30.863C133.004 32.617 133.291 34.594 133.291 36.794V50.666H128.316V37.942C128.316 36.922 128.245 35.917 128.101 34.929C127.957 33.94 127.694 33.04 127.312 32.226C126.929 31.413 126.347 30.759 125.566 30.265C124.785 29.771 123.74 29.524 122.433 29.524C121.189 29.524 120.129 29.795 119.252 30.337C118.375 30.879 117.673 31.604 117.147 32.513C116.621 33.422 116.23 34.411 115.975 35.479C115.72 36.547 115.592 37.608 115.592 38.66V50.666ZM150.415 50.953C147.8 50.953 145.584 50.419 143.767 49.351C141.949 48.282 140.57 46.776 139.629 44.83C138.688 42.885 138.218 40.637 138.218 38.086C138.218 35.503 138.696 33.247 139.653 31.317C140.609 29.388 141.997 27.873 143.814 26.773C145.632 25.673 147.848 25.123 150.463 25.123C153.078 25.123 155.294 25.673 157.112 26.773C158.93 27.873 160.301 29.396 161.226 31.341C162.151 33.287 162.613 35.551 162.613 38.134C162.613 40.653 162.143 42.885 161.202 44.83C160.261 46.776 158.89 48.282 157.088 49.351C155.286 50.419 153.062 50.953 150.415 50.953ZM150.415 46.553C152.137 46.553 153.532 46.17 154.601 45.405C155.669 44.639 156.458 43.611 156.969 42.319C157.479 41.028 157.734 39.617 157.734 38.086C157.734 36.555 157.479 35.152 156.969 33.876C156.458 32.601 155.669 31.572 154.601 30.791C153.532 30.01 152.137 29.619 150.415 29.619C148.725 29.619 147.338 30.01 146.254 30.791C145.17 31.572 144.38 32.601 143.886 33.876C143.392 35.152 143.145 36.555 143.145 38.086C143.145 39.648 143.392 41.067 143.886 42.343C144.38 43.619 145.17 44.639 146.254 45.405C147.338 46.17 148.725 46.553 150.415 46.553ZM167.683 50.666V16.848H172.61V50.666ZM178.685 50.666V25.458H183.612V50.666ZM181.125 22.11C180.168 22.11 179.395 21.815 178.805 21.225C178.215 20.635 177.92 19.877 177.92 18.952C177.92 18.028 178.223 17.27 178.829 16.68C179.435 16.09 180.2 15.796 181.125 15.796C181.986 15.796 182.743 16.09 183.397 16.68C184.05 17.27 184.377 18.028 184.377 18.952C184.377 19.877 184.066 20.635 183.445 21.225C182.822 21.815 182.049 22.11 181.125 22.11ZM187.2 50.666L196.144 37.799L187.63 25.458H193.514L199.445 34.498L205.185 25.458H210.877L202.411 37.942L211.499 50.666H205.663L199.158 41.482L192.748 50.666ZM226.136 62.05C224.191 62.05 222.309 61.787 220.492 61.261C218.674 60.735 217.016 59.818 215.517 58.511L217.478 54.588C218.626 55.513 219.894 56.247 221.281 56.789C222.668 57.331 224.143 57.602 225.706 57.602C228.288 57.602 230.154 56.901 231.302 55.498C232.45 54.094 233.024 52.261 233.024 49.996V47.557C232.45 48.354 231.741 49.016 230.896 49.542C230.05 50.068 229.118 50.451 228.098 50.69C227.077 50.929 226.04 51.049 224.988 51.049C222.533 51.049 220.579 50.547 219.128 49.542C217.678 48.538 216.641 47.158 216.019 45.405C215.397 43.651 215.086 41.626 215.086 39.329V25.458H220.061V38.134C220.061 39.154 220.125 40.174 220.253 41.195C220.38 42.215 220.651 43.132 221.066 43.946C221.48 44.759 222.086 45.412 222.883 45.907C223.68 46.401 224.765 46.648 226.136 46.648C227.858 46.648 229.213 46.226 230.202 45.38C231.191 44.535 231.892 43.419 232.307 42.032C232.721 40.645 232.928 39.138 232.928 37.512V25.458H237.855V49.47C237.855 51.448 237.624 53.217 237.161 54.78C236.7 56.343 235.982 57.666 235.009 58.75C234.037 59.834 232.825 60.655 231.374 61.214C229.923 61.772 228.177 62.05 226.136 62.05ZM253.306 50.953C252.126 50.953 250.946 50.842 249.766 50.619C248.586 50.395 247.486 49.996 246.466 49.423C245.445 48.849 244.584 48.075 243.882 47.102C243.181 46.13 242.734 44.926 242.543 43.491H247.565C247.821 44.256 248.275 44.878 248.929 45.357C249.583 45.835 250.316 46.186 251.129 46.409C251.942 46.632 252.748 46.744 253.545 46.744C254.023 46.744 254.557 46.712 255.147 46.648C255.737 46.584 256.303 46.441 256.845 46.218C257.388 45.994 257.834 45.667 258.185 45.237C258.536 44.807 258.711 44.224 258.711 43.491C258.711 42.917 258.559 42.439 258.257 42.056C257.953 41.673 257.539 41.363 257.013 41.123C256.487 40.884 255.857 40.701 255.123 40.573C253.688 40.255 252.15 39.944 250.507 39.641C248.865 39.338 247.422 38.803 246.178 38.038C245.732 37.751 245.334 37.424 244.983 37.058C244.632 36.691 244.329 36.268 244.074 35.79C243.819 35.311 243.627 34.802 243.5 34.259C243.372 33.717 243.309 33.127 243.309 32.489C243.309 31.182 243.572 30.066 244.098 29.141C244.624 28.216 245.349 27.459 246.274 26.869C247.199 26.279 248.251 25.841 249.431 25.553C250.611 25.266 251.855 25.123 253.162 25.123C254.852 25.123 256.383 25.394 257.754 25.936C259.125 26.478 260.257 27.275 261.151 28.328C262.043 29.38 262.57 30.703 262.729 32.298H258.089C257.898 31.437 257.348 30.743 256.439 30.217C255.53 29.691 254.39 29.428 253.019 29.428C252.541 29.428 252.022 29.46 251.464 29.524C250.906 29.587 250.372 29.731 249.862 29.954C249.352 30.177 248.937 30.488 248.618 30.887C248.299 31.285 248.14 31.804 248.14 32.442C248.14 33.047 248.291 33.558 248.594 33.972C248.897 34.387 249.343 34.722 249.934 34.977C250.524 35.232 251.201 35.439 251.966 35.599C253.051 35.854 254.222 36.093 255.482 36.316C256.742 36.539 257.77 36.778 258.567 37.034C259.62 37.321 260.52 37.735 261.27 38.277C262.019 38.819 262.593 39.505 262.992 40.334C263.391 41.163 263.59 42.168 263.59 43.348C263.59 44.878 263.287 46.13 262.681 47.102C262.075 48.075 261.27 48.849 260.266 49.423C259.261 49.996 258.145 50.395 256.917 50.619C255.69 50.842 254.486 50.953 253.306 50.953" fill="#ffffff"></path></svg>
</a>
<p>Kyberbezpečnost v širších souvislostech. Konzultace a audity informační a kybernetické bezpečnosti.</p>
</div>
<div class="f3__b"><p class="f3__h">Služby</p><ul>
<li><a href="#">Konzultace</a></li>
<li><a href="#">Interní audity</a></li>
<li><a href="#">Doplňkové služby</a></li>
<li><a href="#">Standardy a regulace</a></li>
</ul></div>
<div class="f3__b"><p class="f3__h">Kontakt</p><ul>
<li><a class="f3__tel" href="#">+420 603 415 521</a></li>
<li><a href="#">jan.sedivy@holixys.cz</a></li>
<li class="f3__sv">Staroholická 448<br/>534 01 Holice</li>
</ul></div>
<div class="f3__b"><p class="f3__h">Firma</p><ul>
<li class="f3__sv">Holixys s.r.o.</li>
<li class="f3__sv">IČO 29878144</li>
<li class="f3__sv">DIČ CZ29878144</li>
<li class="f3__sv">Spisová značka C 57318, Krajský soud v Hradci Králové</li>
</ul></div>
</div>
<div class="f3__dole">
<p><span data-rok="">2026</span> © Holixys s.r.o.<span aria-hidden="true" class="f3__tecka">·</span><a href="#">Osobní údaje</a><span aria-hidden="true" class="f3__tecka">·</span><a href="#">Slovníček pojmů</a></p>
<p><span class="foot__credit">design <a href="#" rel="noopener" target="_blank">KACER STUDIO</a></span></p>
</div>
</div>
</footer>

Úvod

Úvod s fotkou a fakty

Tmavý úvod s fotkou serveroven pod gradientem, nadpisem, perexem, tlačítky a pásem čtyř faktů s certifikacemi. Třídy: uvod, uvod__foto, uvod__in, uvod__p, uvod__btns, fakta, fakt.

HTML kód
<main><section class="uvod">
<div class="uvod__foto"><img alt="Řada serverů v datovém centru v modrém světle" fetchpriority="high" height="1602" sizes="(max-width:900px) 100vw, 58vw" src="assets/foto/hero-servery-1134.webp" srcset="assets/foto/hero-servery-1134.webp 1134w, assets/foto/hero-servery.webp 2267w" width="2267"/></div>
<div class="w uvod__in">
<h1>Kyber­bezpečnost <span>v širších souvislostech</span></h1>
<p class="uvod__p">Konzultace a audity informační a kybernetické bezpečnosti podle mezinárodních a oborových standardů, regulací, dobré praxe i vašich interních předpisů.</p>
<div class="uvod__btns"><a class="uvod__btn" href="#">Nezávazná poptávka</a><a class="uvod__btn uvod__btn--ram" href="#">Naše služby</a></div>
<ul class="fakta">
<li class="fakt"><b>20+</b><strong>let praxe</strong><span>v telco, financích, automotive a IT</span></li>
<li class="fakt"><b>CISM</b><strong>certifikace ISACA</strong><span>řízení informační bezpečnosti</span></li>
<li class="fakt"><b>CISA</b><strong>certifikace ISACA</strong><span>audit informačních systémů a procesů</span></li>
<li class="fakt"><b>TISAX</b><strong>Foundation</strong><span>a ISA/IEC 62443 Cybersecurity Fundamentals Specialist</span></li>
</ul>
</div>
</section></main>

Úvod podstránky

Nižší úvod podstránky s drobečkovou navigací, nadpisem, perexem a tlačítky nad fotkou pod gradientem. Třídy: uvod uvod--pod, crumbs, uvod__p, uvod__btns.

HTML kód
<main><section class="uvod uvod--pod">
<div class="uvod__foto"><img alt="Svislé řady serverových skříní se světelnými body" fetchpriority="high" height="3200" sizes="(max-width:900px) 100vw, 58vw" src="assets/foto/servery-vysoka-1086.webp" srcset="assets/foto/servery-vysoka-1086.webp 1086w, assets/foto/servery-vysoka.webp 2173w" width="2173"/></div>
<div class="w uvod__in">
<nav aria-label="Drobečková navigace" class="crumbs"><a href="#">Úvod</a><svg aria-hidden="true" class="crumbs__sep" viewbox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg><span aria-current="page">Standardy</span></nav>
<h1>Standardy <span>a regulace</span></h1>
<p class="uvod__p">Aktuálně podporované zdroje bezpečnostních požadavků. Vůči nim děláme GAP analýzy, návrhy opatření i interní audity.</p>
<div class="uvod__btns"><a class="uvod__btn" href="#">Nezávazná poptávka</a><a class="uvod__btn uvod__btn--ram" href="#">+420 603 415 521</a></div>
</div>
</section></main>

Sekce

Karty služeb

Nadpis sekce a mřížka boxů s ikonou, nadpisem, popisem, šipkou a odkazem. Třídy: sec, hlava, boxy, box, ik, box__sip, box__odkaz.

HTML kód
<main><section class="sec" id="sluzby">
<div class="w">
<div class="hlava"><h2>Služby od analýzy po interní audit</h2><p>Konzultace a interní audity jsou naše hlavní služby. Navazují na ně testy, školení a prověřování dodavatelů.</p></div>
<div class="boxy">
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M216,84H180V48a12,12,0,0,0-12-12H40A12,12,0,0,0,28,48V176a4,4,0,0,0,4,4,4,4,0,0,0,2.51-.89L73,148h3v36a12,12,0,0,0,12,12h95l38.49,31.11A4,4,0,0,0,224,228a4,4,0,0,0,4-4V96A12,12,0,0,0,216,84ZM71.58,140a4,4,0,0,0-2.51.89L36,167.62V48a4,4,0,0,1,4-4H168a4,4,0,0,1,4,4v88a4,4,0,0,1-4,4ZM220,215.62l-33.07-26.73a4,4,0,0,0-2.51-.89H88a4,4,0,0,1-4-4V148h84a12,12,0,0,0,12-12V92h36a4,4,0,0,1,4,4Z"></path></svg>
<span class="box__hl"><h3>Konzultace</h3></span><p>GAP analýza vůči standardu nebo regulaci, návrh řešení nesouladů a podpora při zavedení do procesů a nástrojů.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o konzultacích</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M164,152a4,4,0,0,1-4,4H96a4,4,0,0,1,0-8h64A4,4,0,0,1,164,152Zm-4-36H96a4,4,0,0,0,0,8h64a4,4,0,0,0,0-8Zm52-68V216a12,12,0,0,1-12,12H56a12,12,0,0,1-12-12V48A12,12,0,0,1,56,36H94.08a44,44,0,0,1,67.84,0H200A12,12,0,0,1,212,48ZM92,64v4h72V64a36,36,0,0,0-72,0ZM204,48a4,4,0,0,0-4-4H167.17A43.71,43.71,0,0,1,172,64v8a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V64a43.71,43.71,0,0,1,4.83-20H56a4,4,0,0,0-4,4V216a4,4,0,0,0,4,4H200a4,4,0,0,0,4-4Z"></path></svg>
<span class="box__hl"><h3>Interní audity</h3></span><p>Audit vůči standardu, regulaci nebo interním předpisům pro organizace bez vlastních interních auditorů.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o auditech</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M218.14,161.93a4,4,0,0,0-3.86-.24,24,24,0,0,1-34.23-23.25,24,24,0,0,1,34.23-20.13A4,4,0,0,0,220,114.7V72a12,12,0,0,0-12-12H167a32,32,0,1,0-62.91-10.33A32.57,32.57,0,0,0,105,60H64A12,12,0,0,0,52,72v37a32,32,0,1,0-10.33,62.91A32.28,32.28,0,0,0,52,171v37a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V165.31A4,4,0,0,0,218.14,161.93ZM212,208a4,4,0,0,1-4,4H64a4,4,0,0,1-4-4V165.31a4,4,0,0,0-1.86-3.38,4,4,0,0,0-3.85-.24,24,24,0,0,1-34.24-20.13,24,24,0,0,1,34.24-23.25A4,4,0,0,0,60,114.7V72a4,4,0,0,1,4-4h46.69a4,4,0,0,0,3.62-5.71,24,24,0,0,1,20.13-34.24,24,24,0,0,1,23.25,34.24A4,4,0,0,0,161.31,68H208a4,4,0,0,1,4,4v37a32.57,32.57,0,0,0-10.33-.94A32,32,0,1,0,212,171Z"></path></svg>
<span class="box__hl"><h3>Doplňkové služby</h3></span><p>Testy, školení a prověřování dodavatelů jednorázově i pravidelně, vlastními silami nebo s prověřenými partnery.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o doplňkových službách</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M226.22,92.67l-96-64a4,4,0,0,0-4.44,0l-96,64A4,4,0,0,0,28,96V200a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V96A4,4,0,0,0,226.22,92.67ZM103.63,152,36,199.76v-96Zm8.19,4h32.36l68,48H43.86Zm40.55-4L220,103.76v96ZM128,36.81,217,96.11,144.17,148H111.83L39.05,96.11Z"></path></svg>
<span class="box__hl"><h3>Phishing testy</h3></span><p>Simulované podvodné e-maily ověří, jak zaměstnanci reagují, a ukážou, kde je potřeba školení.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o phishing testech</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M216,44H132V24a4,4,0,0,0-8,0V44H40A12,12,0,0,0,28,56V176a12,12,0,0,0,12,12H87.68l-26.8,33.5a4,4,0,1,0,6.24,5L97.92,188h60.16l30.8,38.5a4,4,0,0,0,6.24-5L168.32,188H216a12,12,0,0,0,12-12V56A12,12,0,0,0,216,44Zm4,132a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V56a4,4,0,0,1,4-4H216a4,4,0,0,1,4,4Z"></path></svg>
<span class="box__hl"><h3>Školení uživatelů</h3></span><p>Školení bezpečnostního povědomí, aby zaměstnanci poznali podvod a věděli, jak nahlásit incident.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o školení</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M148,92a8,8,0,1,1,8,8A8,8,0,0,1,148,92Zm-48-8a8,8,0,1,0,8,8A8,8,0,0,0,100,84Zm144,44a4,4,0,0,1-4,4H212v12a83.64,83.64,0,0,1-3.87,25.2l25.47,11.13A4,4,0,0,1,232,188a4.09,4.09,0,0,1-1.6-.33l-25-10.95a84,84,0,0,1-154.72,0l-25,10.95A4.09,4.09,0,0,1,24,188a4,4,0,0,1-1.6-7.67L47.87,169.2A83.64,83.64,0,0,1,44,144V132H16a4,4,0,0,1,0-8H44V112a83.64,83.64,0,0,1,3.87-25.2L22.4,75.67a4,4,0,0,1,3.2-7.34l25,11a84,84,0,0,1,154.72,0l25-11a4,4,0,1,1,3.2,7.34L208.13,86.8A83.64,83.64,0,0,1,212,112v12h28A4,4,0,0,1,244,128ZM52,124H204V112a76,76,0,0,0-152,0Zm72,95.89V132H52v12A76.09,76.09,0,0,0,124,219.89ZM204,132H132v87.89A76.09,76.09,0,0,0,204,144Z"></path></svg>
<span class="box__hl"><h3>Skeny zranitelností</h3></span><p>Vyhledání známých zranitelností v systémech a aplikacích s přehledem nálezů.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o skenech</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M208,84H92V56a36,36,0,0,1,36-36c17.24,0,32.75,12.38,36.08,28.8a4,4,0,1,0,7.84-1.6C167.78,26.81,149.31,12,128,12A44.05,44.05,0,0,0,84,56V84H48A12,12,0,0,0,36,96V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V96A12,12,0,0,0,208,84Zm4,124a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V96a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-84-92a24,24,0,0,0-4,47.66V184a4,4,0,0,0,8,0V163.66A24,24,0,0,0,128,116Zm0,40a16,16,0,1,1,16-16A16,16,0,0,1,128,156Z"></path></svg>
<span class="box__hl"><h3>Penetrační testy</h3></span><p>Řízený pokus o průnik do sítě nebo aplikace ověří, jestli se zranitelnosti dají skutečně zneužít.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o penetračních testech</span></a>
<a class="box" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M250.73,109.69l-25.53-51a12,12,0,0,0-16.1-5.37L182.88,66.38,129,52.14a3.92,3.92,0,0,0-2,0L73.12,66.38,46.9,53.27a12,12,0,0,0-16.1,5.37L5.27,109.69a12,12,0,0,0,5.37,16.1l27.29,13.65,55.75,39.82a3.87,3.87,0,0,0,1.35.62l64,16a4,4,0,0,0,3.8-1l55.54-55.54,27-13.5a12,12,0,0,0,5.37-16.1Zm-51,36.95-37.2-29.8a4,4,0,0,0-5.34.3c-19.49,19.64-41.34,17.11-55.29,8.2a4.07,4.07,0,0,1-1.85-3,3.91,3.91,0,0,1,1.11-3.21L145.62,76h35.91l29.6,59.21ZM12.21,116.32a4,4,0,0,1,.22-3L38,62.22h0A4,4,0,0,1,41.54,60a4,4,0,0,1,1.78.43l24,12L38.21,130.64l-24-12A4,4,0,0,1,12.21,116.32Zm146.56,71.25L97.71,172.3l-52.6-37.57L75.45,74,128,60.14,157.72,68H144a4,4,0,0,0-2.79,1.13l-45.7,44.33a12,12,0,0,0,2.06,18.62c19.88,12.71,44.13,10,62.66-6.81L194,152.33Zm85-71.25a4,4,0,0,1-2,2.32l-24,12L188.68,72.43l24-12A4,4,0,0,1,218,62.22l25.53,51.05A4,4,0,0,1,243.79,116.32ZM127.94,217a4,4,0,0,1-3.88,3,4.09,4.09,0,0,1-1-.12L81.38,209.45a4,4,0,0,1-1.36-.62L53.68,190a4,4,0,0,1,4.65-6.51l25.72,18.37,41,10.25A4,4,0,0,1,127.94,217Z"></path></svg>
<span class="box__hl"><h3>Prověřování dodavatelů</h3></span><p>Posouzení bezpečnosti dodavatelů s přístupem k vašim systémům nebo datům, jak ho požadují NZKB i DORA.</p><svg aria-hidden="true" class="box__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg><span class="box__odkaz">Více o prověřování</span></a>
</div>
</div>
</section></main>

Pro koho pracujeme

Vlevo svislé přepínatelné záložky oborů, vpravo panel s ikonou, štítkem standardu, nadpisem, textem a tlačítkem. Třídy: pk3, sv, sv__tab, sv__panel, sv__std.

HTML kód
<main><section class="pk3 pk3--svetla" id="pro-koho">
<div class="w">
<div class="jak__hlava"><h2>Pro koho pracujeme</h2><p>Máme praxi v telekomunikacích, financích, automotive a IT. Pomáháme organizacím, na které dopadají konkrétní standardy a regulace.</p></div>
<div class="sv" data-sv="" role="tablist">
<button aria-controls="financni-sektor-panel" aria-selected="true" class="sv__tab" id="financni-sektor" role="tab" type="button"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M24,100H52v72H32a4,4,0,0,0,0,8H224a4,4,0,0,0,0-8H204V100h28a4,4,0,0,0,2.1-7.41l-104-64a4,4,0,0,0-4.2,0l-104,64A4,4,0,0,0,24,100Zm36,0h40v72H60Zm88,0v72H108V100Zm48,72H156V100h40ZM128,36.7,217.87,92H38.13ZM244,208a4,4,0,0,1-4,4H16a4,4,0,0,1,0-8H240A4,4,0,0,1,244,208Z"></path></svg>
<span>Finanční sektor</span><svg aria-hidden="true" class="sv__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button>
<div aria-labelledby="financni-sektor" class="sv__panel" id="financni-sektor-panel" role="tabpanel"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M24,100H52v72H32a4,4,0,0,0,0,8H224a4,4,0,0,0,0-8H204V100h28a4,4,0,0,0,2.1-7.41l-104-64a4,4,0,0,0-4.2,0l-104,64A4,4,0,0,0,24,100Zm36,0h40v72H60Zm88,0v72H108V100Zm48,72H156V100h40ZM128,36.7,217.87,92H38.13ZM244,208a4,4,0,0,1-4,4H16a4,4,0,0,1,0-8H240A4,4,0,0,1,244,208Z"></path></svg>
<p class="sv__std">DORA · ISO 27001</p><h3>Finanční sektor</h3><p>Banky, pojišťovny, investiční společnosti a další finanční subjekty, které musí řídit ICT rizika, hlásit incidenty a testovat digitální provozní odolnost.</p><a class="btn" href="#">Nezávazná poptávka</a></div>
<button aria-controls="automotive-panel" aria-selected="false" class="sv__tab" id="automotive" role="tab" type="button"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M240,108H226.6L197.77,43.13a12,12,0,0,0-11-7.13H69.2a12,12,0,0,0-11,7.13L29.4,108H16a4,4,0,0,0,0,8H28v84a12,12,0,0,0,12,12H64a12,12,0,0,0,12-12V180H180v20a12,12,0,0,0,12,12h24a12,12,0,0,0,12-12V116h12a4,4,0,0,0,0-8ZM65.54,46.38A4,4,0,0,1,69.2,44H186.8a4,4,0,0,1,3.66,2.38L217.84,108H38.16ZM68,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V180H68Zm148,4H192a4,4,0,0,1-4-4V180h32v20A4,4,0,0,1,216,204Zm4-32H36V116H220ZM60,144a4,4,0,0,1,4-4H80a4,4,0,0,1,0,8H64A4,4,0,0,1,60,144Zm112,0a4,4,0,0,1,4-4h16a4,4,0,0,1,0,8H176A4,4,0,0,1,172,144Z"></path></svg>
<span>Automotive</span><svg aria-hidden="true" class="sv__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button>
<div aria-labelledby="automotive" class="sv__panel" hidden="" id="automotive-panel" role="tabpanel"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M240,108H226.6L197.77,43.13a12,12,0,0,0-11-7.13H69.2a12,12,0,0,0-11,7.13L29.4,108H16a4,4,0,0,0,0,8H28v84a12,12,0,0,0,12,12H64a12,12,0,0,0,12-12V180H180v20a12,12,0,0,0,12,12h24a12,12,0,0,0,12-12V116h12a4,4,0,0,0,0-8ZM65.54,46.38A4,4,0,0,1,69.2,44H186.8a4,4,0,0,1,3.66,2.38L217.84,108H38.16ZM68,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V180H68Zm148,4H192a4,4,0,0,1-4-4V180h32v20A4,4,0,0,1,216,204Zm4-32H36V116H220ZM60,144a4,4,0,0,1,4-4H80a4,4,0,0,1,0,8H64A4,4,0,0,1,60,144Zm112,0a4,4,0,0,1,4-4h16a4,4,0,0,1,0,8H176A4,4,0,0,1,172,144Z"></path></svg>
<p class="sv__std">TISAX</p><h3>Automotive</h3><p>Dodavatelé automobilek, po kterých odběratelé chtějí výsledek hodnocení informační bezpečnosti TISAX.</p><a class="btn" href="#">Nezávazná poptávka</a></div>
<button aria-controls="povinne-osoby-panel" aria-selected="false" class="sv__tab" id="povinne-osoby" role="tab" type="button"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M235.71,134.51l-32-80h0a4,4,0,0,0-4.57-2.41L132,67V40a4,4,0,0,0-8,0V68.79L55.13,84.1a4,4,0,0,0-2.84,2.41h0v0h0l-32,80A4,4,0,0,0,20,168c0,20.4,22.08,28,36,28s36-7.6,36-28a4,4,0,0,0-.29-1.49L61.46,90.88,124,77V212H104a4,4,0,0,0,0,8h48a4,4,0,0,0,0-8H132V75.21l61.47-13.66-29.18,73A4,4,0,0,0,164,136c0,20.4,22.08,28,36,28s36-7.6,36-28A4,4,0,0,0,235.71,134.51ZM56,188c-7.15,0-27.37-3.56-28-19.27l28-70,28,70C83.37,184.44,63.15,188,56,188Zm144-32c-7.15,0-27.37-3.56-28-19.27l28-70,28,70C227.37,152.44,207.15,156,200,156Z"></path></svg>
<span>Povinné osoby podle NZKB</span><svg aria-hidden="true" class="sv__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button>
<div aria-labelledby="povinne-osoby" class="sv__panel" hidden="" id="povinne-osoby-panel" role="tabpanel"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M235.71,134.51l-32-80h0a4,4,0,0,0-4.57-2.41L132,67V40a4,4,0,0,0-8,0V68.79L55.13,84.1a4,4,0,0,0-2.84,2.41h0v0h0l-32,80A4,4,0,0,0,20,168c0,20.4,22.08,28,36,28s36-7.6,36-28a4,4,0,0,0-.29-1.49L61.46,90.88,124,77V212H104a4,4,0,0,0,0,8h48a4,4,0,0,0,0-8H132V75.21l61.47-13.66-29.18,73A4,4,0,0,0,164,136c0,20.4,22.08,28,36,28s36-7.6,36-28A4,4,0,0,0,235.71,134.51ZM56,188c-7.15,0-27.37-3.56-28-19.27l28-70,28,70C83.37,184.44,63.15,188,56,188Zm144-32c-7.15,0-27.37-3.56-28-19.27l28-70,28,70C227.37,152.44,207.15,156,200,156Z"></path></svg>
<p class="sv__std">NZKB</p><h3>Povinné osoby podle NZKB</h3><p>Firmy a instituce, které jsou podle nového zákona o kybernetické bezpečnosti povinnými osobami a musí zavést bezpečnostní opatření.</p><a class="btn" href="#">Nezávazná poptávka</a></div>
<button aria-controls="telekomunikace-a-it-panel" aria-selected="false" class="sv__tab" id="telekomunikace-a-it" role="tab" type="button"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M208,140H48a12,12,0,0,0-12,12v48a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V152A12,12,0,0,0,208,140Zm4,60a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V152a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM208,44H48A12,12,0,0,0,36,56v48a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V56A12,12,0,0,0,208,44Zm4,60a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-24,72a8,8,0,1,1-8-8A8,8,0,0,1,188,176Zm0-96a8,8,0,1,1-8-8A8,8,0,0,1,188,80Z"></path></svg>
<span>Telekomunikace a IT</span><svg aria-hidden="true" class="sv__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button>
<div aria-labelledby="telekomunikace-a-it" class="sv__panel" hidden="" id="telekomunikace-a-it-panel" role="tabpanel"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M208,140H48a12,12,0,0,0-12,12v48a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V152A12,12,0,0,0,208,140Zm4,60a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V152a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM208,44H48A12,12,0,0,0,36,56v48a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V56A12,12,0,0,0,208,44Zm4,60a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-24,72a8,8,0,1,1-8-8A8,8,0,0,1,188,176Zm0-96a8,8,0,1,1-8-8A8,8,0,0,1,188,80Z"></path></svg>
<p class="sv__std">ISO 27001 · CIS CSC</p><h3>Telekomunikace a IT</h3><p>Poskytovatelé sítí, cloudových a IT služeb, kteří potřebují doložit bezpečnost zákazníkům i regulátorovi.</p><a class="btn" href="#">Nezávazná poptávka</a></div>
<button aria-controls="vyrobci-produktu-panel" aria-selected="false" class="sv__tab" id="vyrobci-produktu" role="tab" type="button"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M221.76,69.66l-88-48.18a12,12,0,0,0-11.52,0l-88,48.18A12,12,0,0,0,28,80.18v95.64a12,12,0,0,0,6.24,10.52l88,48.18a11.95,11.95,0,0,0,11.52,0l88-48.18A12,12,0,0,0,228,175.82V80.18A12,12,0,0,0,221.76,69.66ZM126.08,28.5a3.94,3.94,0,0,1,3.84,0L216.67,76,178.5,96.89a4,4,0,0,0-.58-.4l-88-48.18Zm1.92,96L39.33,76,81.56,52.87l88.67,48.54Zm-89.92,54.8a4,4,0,0,1-2.08-3.5V83.29l88,48.16v94.91Zm179.84,0h0l-85.92,47V131.45l40-21.89V152a4,4,0,0,0,8,0V105.18l40-21.89v92.53A4,4,0,0,1,217.92,179.32Z"></path></svg>
<span>Výrobci digitálních produktů</span><svg aria-hidden="true" class="sv__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button>
<div aria-labelledby="vyrobci-produktu" class="sv__panel" hidden="" id="vyrobci-produktu-panel" role="tabpanel"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M221.76,69.66l-88-48.18a12,12,0,0,0-11.52,0l-88,48.18A12,12,0,0,0,28,80.18v95.64a12,12,0,0,0,6.24,10.52l88,48.18a11.95,11.95,0,0,0,11.52,0l88-48.18A12,12,0,0,0,228,175.82V80.18A12,12,0,0,0,221.76,69.66ZM126.08,28.5a3.94,3.94,0,0,1,3.84,0L216.67,76,178.5,96.89a4,4,0,0,0-.58-.4l-88-48.18Zm1.92,96L39.33,76,81.56,52.87l88.67,48.54Zm-89.92,54.8a4,4,0,0,1-2.08-3.5V83.29l88,48.16v94.91Zm179.84,0h0l-85.92,47V131.45l40-21.89V152a4,4,0,0,0,8,0V105.18l40-21.89v92.53A4,4,0,0,1,217.92,179.32Z"></path></svg>
<p class="sv__std">CRA · AI Act</p><h3>Výrobci digitálních produktů</h3><p>Výrobci hardwaru a softwaru, na které dopadají nové evropské požadavky na kybernetickou odolnost produktů a na umělou inteligenci.</p><a class="btn" href="#">Nezávazná poptávka</a></div>
<button aria-controls="organizace-s-daty-panel" aria-selected="false" class="sv__tab" id="organizace-s-daty" role="tab" type="button"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M208,44H48A12,12,0,0,0,36,56v56c0,51.16,24.73,82.12,45.47,99.1,22.4,18.32,44.55,24.5,45.48,24.76a4,4,0,0,0,2.1,0c.93-.26,23.08-6.44,45.48-24.76,20.74-17,45.47-47.94,45.47-99.1V56A12,12,0,0,0,208,44Zm4,68c0,38.44-14.23,69.63-42.29,92.71A132.45,132.45,0,0,1,128,227.82a132.23,132.23,0,0,1-41.71-23.11C58.23,181.63,44,150.44,44,112V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-41.17-10.83a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17Z"></path></svg>
<span>Každá organizace s daty</span><svg aria-hidden="true" class="sv__sip" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></button>
<div aria-labelledby="organizace-s-daty" class="sv__panel" hidden="" id="organizace-s-daty-panel" role="tabpanel"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M208,44H48A12,12,0,0,0,36,56v56c0,51.16,24.73,82.12,45.47,99.1,22.4,18.32,44.55,24.5,45.48,24.76a4,4,0,0,0,2.1,0c.93-.26,23.08-6.44,45.48-24.76,20.74-17,45.47-47.94,45.47-99.1V56A12,12,0,0,0,208,44Zm4,68c0,38.44-14.23,69.63-42.29,92.71A132.45,132.45,0,0,1,128,227.82a132.23,132.23,0,0,1-41.71-23.11C58.23,181.63,44,150.44,44,112V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-41.17-10.83a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17Z"></path></svg>
<p class="sv__std">GDPR · ISO 22301</p><h3>Každá organizace s daty</h3><p>Organizace, které zpracovávají osobní údaje, potřebují je zabezpečit a mít připravený postup pro výpadek nebo incident.</p><a class="btn" href="#">Nezávazná poptávka</a></div>
</div>
</div>
</section></main>

Standardy a regulace

Mřížka dlaždic standardů s typem předpisu, názvem a šipkou, oddělená tenkými linkami. Třídy: std4, std4__mriz, std4__b, std4__typ.

HTML kód
<main><section class="sec std4" id="standardy">
<div class="w">
<div class="hlava"><h2>Standardy a regulace</h2><p>Vůči nim i vůči vašim interním předpisům děláme GAP analýzy a interní audity. <a href="#">Přehled standardů</a></p></div>
<div class="std4__mriz">
<a class="std4__b" href="#"><span class="std4__typ">Mezinárodní norma</span><b>ISO 27001</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Zákon č. 264/2025 Sb.</span><b>NZKB</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Nařízení EU</span><b>DORA</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Nařízení EU</span><b>GDPR</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Automotive</span><b>TISAX</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Mezinárodní norma</span><b>ISO 22301</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Dobrá praxe</span><b>CIS Controls</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Nařízení EU</span><b>CRA</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Nařízení EU</span><b>AI Act</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
<a class="std4__b" href="#"><span class="std4__typ">Nařízení EU</span><b>Data Act</b><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a>
</div>
</div>
</section></main>

Jak pracujeme

Tmavý pás s fotkou pod gradientem a čtyřmi číslovanými kroky s čárkovanou azurovou linkou. Třídy: jak jak--tma, jak__foto, jak__hlava, jak__kroky, jak__krok, jak__cis.

HTML kód
<main><section class="jak jak--tma" id="postup">
<img alt="" class="jak__foto" height="490" sizes="100vw" src="assets/foto/pas-sal.webp" srcset="assets/foto/pas-sal.webp 2400w" width="2400"/>
<div class="w jak__in">
<div class="jak__hlava"><h2>Jak pracujeme</h2><p>Od zjištění současného stavu po ověření, že nastavená opatření opravdu fungují.</p></div>
<ol class="jak__kroky">
<li><div class="jak__krok"><span aria-hidden="true" class="jak__cis"></span><h3>Analýza současného stavu</h3><p>Porovnáme současný stav s vybraným vzorem: standardem, regulací nebo interním předpisem.</p></div></li>
<li><div class="jak__krok"><span aria-hidden="true" class="jak__cis"></span><h3>Návrh řešení</h3><p>Ke každému zjištěnému nesouladu navrhneme opatření v procesech i v podpůrných nástrojích.</p></div></li>
<li><div class="jak__krok"><span aria-hidden="true" class="jak__cis"></span><h3>Podpora zavedení</h3><p>Pomůžeme opatření zavést, upravit procesy a připravit směrnice a pravidla.</p></div></li>
<li><div class="jak__krok"><span aria-hidden="true" class="jak__cis"></span><h3>Ověření a audit</h3><p>Interním auditem ověříme, že opatření fungují, a podle potřeby je aktualizujeme.</p></div></li>
</ol>
</div>
</section></main>

Časté dotazy

Vlevo nadpis s kontaktem, vpravo rozbalovací otázky s plusem. Třídy: std3, std3__in, std3__tx, std3__kontakt, faq2, faq2__ic, faq2__a.

HTML kód
<main><section class="sec std3" id="dotazy">
<div class="w std3__in">
<div class="std3__tx">
<h2>Časté dotazy</h2>
<p>Nenašli jste odpověď? Zavolejte nebo napište, co potřebujete vyřešit.</p>
<p class="std3__kontakt"><a href="#">+420 603 415 521</a><a href="#">jan.sedivy@holixys.cz</a></p>
</div>
<div class="faq3__seznam" data-rozbal="">
<details class="faq2" open=""><summary><h3>Co je GAP analýza?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Porovnání současného stavu vaší organizace s požadavky vybraného vzoru, třeba normy ISO 27001, zákona o kybernetické bezpečnosti nebo nařízení DORA. Výsledkem je přehled nesouladů a návrh, jak je odstranit.</p></div></details>
<details class="faq2"><summary><h3>Týká se nás nový zákon o kybernetické bezpečnosti?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Záleží na oboru a velikosti organizace. Prověříme, jestli jste povinnou osobou a v jakém režimu povinností, a připravíme plán opatření. Podrobnosti najdete na stránce <a href="#">NZKB</a>.</p></div></details>
<details class="faq2"><summary><h3>Pomůžete nám s certifikací ISO 27001?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Certifikát vydává akreditovaný certifikační orgán, ne poradce. My vás na certifikační audit připravíme: GAP analýzou, návrhem a zavedením opatření a interním auditem, který norma vyžaduje.</p></div></details>
<details class="faq2"><summary><h3>Nemáme vlastního interního auditora. Pomůžete?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ano. Interní audit vůči vybraným bezpečnostním požadavkům provedeme za vás. Je určený právě organizacím, které nemají vlastní interní auditory nebo potřebnou odbornost.</p></div></details>
<details class="faq2"><summary><h3>Děláte i phishing testy a penetrační testy?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ano. Interními zdroji nebo s prověřenými partnery zajistíme jednorázové i pravidelné phishing testy, školení uživatelů, skeny zranitelností, penetrační testy a prověřování dodavatelů.</p></div></details>
<details class="faq2"><summary><h3>Máte pojištění odpovědnosti?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ano. Platnost pojištění ověříte na <a href="#" rel="noopener" target="_blank">pečeti exali</a>.</p></div></details>
</div>
</div>
</section></main>

Karty předpisů

Mřížka karet s ikonou, štítkem, popisem a odkazem; poslední karty jsou výzva a vlastní předpisy. Třídy: karty, karta, ik, mal, odkaz.

HTML kód
<main><section class="sec"><div class="w"><div class="karty">
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M124,136a4,4,0,0,1-4,4H72a4,4,0,0,1,0-8h48A4,4,0,0,1,124,136Zm-4-36H72a4,4,0,0,0,0,8h48a4,4,0,0,0,0-8Zm108,59.74V224a4,4,0,0,1-6,3.47l-26-14.86-26,14.86a4,4,0,0,1-6-3.47V196H40a12,12,0,0,1-12-12V56A12,12,0,0,1,40,44H216a12,12,0,0,1,12,12V88.26a47.92,47.92,0,0,1,0,71.48ZM196,84a40,40,0,1,0,40,40A40,40,0,0,0,196,84ZM164,188V159.74a48,48,0,0,1,56-77.28V56a4,4,0,0,0-4-4H40a4,4,0,0,0-4,4V184a4,4,0,0,0,4,4Zm56-22.46a47.81,47.81,0,0,1-48,0v51.57l22-12.58a4,4,0,0,1,4,0l22,12.58Z"></path></svg>
<p class="mal">ISO 27001</p><p>Mezinárodní norma pro systém řízení bezpečnosti informací (ISMS).</p><span class="odkaz mal">Více o ISO 27001</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M235.71,134.51l-32-80h0a4,4,0,0,0-4.57-2.41L132,67V40a4,4,0,0,0-8,0V68.79L55.13,84.1a4,4,0,0,0-2.84,2.41h0v0h0l-32,80A4,4,0,0,0,20,168c0,20.4,22.08,28,36,28s36-7.6,36-28a4,4,0,0,0-.29-1.49L61.46,90.88,124,77V212H104a4,4,0,0,0,0,8h48a4,4,0,0,0,0-8H132V75.21l61.47-13.66-29.18,73A4,4,0,0,0,164,136c0,20.4,22.08,28,36,28s36-7.6,36-28A4,4,0,0,0,235.71,134.51ZM56,188c-7.15,0-27.37-3.56-28-19.27l28-70,28,70C83.37,184.44,63.15,188,56,188Zm144-32c-7.15,0-27.37-3.56-28-19.27l28-70,28,70C227.37,152.44,207.15,156,200,156Z"></path></svg>
<p class="mal">NZKB</p><p>Zákon č. 264/2025 Sb. o kybernetické bezpečnosti, kterým Česko zavádí evropskou směrnici NIS2.</p><span class="odkaz mal">Více o NZKB</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M208,44H48A12,12,0,0,0,36,56v56c0,51.16,24.73,82.12,45.47,99.1,22.4,18.32,44.55,24.5,45.48,24.76a4,4,0,0,0,2.1,0c.93-.26,23.08-6.44,45.48-24.76,20.74-17,45.47-47.94,45.47-99.1V56A12,12,0,0,0,208,44Zm4,68c0,38.44-14.23,69.63-42.29,92.71A132.45,132.45,0,0,1,128,227.82a132.23,132.23,0,0,1-41.71-23.11C58.23,181.63,44,150.44,44,112V56a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-41.17-10.83a4,4,0,0,1,0,5.66l-56,56a4,4,0,0,1-5.66,0l-24-24a4,4,0,0,1,5.66-5.66L112,154.34l53.17-53.17A4,4,0,0,1,170.83,101.17Z"></path></svg>
<p class="mal">GDPR</p><p>Obecné nařízení EU o ochraně osobních údajů, včetně zabezpečení a hlášení porušení.</p><span class="odkaz mal">Více o GDPR</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M220,128a4,4,0,0,1-4,4H128a4,4,0,0,1,0-8h88A4,4,0,0,1,220,128ZM128,68h88a4,4,0,0,0,0-8H128a4,4,0,0,0,0,8Zm88,120H128a4,4,0,0,0,0,8h88a4,4,0,0,0,0-8ZM85.17,45.17,56,74.34,42.83,61.17a4,4,0,0,0-5.66,5.66l16,16a4,4,0,0,0,5.66,0l32-32a4,4,0,0,0-5.66-5.66Zm0,64L56,138.34,42.83,125.17a4,4,0,1,0-5.66,5.66l16,16a4,4,0,0,0,5.66,0l32-32a4,4,0,0,0-5.66-5.66Zm0,64L56,202.34,42.83,189.17a4,4,0,0,0-5.66,5.66l16,16a4,4,0,0,0,5.66,0l32-32a4,4,0,0,0-5.66-5.66Z"></path></svg>
<p class="mal">CIS Controls</p><p>CIS Critical Security Controls v8.1: 18 oblastí technických bezpečnostních opatření.</p><span class="odkaz mal">Více o CIS Controls</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M220,48V96a4,4,0,0,1-4,4H168a4,4,0,0,1,0-8h38.34L184.89,70.54A84,84,0,0,0,66.8,69.85a4,4,0,1,1-5.6-5.72,92,92,0,0,1,129.34.76L212,86.34V48a4,4,0,0,1,8,0ZM189.2,186.15a83.44,83.44,0,0,1-58.68,23.91h-.47a83.52,83.52,0,0,1-58.94-24.6L49.66,164H88a4,4,0,0,0,0-8H40a4,4,0,0,0-4,4v48a4,4,0,0,0,8,0V169.66l21.46,21.45A91.43,91.43,0,0,0,130,218.06h.51a91.45,91.45,0,0,0,64.28-26.19,4,4,0,1,0-5.6-5.72Z"></path></svg>
<p class="mal">ISO 22301</p><p>Mezinárodní norma pro systém řízení kontinuity činností organizace.</p><span class="odkaz mal">Více o ISO 22301</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M24,100H52v72H32a4,4,0,0,0,0,8H224a4,4,0,0,0,0-8H204V100h28a4,4,0,0,0,2.1-7.41l-104-64a4,4,0,0,0-4.2,0l-104,64A4,4,0,0,0,24,100Zm36,0h40v72H60Zm88,0v72H108V100Zm48,72H156V100h40ZM128,36.7,217.87,92H38.13ZM244,208a4,4,0,0,1-4,4H16a4,4,0,0,1,0-8H240A4,4,0,0,1,244,208Z"></path></svg>
<p class="mal">DORA</p><p>Nařízení EU o digitální provozní odolnosti finančního sektoru.</p><span class="odkaz mal">Více o DORA</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M186.83,162.83a4,4,0,0,1-5.66,0L156,137.66V208a4,4,0,0,1-8,0V137.66l-25.17,25.17a4,4,0,0,1-5.66-5.66l32-32a4,4,0,0,1,5.66,0l32,32A4,4,0,0,1,186.83,162.83ZM160,44A84.09,84.09,0,0,0,83.61,93.13,60,60,0,1,0,72,212h40a4,4,0,0,0,0-8H72a52,52,0,1,1,8.57-103.27A83.45,83.45,0,0,0,76,128a4,4,0,0,0,8,0,76,76,0,1,1,106.4,69.68,4,4,0,0,0,1.6,7.66,3.92,3.92,0,0,0,1.6-.33A84,84,0,0,0,160,44Z"></path></svg>
<p class="mal">Data Act</p><p>Nařízení EU o přístupu k datům z propojených výrobků a přechodu mezi cloudy.</p><span class="odkaz mal">Více o Data Act</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M240,108H226.6L197.77,43.13a12,12,0,0,0-11-7.13H69.2a12,12,0,0,0-11,7.13L29.4,108H16a4,4,0,0,0,0,8H28v84a12,12,0,0,0,12,12H64a12,12,0,0,0,12-12V180H180v20a12,12,0,0,0,12,12h24a12,12,0,0,0,12-12V116h12a4,4,0,0,0,0-8ZM65.54,46.38A4,4,0,0,1,69.2,44H186.8a4,4,0,0,1,3.66,2.38L217.84,108H38.16ZM68,200a4,4,0,0,1-4,4H40a4,4,0,0,1-4-4V180H68Zm148,4H192a4,4,0,0,1-4-4V180h32v20A4,4,0,0,1,216,204Zm4-32H36V116H220ZM60,144a4,4,0,0,1,4-4H80a4,4,0,0,1,0,8H64A4,4,0,0,1,60,144Zm112,0a4,4,0,0,1,4-4h16a4,4,0,0,1,0,8H176A4,4,0,0,1,172,144Z"></path></svg>
<p class="mal">TISAX</p><p>Hodnocení informační bezpečnosti v automobilovém průmyslu podle katalogu VDA ISA.</p><span class="odkaz mal">Více o TISAX</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M221.76,69.66l-88-48.18a12,12,0,0,0-11.52,0l-88,48.18A12,12,0,0,0,28,80.18v95.64a12,12,0,0,0,6.24,10.52l88,48.18a11.95,11.95,0,0,0,11.52,0l88-48.18A12,12,0,0,0,228,175.82V80.18A12,12,0,0,0,221.76,69.66ZM126.08,28.5a3.94,3.94,0,0,1,3.84,0L216.67,76,178.5,96.89a4,4,0,0,0-.58-.4l-88-48.18Zm1.92,96L39.33,76,81.56,52.87l88.67,48.54Zm-89.92,54.8a4,4,0,0,1-2.08-3.5V83.29l88,48.16v94.91Zm179.84,0h0l-85.92,47V131.45l40-21.89V152a4,4,0,0,0,8,0V105.18l40-21.89v92.53A4,4,0,0,1,217.92,179.32Z"></path></svg>
<p class="mal">CRA</p><p>Nařízení EU o kybernetické odolnosti produktů s digitálními prvky.</p><span class="odkaz mal">Více o CRA</span></a>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M196.2,132.81l-53.36-19.65L123.19,59.8a11.93,11.93,0,0,0-22.38,0L81.16,113.16,27.8,132.81a11.93,11.93,0,0,0,0,22.38l53.36,19.65,19.65,53.36a11.93,11.93,0,0,0,22.38,0l19.65-53.36,53.36-19.65a11.93,11.93,0,0,0,0-22.38Zm-2.77,14.87L138.35,168a4,4,0,0,0-2.37,2.37l-20.3,55.08a3.92,3.92,0,0,1-7.36,0L88,170.35A4,4,0,0,0,85.65,168l-55.08-20.3a3.92,3.92,0,0,1,0-7.36L85.65,120A4,4,0,0,0,88,117.65l20.3-55.08a3.92,3.92,0,0,1,7.36,0L136,117.65a4,4,0,0,0,2.37,2.37l55.08,20.3a3.92,3.92,0,0,1,0,7.36ZM148,40a4,4,0,0,1,4-4h20V16a4,4,0,0,1,8,0V36h20a4,4,0,0,1,0,8H180V64a4,4,0,0,1-8,0V44H152A4,4,0,0,1,148,40Zm96,48a4,4,0,0,1-4,4H228v12a4,4,0,0,1-8,0V92H208a4,4,0,0,1,0-8h12V72a4,4,0,0,1,8,0V84h12A4,4,0,0,1,244,88Z"></path></svg>
<p class="mal">AI Act</p><p>Nařízení EU o umělé inteligenci, včetně změn přijatých v roce 2026.</p><span class="odkaz mal">Více o AI Act</span></a>
<div class="karta"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M232,52H160a36,36,0,0,0-32,19.54A36,36,0,0,0,96,52H24a4,4,0,0,0-4,4V200a4,4,0,0,0,4,4H96a28,28,0,0,1,28,28,4,4,0,0,0,8,0,28,28,0,0,1,28-28h72a4,4,0,0,0,4-4V56A4,4,0,0,0,232,52ZM96,196H28V60H96a28,28,0,0,1,28,28V209.4A35.93,35.93,0,0,0,96,196Zm132,0H160a35.94,35.94,0,0,0-28,13.41V88a28,28,0,0,1,28-28h68Z"></path></svg>
<p class="mal">Interní předpisy</p><p>Vaše vlastní bezpečnostní politiky, směrnice a pravidla.</p></div>
<a class="karta" href="#"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M224,52H32a4,4,0,0,0-4,4V192a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V56A4,4,0,0,0,224,52Zm-10.28,8L128,138.57,42.28,60ZM216,196H40a4,4,0,0,1-4-4V65.09L125.3,147a4,4,0,0,0,5.4,0L220,65.09V192A4,4,0,0,1,216,196Z"></path></svg>
<p class="mal">Jiný předpis?</p><p>Napište nám, který standard nebo regulaci potřebujete splnit.</p><span class="odkaz mal">Nezávazná poptávka</span></a>
</div></div></section></main>

Časová osa termínů

Vodorovná osa s azurovými tečkami, datem a popisem blížících se termínů. Třídy: osa, osa li::before.

HTML kód
<main><section class="sec"><div class="w"><ol class="osa">
<li><h3>Přelom 2026/2027</h3><p><a href="#">NZKB</a>: bezpečnostní opatření a hlášení incidentů se začínají plnit do 1 roku od rozhodnutí o registraci. U mnoha organizací tak lhůta končí na přelomu let.</p></li>
<li><h3>2. 12. 2026</h3><p><a href="#">AI Act</a>: nový zákaz generování nekonsenzuálního sexuálního obsahu a dětské pornografie; poskytovatelé generativních systémů uvedených na trh před 2. 8. 2026 plní povinnost označování výstupů.</p></li>
<li><h3>1. 1. 2027</h3><p><a href="#">TISAX</a>: posouzení objednaná od tohoto dne se dělají podle nového katalogu VDA ISA2027.</p></li>
<li><h3>12. 1. 2027</h3><p><a href="#">Data Act</a>: poskytovatelé cloudových služeb už nesmí účtovat poplatky za přechod k jinému poskytovateli.</p></li>
<li><h3>2. 12. 2027</h3><p><a href="#">AI Act</a>: povinnosti pro vysoce rizikové systémy umělé inteligence podle přílohy III.</p></li>
<li><h3>11. 12. 2027</h3><p><a href="#">CRA</a>: plná použitelnost nařízení o kybernetické odolnosti. Hlášení zneužívaných zranitelností a závažných incidentů platí už od 11. 9. 2026.</p></li>
</ol></div></section></main>

Řádky s překryvem předpisů

Číslovaný seznam řádků s pořadovým číslem, nadpisem dvojice předpisů a textem, oddělený linkami. Třídy: radky, mal.

HTML kód
<main><section class="sec sec--bez"><div class="w"><ol class="radky">
<li><span class="mal">01</span><h3>NZKB a DORA</h3><p>ČNB a NÚKIB vydaly 24. 6. 2026 společné prohlášení: u finančních subjektů mají požadavky DORA na řízení kybernetických rizik a hlášení incidentů zpravidla přednost, zákon se uplatní tam, kde DORA nic nestanoví. Hlavním dozorem nad finančním trhem je ČNB.</p></li>
<li><span class="mal">02</span><h3>NZKB a GDPR</h3><p>Hlášení kybernetického incidentu podle zákona o kybernetické bezpečnosti nenahrazuje oznámení porušení zabezpečení osobních údajů Úřadu pro ochranu osobních údajů. Když incident zasáhne osobní údaje, hlásí se obojí.</p></li>
<li><span class="mal">03</span><h3>NZKB a ISO 27001</h3><p>Vyhláška č. 409/2025 Sb. ukládá vedení povinných osob zajistit politiku bezpečnosti a cíle systému řízení bezpečnosti informací. Kdo má zavedený ISMS podle ISO/IEC 27001, má na co navázat.</p></li>
<li><span class="mal">04</span><h3>TISAX a ISO 27001</h3><p>Katalog VDA ISA, podle kterého se TISAX posuzuje, vychází z normy ISO/IEC 27001. Nový katalog ISA2027 se mapuje i na NIST CSF 2.0 a IEC 62443.</p></li>
<li><span class="mal">05</span><h3>CRA a NZKB</h3><p>Nařízení o kybernetické odolnosti platí přímo, bez převedení do českého práva. Podle NÚKIB se týká hlavně výrobců hardwaru a softwaru, z nichž někteří poskytují i regulované služby.</p></li>
</ol></div></section></main>

Mřížka úkonů

Mřížka dlaždic s číslem a nadpisem konkrétního úkonu, poslední dlaždice je tmavá výzva. Třídy: ukony, ukon, ukon__c, ukon--cta.

HTML kód
<main><section class="sec sec--bez"><div class="w"><ol class="ukony">
<li class="ukon"><span class="ukon__c">01</span><h3>Analýza současného stavu kybernetické bezpečnosti</h3></li>
<li class="ukon"><span class="ukon__c">02</span><h3>Identifikace bezpečnostních rizik a zranitelností</h3></li>
<li class="ukon"><span class="ukon__c">03</span><h3>Bezpečnostní audit IT infrastruktury a systémů</h3></li>
<li class="ukon"><span class="ukon__c">04</span><h3>Ochrana firemních dat a přístupových údajů</h3></li>
<li class="ukon"><span class="ukon__c">05</span><h3>Nastavení bezpečných přístupů a uživatelských oprávnění</h3></li>
<li class="ukon"><span class="ukon__c">06</span><h3>Bezpečnost webových aplikací a online služeb</h3></li>
<li class="ukon"><span class="ukon__c">07</span><h3>Ochrana firemních zařízení a koncových bodů</h3></li>
<li class="ukon"><span class="ukon__c">08</span><h3>Návrh bezpečnostních opatření a interních pravidel</h3></li>
<li class="ukon"><span class="ukon__c">09</span><h3>Školení a bezpečnostní povědomí zaměstnanců</h3></li>
<li class="ukon"><span class="ukon__c">10</span><h3>Postupy pro případ kybernetického incidentu</h3></li>
<li class="ukon"><span class="ukon__c">11</span><h3>Průběžné vyhodnocování a aktualizace opatření</h3></li>
<li class="ukon ukon--cta"><a href="#"><span>Nezávazná poptávka</span><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"></path></svg></a></li>
</ol></div></section></main>

Prvky

Tlačítka a odkaz

Plné navy tlačítko, bílé a obrysové tlačítko pro tmavé pozadí a textový odkaz. Třídy: btn, uvod__btn, uvod__btn--ram, odkaz.

HTML kód
<div style="display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:28px"><a class="btn" href="#">Nezávazná poptávka</a><span style="background:#001141;padding:24px;display:inline-flex;gap:14px"><a class="uvod__btn" href="#">Na úvodní stránku</a><a class="uvod__btn uvod__btn--ram" href="#">Naše služby</a></span><a class="odkaz" href="#">jan.sedivy@holixys.cz</a></div>

Obsah

Kontaktní karty

Tři boxy s ikonou a nadpisem: telefon, e-mail a údaje firmy s odkazem na pojištění. Třídy: kontakt2__boxy, box box--tx, k2__tel, k2__mail, k2__poj.

HTML kód
<main><section class="sec kontakt2"><div class="w"><div class="boxy kontakt2__boxy">
<div class="box box--tx"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M176,20H80A20,20,0,0,0,60,40V216a20,20,0,0,0,20,20h96a20,20,0,0,0,20-20V40A20,20,0,0,0,176,20ZM68,60H188V196H68ZM80,28h96a12,12,0,0,1,12,12V52H68V40A12,12,0,0,1,80,28Zm96,200H80a12,12,0,0,1-12-12V204H188v12A12,12,0,0,1,176,228Z"></path></svg>
<span class="box__hl"><h3>Telefon</h3></span><p><a class="k2__tel" href="#">+420 603 415 521</a><br/>Ing. Jan Šedivý, jednatel</p></div>
<div class="box box--tx"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M224,52H32a4,4,0,0,0-4,4V192a12,12,0,0,0,12,12H216a12,12,0,0,0,12-12V56A4,4,0,0,0,224,52Zm-10.28,8L128,138.57,42.28,60ZM216,196H40a4,4,0,0,1-4-4V65.09L125.3,147a4,4,0,0,0,5.4,0L220,65.09V192A4,4,0,0,1,216,196Z"></path></svg>
<span class="box__hl"><h3>E-mail</h3></span><p><a class="k2__mail" href="#">jan.sedivy@holixys.cz</a></p></div>
<div class="box box--tx"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M240,212H220V96a12,12,0,0,0-12-12H140V32a12,12,0,0,0-18.66-10l-80,53.33a12,12,0,0,0-5.34,10V212H16a4,4,0,0,0,0,8H240a4,4,0,0,0,0-8ZM208,92a4,4,0,0,1,4,4V212H140V92ZM44,85.34A4,4,0,0,1,45.78,82l80-53.33A4,4,0,0,1,132,32V212H44ZM108,112v16a4,4,0,0,1-8,0V112a4,4,0,0,1,8,0Zm-32,0v16a4,4,0,0,1-8,0V112a4,4,0,0,1,8,0Zm0,56v16a4,4,0,0,1-8,0V168a4,4,0,0,1,8,0Zm32,0v16a4,4,0,0,1-8,0V168a4,4,0,0,1,8,0Z"></path></svg>
<span class="box__hl"><h3>Holixys s.r.o.</h3></span><p><a href="#" rel="noopener" target="_blank">Staroholická 448, Staré Holice, 534 01 Holice</a></p><p>IČO 29878144<br/>DIČ CZ29878144, plátce DPH<br/>C 57318, Krajský soud v Hradci Králové</p><div class="k2__poj"><svg aria-hidden="true" class="ik" fill="currentColor" viewbox="0 0 256 256"><path d="M236,127A108.44,108.44,0,0,0,54.46,56.69,107.53,107.53,0,0,0,20,127a12,12,0,0,0,12,13h92v60a28,28,0,0,0,56,0,4,4,0,0,0-8,0,20,20,0,0,1-40,0V140h92a12,12,0,0,0,12-13ZM32,132a4,4,0,0,1-4-4.38,100.2,100.2,0,0,1,89.73-91.09C106,49.76,85.08,80.45,84,132Zm60,0c1.21-56,27.6-86.37,35.94-94.57C136.35,45.64,162.73,76,163.94,132Zm134.87-1.3a4,4,0,0,1-3,1.3H172c-1-51.55-22-82.24-33.7-95.47A100.2,100.2,0,0,1,228,127.62,4,4,0,0,1,226.93,130.7Z"></path></svg>
<p>Pojištění odpovědnosti<br/><a href="#" rel="noopener" target="_blank">pečeť exali</a></p></div></div>
</div></div></section></main>

Právní text s rozbalováním

Dva sloupce: vlevo nadpis a kontakt, vpravo právní obsah jako rozbalovací otázky. Třídy: dva, dva__l, dva__r, faq2, faq2__a.

HTML kód
<main><section class="sec sec--ram sec--bez"><div class="w"><div class="dva">
<div class="dva__l">
<p class="mal stit">Osobní údaje</p>
<h2 class="h2">Jak s údaji nakládáme</h2>
<p class="dva__p">S dotazy k osobním údajům nám pište na e-mail.</p>
<a class="odkaz tri__tel" href="#">security@holixys.cz</a>
</div>
<div class="dva__r" data-rozbal="">
<details class="faq2" open=""><summary><h3>Kdo vaše údaje zpracovává?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Správcem osobních údajů je Holixys s.r.o., IČO 29878144, se sídlem Staroholická 448, 534 01 Holice, zapsaná u Krajského soudu v Hradci Králové pod spisovou značkou C 57318.</p><p>S dotazy k osobním údajům nám pište na <a href="#">security@holixys.cz</a>.</p></div></details>
<details class="faq2"><summary><h3>Jaké údaje zpracováváme a proč?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Když nám pošlete poptávku přes formulář, zpracováváme vaše jméno a příjmení, název firmy, e-mail, telefon a text zprávy. Potřebujeme je, abychom vám mohli odpovědět a připravit nabídku. Právním základem je jednání o smlouvě, případně náš oprávněný zájem odpovědět na váš dotaz.</p><p>Server webu zaznamenává technické údaje o návštěvách, například IP adresu a čas přístupu. Slouží k zajištění provozu a bezpečnosti webu, právním základem je náš oprávněný zájem.</p></div></details>
<details class="faq2"><summary><h3>Jak dlouho údaje uchováváme?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Údaje z formuláře uchováváme po dobu vyřízení dotazu, nejdéle 1 rok. Pokud z poptávky vznikne zakázka, řídí se uchovávání smlouvou a zákonnými lhůtami.</p></div></details>
<details class="faq2"><summary><h3>Používá web cookies?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Ne. Web nepoužívá cookies ani analytické a marketingové nástroje, proto vás nežádá o souhlas.</p></div></details>
<details class="faq2"><summary><h3>Komu údaje předáváme?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Vaše údaje nikomu neprodáváme ani nepředáváme pro marketingové účely.</p></div></details>
<details class="faq2"><summary><h3>Jaká máte práva?</h3><span aria-hidden="true" class="faq2__ic"></span></summary><div class="faq2__a" data-obsah=""><p>Máte právo na přístup ke svým údajům, na jejich opravu nebo výmaz, na omezení zpracování, na přenositelnost údajů a právo vznést námitku proti zpracování.</p><p>Stačí nám napsat na <a href="#">security@holixys.cz</a>. Pokud máte pocit, že s údaji nenakládáme správně, můžete podat stížnost u <a href="#" rel="noopener" target="_blank">Úřadu pro ochranu osobních údajů</a>.</p></div></details>
</div>
</div></div></section></main>

Poptávkový formulář

Bílý formulář nezávazné poptávky s poli, vícenásobným výběrem služeb (details), poznámkou o souhlasu a tlačítkem. Třídy: k3__form, k3__g, k3__f, ms, ms__list, k3__btn.

HTML kód
<main><section class="k3" id="kontakt"><div class="w k3__in"><div><form class="k3__form" data-poptavka="" id="poptavka">
<h3 class="k3__h">Nezávazná poptávka</h3>
<p class="k3__err" data-err="1" hidden="">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněné údaje, nebo nám zavolejte.</p>
<input name="stranka" type="hidden" value=""/>
<input name="kontrola" type="hidden" value=""/>
<div aria-hidden="true" class="hp-field"><label for="k3-web">Web</label><input autocomplete="off" id="k3-web" name="web" tabindex="-1"/></div>
<div class="k3__g">
<div class="k3__f"><label for="k3-jmeno">Jméno a příjmení</label><input aria-describedby="k3-jmeno-err" autocomplete="name" data-msg="Vyplňte jméno a příjmení." id="k3-jmeno" name="jmeno" required=""/><p class="k3__ferr" hidden="" id="k3-jmeno-err"></p></div>
<div class="k3__f"><label for="k3-firma">Firma nebo organizace</label><input autocomplete="organization" id="k3-firma" name="firma"/></div>
<div class="k3__f"><label for="k3-email">Pracovní e-mail</label><input aria-describedby="k3-email-err" autocomplete="email" data-msg="Vyplňte e-mail." data-msg-format="Zkontrolujte e-mail, např. jmeno@firma.cz." id="k3-email" name="email" required="" type="email"/><p class="k3__ferr" hidden="" id="k3-email-err"></p></div>
<div class="k3__f"><label for="k3-telefon">Telefon</label><input aria-describedby="k3-telefon-err" autocomplete="tel" data-msg="Vyplňte telefon." data-msg-format="Zkontrolujte telefon, např. 777 123 456." id="k3-telefon" name="telefon" required="" type="tel"/><p class="k3__ferr" hidden="" id="k3-telefon-err"></p></div>
<div class="k3__f k3__f--cela"><span class="k3__lbl" id="k3-sluzby">S čím potřebujete pomoci</span><details class="ms"><summary aria-describedby="k3-sluzby">Vyberte služby</summary><div aria-labelledby="k3-sluzby" class="ms__list" role="group">
<label><input name="sluzby[]" type="checkbox" value="Konzultace a GAP analýza"/>Konzultace a GAP analýza</label>
<label><input name="sluzby[]" type="checkbox" value="Interní audit"/>Interní audit</label>
<label><input name="sluzby[]" type="checkbox" value="Phishing testy a školení uživatelů"/>Phishing testy a školení uživatelů</label>
<label><input name="sluzby[]" type="checkbox" value="Skeny zranitelností a penetrační testy"/>Skeny zranitelností a penetrační testy</label>
<label><input name="sluzby[]" type="checkbox" value="Prověřování dodavatelů"/>Prověřování dodavatelů</label>
<label><input name="sluzby[]" type="checkbox" value="Jiné"/>Jiné</label>
</div></details></div>
<div class="k3__f k3__f--cela"><label for="k3-zprava">Popis</label><textarea id="k3-zprava" name="zprava" placeholder="Řekněte nám, s čím vám můžeme pomoci. Například příprava na NZKB, DORA nebo TISAX." rows="5"></textarea></div>
</div>
<p class="k3__pozn">Odesláním souhlasíte se <a href="#">zpracováním údajů</a> pro vyřízení poptávky. Poptávka je nezávazná.</p>
<button class="k3__btn" type="submit">Odeslat poptávku</button>
</form></div></div></section></main>

Stránky na živém webu