Karta

Čas na další malý projekt! Tentokrát použijete to, co jste se naučili v lekcích Text a písma a CSS box model: písma a velikosti a mezery boxů. Stejně jako v prvním miniprojektu pokyny říkají, jak má stránka vypadat, a CSS je na vás.

Projekt. Profilové karty jsou všude: na sociálních sítích, na stránkách týmů a firem nebo u recenzí v e-shopech. Ve třech cvičeních vytvoříte kartu Lucie Novákové, webové designérky: bílou kartu uprostřed stránky s jejími iniciálami v kruhu, jménem, profesí, pár slovy o ní a kontaktem. Stránka má zatím jen HTML a soubor style.css obsahuje barvy stránky. Každé cvičení navazuje na to předchozí.

Na konci bude karta vypadat takhle (zmenšeně):

Úkol. V tomto cvičení vytvoříte samotnou kartu, bílý box kolem obsahu:

• bílé pozadí, plný rámeček široký 2 pixely ve světle modrošedé barvě #c9d3e0 a rohy zaoblené na 16 pixelů,
• mezi rámečkem a obsahem 24 pixelů volného místa,
• šířka 320 pixelů včetně rámečku,
• uprostřed stránky, 40 pixelů pod jejím horním krajem.

Tip: v lekci o box modelu jste se naučili, jak zařídit, aby šířka (width) zahrnovala i polstrování a rámeček, a jak vycentrovat box s nastavenou šířkou. A pozor: i body má svůj vlastní okraj.