bootstrap-procviceni/README.md

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 a zadání 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

• 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) obsahující:
  • název firmy
  • delší text (lorem)
  • tlačítko "Zjistit více" (barva warning)
• 3 Sloupce (example Features)
  • 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
• 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
• List Group o 10 různých ovocích
  • jednotlivé prvky budou přes <button>

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