|
|
|
@ -4,7 +4,7 @@ |
|
|
|
|
|
|
|
## **Podmínky závěrečné práce budou řečeny před začátkem práce** |
|
|
|
|
|
|
|
## **Podmínky a zadání se může v průběhu měnit dle potřeby.** |
|
|
|
## **Podmínky, zadání a obsah se může v průběhu měnit dle potřeby.** |
|
|
|
|
|
|
|
# Zadání |
|
|
|
|
|
|
|
@ -12,6 +12,7 @@ Jednoduchá webová aplikace pro procvičení HTML, CSS, JS a aplikování a vyu |
|
|
|
|
|
|
|
***Lore*: Vašim úkolem je vytvořit jednoduchou aplikaci pro začítající softwarovou firmu *MacroHard onfire*** |
|
|
|
|
|
|
|
|
|
|
|
Aplikace bude obsahovat 3 stránky a budou mít název v menu: |
|
|
|
|
|
|
|
- index.hmtl - Domů |
|
|
|
@ -19,6 +20,7 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu: |
|
|
|
- contact.html - Kontakt |
|
|
|
|
|
|
|
## Všechny stránky budou obsahovat |
|
|
|
### template.html obsahuje přčedpřipraveny layout header,main,footer |
|
|
|
|
|
|
|
- Horní navigační panel (navbar) obsahující: |
|
|
|
- Název aplikace (vaše příjmení) |
|
|
|
@ -34,16 +36,15 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu: |
|
|
|
|
|
|
|
### Domů |
|
|
|
|
|
|
|
- uvítací pole *(example Heroes)* obsahující: |
|
|
|
- uvítací pole *(example Heroes - ukazka Centered hero bez obrázku)* obsahující: |
|
|
|
- název firmy |
|
|
|
- delší text (lorem) |
|
|
|
- tlačítko "Zjistit více" (barva *warning*) |
|
|
|
- 3 Sloupce *(example Features)* |
|
|
|
- tlačítko "Zjistit více" (barva *warning*) - ma funkci designu (někdo jiný už si to zprovozní ☺) |
|
|
|
- 3x Sloupec *(example Features - první bez ikon)* obsahující |
|
|
|
- Jednoslovný nadpis |
|
|
|
- lorem odstavec |
|
|
|
- Tlačitka modální (modal) - každý bude obsahovat Lorem text a tlačítko na zavření |
|
|
|
- tlačka budou obsahovat `d-flex justify-content-around` |
|
|
|
- horizontální čáru |
|
|
|
- Tlačítko modální (modal) - každý bude obsahovat Lorem text a tlačítko na zavření |
|
|
|
- horizontální čáru `hr` |
|
|
|
- jednoduchý článek |
|
|
|
- *Display-2* s textem "Webové technologie" |
|
|
|
- *Lean text* s lorem textem o 15 slov |
|
|
|
@ -58,9 +59,9 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu: |
|
|
|
- název (náhodné jméno) |
|
|
|
- krátky popis (lorem 10 slov) |
|
|
|
- na kartu použít třídy `col-6 col-md-4 col-xl-2` |
|
|
|
- horizontální čáru |
|
|
|
- List Group o 10 různých ovocích |
|
|
|
- jednotlivé prvky budou přes `<button>` |
|
|
|
- horizontální čáru `hr` |
|
|
|
- List Group o 10 různých ovocích |
|
|
|
- jednotlivé prvky budou přes `<button>` (takže budou mít i *hover effekt*) |
|
|
|
|
|
|
|
### Kontakt |
|
|
|
|
|
|
|
@ -71,4 +72,34 @@ Aplikace bude obsahovat 3 stránky a budou mít název v menu: |
|
|
|
- textarea s placeholder "Napište nám" |
|
|
|
- Tlačítko na reset formuláře |
|
|
|
- Tlačítko na odeslání formuláře |
|
|
|
- toto tlačítko bude po stiknutí vypíše do ALERT jenom *textarea* |
|
|
|
- toto tlačítko bude po stiknutí vypíše do ALERT jenom *textarea* |
|
|
|
|
|
|
|
____________ |
|
|
|
|
|
|
|
## užitečné odkazy |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/getting-started/introduction/ |
|
|
|
|
|
|
|
https://icons.getbootstrap.com/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/examples/ (examply které by se mohli hodit: *Heroes, Features, Cheatsheet, Carousel*) |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/layout/grid/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/content/typography/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/forms/input-group/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/forms/range/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/components/buttons/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/components/card/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/components/list-group/ |
|
|
|
|
|
|
|
https://getbootstrap.com/docs/5.0/components/modal/ |
|
|
|
|
|
|
|
https://www.w3schools.com/jsref/prop_textarea_value.asp |
|
|
|
|
|
|
|
https://www.w3schools.com/jsref/met_win_alert.asp |
skrabanek
3 years ago