Cvičný projekt pro kurz Staň se kóderkou od Czechitas.
- V HTML souboru máš připravený obsah.
- Na obrázku ukazka-vysledku.jpg prozkoumej, jak má vypadat konečný výsledek.
- Podle toho přidej do HTML další potřebné značky, abys mohla obsah nastylovat tak, jak to vypadá na obrázku.
- Na všechny prvky, které budeš stylovat, si přidej CSS třídy, a styluj pouze přes ně. Snaž se jim vymyslet smysluplné názvy.
- Přidej písma z Google Fonts - na obrázku se zadáním je zmíněn font Source Sans Pro, který se ale v nové verzi jmenuje Source Sans 3, takže použij ten.
- Celá kartička bude široká
250px, ale počítej s tím, že může mít i jiný rozměr. Napiš CSS tak, aby se kartička nerozpadla, když změníš její šířku třeba na300pxnebo350px. - Odsazení textu od okraje kartičky v její prostřední části je
20px. - Na začátku CSS souboru máš v komentáři všechny potřebné barvy.
- Tlačítka (odkazy) fungují tak, že standardně jsou černá, ale když se na ně najede myší, tak změní barvu na modrou (Twitter), fialovou (Facebook) nebo červenou (Moje portfolio).
- Velikosti písma a další případné rozměry, paddingy nebo marginy odhadni tak, abyses co nejvíce přiblížila obrázku.
- Určitě jsi vyzkoušela, že je s kartičkou vše pořádku, i když změníš její šířku? (Možná ano. Jen se ujišťujeme.)
- Zkus kartičce udělat zakulacené rohy? Vyzkoušej jak vše vypadá, včetně tlačítek.
- Nastav kartičku tak, aby byla horizontálně uprostřed stránky.
- Co bys do kartičky ještě přidala, aby to byl dokonalý osobní profil?
