added instructions

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
+**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*