Záhlaví a úvodní sekce
Vítejte v závěrečném projektu kurzu Tailwindu! Teď už toho o Tailwindu víte dost na to, abyste sami upravili vzhled celého webu. A přesně to vás v této lekci čeká: domovská stránka Kočičího útulku Fousek, od záhlaví až po zápatí.
V editoru najdete stránku jako čisté HTML bez jediné třídy. Má záhlaví s navigací, úvodní sekci (section s id="uvod"), karty koček, kroky adopce, kontaktní formulář a zápatí. Na konci body je krátký skript tlačítka pro tmavý režim z lekce o tmavém režimu. Stránku upravíte ve čtyřech cvičeních, pokaždé jednu její část. Přidávejte jen třídy a prvky nechte, jak jsou: kontroly je hledají.
V souboru style.css jsme vám kromě @import "tailwindcss"; připravili, co stránka potřebuje: řádek, který zapíná tmavý režim třídou dark, a @theme s vlastní barvou útulku brand (skoro stejná oranžová jako orange-500, v odstínech 50, 100, 200, 400, 500, 600 a 700) a s písmem pro nadpisy font-display (Baloo 2 z Google Fonts, importované na prvním řádku). Můžete tedy psát bg-brand-500 nebo font-display, stejně jako v lekci o přizpůsobení Tailwindu. Chcete jinou barvu nebo písmo? Změňte je ve style.css a změní se s nimi celá stránka.
Nejdřív si vzhled naplánujte. Designéři si pár věcí rozmyslí předem, aby celá stránka vypadala jednotně:
- Barvy. Jedna hlavní barva pro tlačítka a zvýraznění (
brand), jedna šedá pro texty, čáry a pozadí (k oranžové se hodí teplástone) a bílá. Všude používejte stejných pár odstínů, třebabrand-500pro tlačítka abrand-600, když na ně návštěvník najede myší. - Velikosti. Jedna velká velikost písma pro hlavní nadpis, menší pro nadpisy sekcí (třeba
text-3xl) a běžná pro všechno ostatní. U mezer je to stejné: pár hodnot ze škály, třeba4,6a12, které se pořád opakují. - Šířky. Spousta návštěvníků přijde z telefonu. Navrhujte nejdřív pro úzkou obrazovku a pak přidejte, co se na širších změní. Lištou nad náhledem si občas přepněte na 375 px (telefon) a 1280 px (počítač).
Kontroly v této lekci jsou volné: ověřují, že jste udělali, co pokyn chce (třeba že se záhlaví drží nahoře a má pozadí), ne jaké třídy, barvy nebo velikosti jste zvolili. Třídy v pokynech jsou jen návrhy.
Tip: Když cvičení opustíte, váš kód se neuloží a další cvičení začne s naší verzí stránky. Jestli chcete pokračovat ve vlastním návrhu, zkopírujte si před přechodem dál svůj kód (oba soubory) a v dalším cvičení ho vložte místo našeho.
Jak psát:
Pokyny
Začněte celou stránkou: dejte prvku body barvu pozadí a barvu textu, třeba bg-stone-50 text-stone-800. Velmi tmavá šedá je pro oči příjemnější než čistá černá.
Na telefonu se tři odkazy (první div v nav) do navigace nevejdou. Tam je skryjte a od některého breakpointu výš je zobrazte v řadě s mezerami, třeba hidden gap-6 md:flex.
Udělejte z nav flex kontejner, který dá logo doleva a tlačítko 🌙 s odkazem Přispět doprava (flex justify-between) a všechno svisle vycentruje (items-center). Přidejte mu polstrování a na širokých obrazovkách maximální šířku uprostřed stránky: mx-auto max-w-5xl px-4 py-3. Logo, tlačítko 🌙 a odkaz Přispět upravte podle sebe.
Zařiďte, aby se header při posouvání stránky držel u horního kraje okna (sticky top-0). Třídou z-10 ho udržte nad zbytkem stránky: karty dostanou kvůli štítkům relative a umístěné prvky níž na stránce by ho jinak zakryly. A dejte mu pozadí, aby přes něj stránka neprosvítala, třeba bg-white/90.
Vycentrujte texty úvodní sekce (section s id="uvod") a zvětšete její nadpis: aspoň na 36 px (text-4xl), na širokých obrazovkách ještě víc (md:text-6xl). Dejte úvodní sekci i pozadí a velkorysé polstrování, třeba bg-brand-50 px-4 py-20 text-center.
Udělejte z odkazu „Seznamte se s kočkami“ tlačítko: dejte mu barvu pozadí, polstrování a zaoblené rohy, třeba mt-8 inline-block rounded-full bg-brand-500 px-6 py-3 font-semibold text-white. Odkaz je řádkový prvek a jeho polstrování nahoře a dole by od něj okolí neodsunulo. To spraví inline-block.
Začněte programovat zdarma
1/5