9.1.2017

Postupne začíname našu stránku napĺňať obsahom. Dnes si vytvoríme novú stránku, kde bude prehľad služieb, ktoré ponúkame. Naučíme sa poziciovať elementy a vyberať ich z toku dokumentu.

v HTML

1. Vytvorte si novú stránku sluzby.html
2. Do tejto stránky nakopírujte hlavičku a pätu zo stránok predchádzajúcich
3. Ku divu s triedou main pridajte ešte jednu triedu services
4. Do tohto divu pridajte obrázok, ktorý nájdete na Dropboxe v materiály/tvorba webu/práca na hodine/services.png
5. Pod obrázok pridajte nadpis sekcie
6. Vytvorte si na http://www.cupcakeipsum.com 10 odstavcov stredne dlhého textu a vygenerovaný text skopírujte pod hlavný nadpis
7. Každý odstavec obaľte do tagu p a všetky odstavce obaľte do divu s triedou posts

v CSS

1. Hlavnému nadpisu v triede services nastavte veľkosť na 40px a dajte ho na stred stránky
2. Všetkým odstavcom v posts nastavte ľavé a pravé vonkajšie odsadenie 150px
3. Prvému odstavcu v posts nastavte veľkosť písma 24px, výšku riadku 36px, vonkajšie odsadenie sprava a zľava na 0
4. Vytvorte dve triedy - float-left a float-right a nastavte im odpovedajúce pravidlá

v HTML

1. Za druhým odstavcom v triede posts vytvorte nový tag aside, ktorý bude obsahovať triedy - float-left a pullquote
2. Do tohto tagu vložte jeden riadok textu ako citát (tag q)
3. Za tretí odstavec vložte znovu tag aside, s triedami - float-right a pullquote
4. Do tohto tagu vložte ďalší riadok textu ako citát
5. Nad ľubovoľné dva odstavce pridajte dva nadpisy druhej úrovne
6. Za piatym odstavcom textu vytvorte ďalší blok aside s nečíslovaným zoznamom odkazov (cca 4), kedy každý odkaz bude smerovať na stránku na internete, aside má triedy pullquote afloat-left

v CSS

1. Vytvorte pravidlá pre triedu pullquote - maximálna šírka 300px a farba napríklad#1F9362

2. Všetkým elementom, ktoré majú triedu pullquote , a zároveň triedu float-left nastavte vonkajšie odsadenie 24px 34px 24px a 0

3. Všetkým elementom, ktoré majú triedu pullquote , a zároveň triedu float-right nastavte vonkajšie odsadenie 24px 0 24px a 34px

4. Špecifikujte a nastavte v triede pullquote pre:

   1. citát - veľkosť písma na 24px, výšku riadku na 36px, štýl fontu italic
   2. číslovaný a nečíslovaný zoznam - vnútorné odsadenie zľava na 0
   3. položky zoznamu - rámček zospodu 2px bodkovaný s farbou napr. #1F9362 a vnútorné odsadenie 10px
   4. posledná položka zoznamu - nemá žiadny rámček
   5. odkazy - veľkosť písma 18px
   6. odkazy po prejdení myšou - zmena farby napr. na #1F9362 a nie sú podčiarnuté
   7. nadpis tretej úrovne - veľkosť písma 20px a vnútorné odsadenie zospodu 0