diff --git a/README.md b/README.md index e086782..2972caa 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,69 @@ -# bootstrap-procviceni +# Samostatná práce na téma Bootstrap -Pouze pro 3.IM -> zadaní a základní template pro samostatnou práci \ No newline at end of file +**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
)` +### 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 `