Žádné zásahy do kódu dokumentu, vše jenom pomocí stylů (interního nebo externího) a uvedených selektorů a identifikátorů

Výchozí dokument.

  1. Nastavte celému dokumentu barvu pozadí, obrázek na pozadí (body-bg-svetle.png nebo body-bg-tmave.png), opakování obrázku, barvu vhodnou k pozadí, velikost a font písma – Poppins
  2. .stranka – barva pozadí bílá, v dokumentu bude vycentrována, šířka stejná jako u obrázku header1.jpg
  3. Rozvrhněte stránku pomocí gridu takto:
  4. <header> - umístit do oblasti Hlavička; obrázek na pozadí (header1.jpg), bez opakování, text vpravo, textu nastavené vhodné výplně
  5. <nav> – umístit do oblasti Navigace
  6. <main> – umístit do oblasti Obsah
  7. <aside> - umístit do oblasti Postranní panel; obsah vycentrovat (je možno orámovat obrázek)
  8. <footer> – text vycentrován a vhodně zmenšen, vhodně odlišena od ostatních prvků
  9. nav ul - vynulovat okraje, výplně, nezobrazovat odrážky
  10. nav li a - odkazy budou mít barvu rgb(206,0,88), odkaz bude reagovat po celé šířce řádku (vyplnit prostor položky seznamu – display: block), nastavit výplň tak, aby položky byly odděleny
  11. datum bude zarovnán vpravo a bude kurzívou
  12. odstavce budou mít vynulované okraje, nastavenou výplň, řádkování a odsazení 1. řádku
  13. <article> bude mít nastaveno vhodné okraje, bude orámován stejnou barvou jako odkaz v nadpisu, orámování bude dole a vpravo; můžeme zkusit zaoblit pravý dolní roh
  14. <h2> v <article> bude mít normální velikost, nebude tučně, font – Playpen Sans
  15. obrázek v hlavní části (main) bude vycentrován – použijeme :has()
  16. seznamy v hlavní části budou mít „roztažené“ řádky
  17. nespořádaný seznam bude mít odrážku čtvereček, uspořádaný malá písmena
  18. tabulka v hlavní části:
  19. nastavte odkazům nějaké zajímavé efekty (zkusíme barvy všech fakult: rgb(206,0,88) – PdF, rgb(0,159,223) – FIM, rgb(255,163,0) – PřF, rgb(132,189,0) – FF)