1.3 KiB
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:
-
Třídě .header, .content, .article nastavíme vnitřní odsazení (padding).
-
Použitím media query vytvoříme bod zlomu pro šířku od 576px a víc.
-
Pro zařízení se šířkou do 576px (mobil) skryjeme třídu .heading-logo.
-
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.
-
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.
-
Pro zařízení se šířkou nad 576px a víc (desktop) změníme tříde .heading velkost fontu na 26px.
-
Třídě .image přidáme rámeček a zakulatíme mu rohy.
-
Přidáme tlačítko, které bude umístěné v dolním pravém rohu obrázku.