Výchozí dokument.

  1. Nastavit celému dokumentu
  2. Rozvrhněte stránku pomocí gridu takto:
  3. <header> - umístit do oblasti Hlavička
  4. <main> - umístit do oblasti Obsah
  5. <aside> - umístit do oblasti Panel
  6. <footer> - umístit do oblasti Pata
  7. text ve <footer> vycentrován a zmenšen, vhodně odlišena od ostatních prvků (např. orámováním nebo barvou pozadí)
  8. <header> - rozdělit svisle pomocí flex
  9. <div>, který je přímý potomek <header> (header > div): vynulovat okraje - margin: 0, výška 100px - height: 100px
  10. <img> v <header>: umístit vedle <h1> pomocí float, nastavit výšku a šířku na 100px, obrázek zobrazit jako kolečko
  11. <nav> - přípravné práce pro vodorovné zobrazení menu - výška – 30px, horní a dolní orámování – velikost 1px, souvislá čára barvy rgb(206,0,88)
  12. nav ul - vynulovat okraje, výplně, zobrazit jako flex, flexu povolit zalamování
  13. nav li - nezobrazovat odrážky, šířka každé položky 1/5 celkové šířky (neboli 20%)
  14. nav li a:
  15. nav li a: zrušit orámování poslední položky
  16. nastylujeme hamburger menu
  17. hamburger menu zrušíme zobrazení
  18. zmenšit obrázky v odkazy.html - ul.prohlizec img
  19. nastavit odstavcům
  20. responzivní vzhled od 601px do 800px - @media screen and (601px <= width <= 799px)
  21. zobrazení do šířky 600px - @media screen and (width <= 600px)
  22. Dodatek 1 - odkazy v menu „vyjíždějící“ podbarvení odkazu
  23. Dodatek 2 - „vyjíždějící“ podtržení u odkazů na stránce