21 lines
1.3 KiB
Markdown
21 lines
1.3 KiB
Markdown
|
V rámci domácího úkolu ze teto lekce aplikuješ nově naučené poznatky a zopakuješ si učivo z předchozích lekcí – určení pozice, vnější odsazení a jiné. Úkolem bude upravit stávající stránku v CodePenu tak, aby splňovala příklad na obrázku a zadání níže. Úkol můžeš zpracovávat v CodePenu, ale doporučujeme vypracovat samostatně ve VS Code, abys sis procvičil/a vytvoření kostry HTML dokumentu a napojení CSS souboru.
|
|||
|
|
|
|||
|
|
Úkolem bude vytvořit prezentační webovou stránku ENGETA:
|
|||
|
|
|
|||
|
|
1. Třídě .header, .content, .article nastavíme vnitřní odsazení (padding).
|
|||
|
|
|
|||
|
|
2. Použitím media query vytvoříme bod zlomu pro šířku od 576px a víc.
|
|||
|
|
|
|||
|
|
3. Pro zařízení se šířkou do 576px (mobil) skryjeme třídu .heading-logo.
|
|||
|
|
|
|||
|
|
4. Pro zařízení se šířkou nad 576px a víc (desktop) změníme šířku třídy .content na 50% a vycentrujeme element pomoci margin: 0 auto.
|
|||
|
|
|
|||
|
|
5. Pro zařízení se šířkou nad 576px a víc (desktop) změníme šířku třídy .article na 50% a vycentrujeme element pomoci margin: 0 auto.
|
|||
|
|
|
|||
|
|
6. Pro zařízení se šířkou nad 576px a víc (desktop) změníme tříde .heading velkost fontu na 26px.
|
|||
|
|
|
|||
|
|
7. Třídě .image přidáme rámeček a zakulatíme mu rohy.
|
|||
|
|
|
|||
|
|
8. Přidáme tlačítko, které bude umístěné v dolním pravém rohu obrázku.
|
|||
|
|
|