Layout
Hero sekce
Velký blok přes celou šířku s nadpisem, krátkým textem a tlačítkem. Říká se mu také hero.
To první, co návštěvník na webu uvidí. V náhledu vidíte, kam se dostaneme.
Struktura
Hero sekce a obsah pod ní
Hero je oddíl section s nadpisem h1, jednou větou a dvěma odkazy. Pod ním je druhý oddíl se třemi výhodami.
Rozvržení
Vysoký blok, obsah přesně uprostřed
Blok bude vysoký aspoň 70 % okna. Grid s place-content: center pak obsah vycentruje vodorovně i svisle.
Svislé centrování bývalo v CSS strašák. S gridem stačí dva řádky.
Pozadí
Obrázek na pozadí
Obrázek nevložíme jako img, ale jako pozadí bloku. center ho vycentruje a cover zvětší tak, aby blok vždy celý zakryl.
Podívejte se na odkazy pod textem. Na tmavých horách skoro nejsou vidět.
Kontrast
Tmavá vrstva přes obrázek
Pozadí může mít víc vrstev oddělených čárkou. První vrstva je poloprůhledný tmavý gradient, pod ní je obrázek. Na ztmaveném obrázku je bílý text dobře čitelný.
Text na fotce musí být čitelný vždycky, i na její nejsvětlejší a nejpestřejší části.
Typografie
Nadpis, který roste s oknem
clamp(min, ideál, max) nastaví velikost písma podle šířky okna, ale nikdy pod minimum ani nad maximum.
6vw je 6 % šířky okna. Na desktopu narazí na strop 4rem, na telefonu na podlahu 2rem. Mezi tím plynule roste.
Tlačítka
Hlavní a vedlejší akce
Odkazy nastylujeme jako tlačítka a postavíme je vedle sebe. Hlavní akce je plná a červená, vedlejší jen obrysová, aby bylo jasné, kam klikat.
flex-wrap: wrap dovolí tlačítkům zalomit se na další řádek, když se vedle sebe nevejdou.
Pod blokem
Tři výhody vedle sebe
Pod hero sekcí pokračuje obsah v omezené šířce. Grid s auto-fit z lekce Grid karet poskládá výhody do sloupců.
Sjeďte v náhledu dolů pod hero sekci.
Responzivita
Na telefonu skoro samo
Nadpis se zmenšil díky clamp() a výhody jsou pod sebou díky auto-fit. Upravíme jen tlačítka: na telefonu budou přes celou šířku, aby se na ně dalo pohodlně ťuknout palcem.
Přepněte náhled na desktop klávesou M a sledujte, jak se nadpis zvětší.
Recept
Hero sekce v kostce
place-content: centervycentruje obsah ve všech směrechcoverzakryje blok obrázkem na každé obrazovce- tmavá vrstva zajistí čitelnost textu
clamp()zmenší nadpis bez media query