Žá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.
- 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
- .stranka – barva pozadí bílá, v dokumentu bude vycentrována, šířka stejná jako u obrázku header1.jpg
- Rozvrhněte stránku pomocí gridu takto:
-
Hlavička (záhlaví) |
Navigace |
Obsah |
Postranní panel |
Pata |
- šířka sloupců v poměru 1:4:1
-
výška řádků:
- hlavička – stejná jako výška header1.jpg
- pata – 30px
- navigace, obsah, postranní panel - auto
- <header> - umístit do oblasti Hlavička; obrázek na pozadí (header1.jpg), bez opakování, text vpravo, textu nastavené vhodné výplně
- <nav> – umístit do oblasti Navigace
- <main> – umístit do oblasti Obsah
- <aside> - umístit do oblasti Postranní panel; obsah vycentrovat (je možno orámovat obrázek)
- <footer> – text vycentrován a vhodně zmenšen, vhodně odlišena od ostatních prvků
- nav ul - vynulovat okraje, výplně, nezobrazovat odrážky
- 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
- datum bude zarovnán vpravo a bude kurzívou
- odstavce budou mít vynulované okraje, nastavenou výplň, řádkování a odsazení 1. řádku
- <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
- <h2> v <article> bude mít normální velikost, nebude tučně, font – Playpen Sans
- obrázek v hlavní části (main) bude vycentrován – použijeme :has()
- seznamy v hlavní části budou mít „roztažené“ řádky
- nespořádaný seznam bude mít odrážku čtvereček, uspořádaný malá písmena
- tabulka v hlavní části:
- bude mít nastaveny okraje
- způsob orámování – při sepparate i rozestup buněk (border-spacing)
- bude mít nastaveno orámování – jinou barvu a styl bude mít samotná tabulka a jinou buňky
- nastavíme výplň v buňkách
- 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)