Cílem je vytvořit responzivní stránku, která je zaměřená na Island.
Na výběr je z lehčí varianta (má připravenou HTML strukturu) a nebo těžší varianta (je potřeba HTML strukturu doplnit). Doporučuji vybrat těžší variantu, více věcí si procvičíte. :)
Poznámky k úkolu
Responzivní breakpointy (místa, kde se mění rozložení stránky):
- všechno je pod sebou v jedné úzké nudli
- v menu jsou položky pod sebou, menu samotné je nad obsahem
- v galerii jsou všechny obrázky pod sebou
- popisky k obrázkům jsou vždy pod obrázkem (k těm v textu i k těm v galerii)
- skoro všechno je pod sebou
- v menu jsou položky vedle sebe, menu samotné je nad obsahem
- v galerii jsou vždy 2 obrázky vedle sebe (obrázků je 9, zbyde ti na konci jeden prázdný obdélníček)
- popisky k obrázkům v textu jsou uvnitř obrázku blízko k jeho pravému dolnímu rohu
- popisky k obrázkům v galerii jsou skryté
- hlavička s obrázkem na pozadí je přes celou šířku stránky
- obsah je v bílém pruhu uprostřed stránky omezeném na šířku 960px
- bílý obdélník s obsahem je vysunutý kousek nahoru do obrázku (věděla jsi, že margin může být i záporné číslo?)
- v menu jsou položky pod sebou, menu je omezené na úzký proužek a je vlevo od úvodního odstavce textu (menu -> float, text -> padding-left?)
- jednotlivé "sekce" s textem mají v počítačové verzi vždy na jedné straně odsazení pomocí paddingu - všimni si, že se to střídá a jendou je to vpravo a pak zase vlevo, aby web vypadal vizuálně zajímavě
- v galerii jsou vždy 3 obrázky vedle sebe
- popisky k obrázkům v textu jsou stejné jako v tabletové verzi (uvnitř obrázku)
- popisky k obrázkům v galerii jsou stejné jako v tabletové verzi (skryté)
Návod najdeš v této prezentaci