projekt-05-island's Introduction

Projekt-05-island

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):

Mobilní verze - šířka do 500px

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)

Tabletové verze - šířka 500px až 1000px

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é

Počítačová verze - šířka nad 1000px

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é)