Samostatná práce na téma Bootstrap

Pouze pro 3.IM -> 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 div
• Dolní panel (footer) obsahující:
  • Celé vaše jméno
  • Třída
  • Čas a datum navštívení stránky (JS Date())

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"
  • Lean 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 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