Lekce 1.6

Workshop: přepracování stránky

Responzivní stránka cukrárny od mobilu po desktop, mini-review ve dvojicích podle checklistu a ukázky nejzajímavějších řešení.

Cvičení 3

Desktop

Co si vyzkoušíte

Přidáte stránce rozvržení pro desktop a dokončíte tím celý projekt. Vycházíte ze stránky s rozvržením pro tablet z předchozího cvičení. Cílový stav ukazuje snímek vysledek-desktop.png ve složce projektu.

Zadání

Všechno v tomhle cvičení patří do připravené media query pro šířku od 1100px.

  1. Rozšiřte obsah ve třídě .container na nejvýš 1200px.
  2. Postavte logo a menu v hlavičce vedle sebe, logo vlevo a menu na pravé straně.
  3. Postavte hero vedle sebe: text vlevo, obrázek vpravo, každý na polovinu šířky.
  4. Vraťte kartičky do podoby na výšku s obrázkem nahoře a postavte všechny čtyři do řady, stejně široké.
  5. Rozdělte sekce patičky do čtyř sloupců vedle sebe.
  6. Projděte stránku od 320 pixelů nahoru a porovnejte ji se všemi třemi snímky. Nejpečlivěji přímo na hranicích a pixel pod nimi.