# Samostatná práce na téma Bootstrap

**Pouze pro 3.J -> zadaní a základní template pro samostatnou práci**

## **Podmínky závěrečné práce budou řečeny před začátkem práce**

## **Podmínky, zadání a obsah se může v průběhu měnit dle potřeby.**

# Zadání

Jednoduchá webová aplikace pro procvičení HTML, CSS, JS a aplikování a využití dokumentace knihovny Bootstrap framework.

***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ů
- team.html - Tým
- 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í)
  - Ikonu diamantu (libovolný výběr z knihovny bootstrap icons) u vašeho příjmení
  - Všechny 3 odkazy na jednotlivé stránky (AKTIVNÍ STRÁNKA BUDE JINAK VYZNAČENÁ)
- OBSAH JEDNOTLIVÉ STRÁNKY V `main`
- Dolní panel (footer) obsahující:
  - Celé vaše jméno
  - Třída
  - Čas a datum navštívení stránky (JS Date().toString())

## Jednotlivé stránky:

### Domů

- 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*) - ma funkci designu (někdo jiný už si to zprovozní ☺)
- 3x Sloupec *(example Features - první bez ikon)* obsahující
  - Jednoslovný nadpis
  - lorem odstavec
  - 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"
  - *Lead text*  s lorem textem o 15 slov
  - 5x odstavec s náhodným textem `(5x <p>)`

### Tým

- vycentrovaný Display-1 s textem "Náš tým"
- Vycentrovaný Display-3 s textem "vedení"
  - 3x karta obsahující (vygenerovat komentář pro EMMET např.`ul>li*4`):
    - obrázek (využit jakýkoliv obrazek ze složky img)
    - 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 `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

- vycentrovaný formulář obsahující:
  - jméno a příjmení v jednom řádku
  - telefoní čílo s nezmenitelným předčíslým +420 (input group)
  - range input "Hodnocení webu" s omezením min=1 a max=5 
  - 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 *hodnotu z textarea*

____________

## užitečné odkazy

https://getbootstrap.com/docs/5.3/getting-started/introduction/

https://icons.getbootstrap.com/

https://getbootstrap.com/docs/5.3/examples/ (examply které by se mohli hodit: *Heroes, Features, Cheatsheet, Carousel*)

https://getbootstrap.com/docs/5.3/layout/grid/

https://getbootstrap.com/docs/5.3/content/typography/

https://getbootstrap.com/docs/5.3/forms/input-group/

https://getbootstrap.com/docs/5.3/forms/range/

https://getbootstrap.com/docs/5.3/components/buttons/

https://getbootstrap.com/docs/5.3/components/card/

https://getbootstrap.com/docs/5.3/components/list-group/

https://getbootstrap.com/docs/5.3/components/modal/

https://www.w3schools.com/jsref/prop_textarea_value.asp

https://www.w3schools.com/jsref/met_win_alert.asp