CSS II

box model: Viditelně oddělte od sebe elementy nav, article, footer, header pomoci box model prvků (padding, border, margin).

float, clear: Vložte do úryvku mnohem více vygenerovaného textu (lorem ipsum). Stáhněte si libovolný obrázek, vložte ho do úryvku, vyzkoušejte si na něm různé způsoby obtékání obrázku textem.

position: Zkuste si různé nastavení pozice obrázku v úryvku (static, relative, absolute, fixed)

display: Označte pár po sobě jdoucích slov v úryvku tagem span. Zvýrazněte v něm barvu textu a zkuste si různé způsoby jeho zobrazení v rámci textu (none, inline, block, inline-block)

Flexbox: Do tagu header přidejte button s nápisem “Login”, zařiďte aby byl úplně vpravo. Zároveň zařiďte aby stávající tagy img a h1 byli úplně vlevo a vedle sebe. Challenge - zkuste vyřešit bez použití flexboxu (float, clear, position, atd.).

Responzivita: Zařiďte, aby se tagy nav a article zobrazovali dynamicky vedle sebe na desktopu, anebo pod sebou na smartphonu (@media)

Tisk: Vytvořte a nalinkujte nový soubor CSS stylu, který se aplikuje jen při tisku stránky <link media=…>