Text

Čas na malý projekt! V tomto miniprojektu sami nastylujete celou stránku. Použijete to, co jste se naučili v prvních třech lekcích: barvy, text, mezery a rozměry.

Cvičení tady vypadají trochu jinak než dosud. Popisují, jak má stránka vypadat, ne jaké třídy použít. K cíli obvykle vede víc cest, takže si vyberte třídy, které vám dávají smysl: kontroly se dívají na výsledek v náhledu, ne na vaše třídy. Když si nebudete vědět rady, podívejte se zpátky do lekce, kde jste se potřebné věci naučili.

Projekt. Web s recepty vás požádal o kartu se svým receptem na lívance. Ve třech cvičeních jí upravíte text, dáte jí mezery a nastavíte jí rozměry. Každé cvičení navazuje na to předchozí: editor začíná hotovou stránkou z předchozího kroku, jejíž třídy se můžou lišit od vašich. To nevadí. Měňte jen třídy, ne prvky: kontroly je hledají.

Nakonec bude karta vypadat takhle:

Text. V tomto cvičení dostane text barvy a vzhled:

• Stránka má světlé pozadí s nádechem barvy, třeba amber-50, a tmavě šedý text místo černého.
• Název receptu je velký (aspoň 36 px), tučný, v patkovém písmu a ve vlastní barvě, třeba tmavě oranžové nebo jantarové.
• Řádek nad názvem je malý štítek: nejvýš 14 px, velkými písmeny, s většími mezerami mezi písmeny a ve světlejší šedé než text.
• Nadpisy Suroviny a Postup jsou větší než text (aspoň 20 px) a tučné.
• Suroviny mají před sebou odrážky.

Tip: bez tříd seznam odrážky nemá. Vzpomeňte si na první lekci: odebral je Preflight a odrážky musí být uvnitř položek, aby byly vidět.