Použijte šablonu cviceni-flexibilni-layout.
Naklonujte si repozitář a spusťte si npx serve.
V HTML souboru je připravený obsah stránky. V souboru style.css je nastylovaný typ písma (font) a další základní styly. Vlastní styly doplňte dolů pod komentář.
Nastylujte header tak, aby nadpis a podnadpis byly vedle sebe na opačných koncích stránky.
Galerii nastylujte tak, aby obrázky byly ve svou sloupcích vedle sebe, které se flexibilně roztahují podle šířky stránky. Potom si zkuste nastylovat 3 a 4 sloupce. Ty už se vám sice nevejdou na menší velikost obrazovky, ale příští hodinu si ukážeme, jak je zobrazovat jen na širších obrazovkách. Pokud už znáte media queries, můžete si rovnou vyzkoušet.
Každou variantu si zkontrolujte v devtools a udělejte si printscreen celé stránky.
Podívejte se na výsledek: