Toto je první ze série pěti úkolů, ve kterých si postupně naprogramuješ hru piškvorky.
-
Pokud nemáš na github.com účet, založ si jej.
-
Ve svém účtu vytvoř nový veřejný repozitář pojmenovaný
piskvorky, do kterého budeš průběžně nahrávat svoji práci.
-
Repozitář si naklonuj do počítače spuštěním
git clone https://github.com/{DOPLŇ_TVŮJ_USERNAME}/piskvorky.gitna příkazové řádce, v terminálu. Vytvoří se ti složkapiskvorky. -
V této složce založ soubor
index.html. -
Do
index.htmlpřidej základní strukturu HTML a mezi značky<body></body>vlož nadpis úrovněh1s textemPiškvorky. Výsledek by měl vypadat takto:
-
Příkazem
git add .vyber nově vytvořený HTML soubor a sgit commit -m "Základní html"dokonči první commit. -
Přes
git pushnahraj první commit na github. -
Zkontroluj, že na adrese
https://github.com/{DOPLŇ_TVŮJ_USERNAME}/piskvorkyje nahranýindex.html. -
V nastavení povol GitHub Pages.
-
Odkaz na stránku přidej do popisku repozitáře v sekci Website.
-
Vedle souboru
index.htmlvytvoř istyly.cssa napoj je do stránky pomocí tagu<link … />. -
Do stejné složky si stáhni obrázek uvodni.jpg.
-
Postupnou úpravou HTML a CSS uprav stránku do této podoby:
-
Nezapomeň průběžně commitovat a nahrávat na GitHub.
- Proveď změny. Uprav soubory. Napiš HTML, CSS.
- Pomocí
git add .označ všechny nové změny. - Přes
git commit -m "Název změn"pojmenuj, čeho se změny týkají. - S
git pushnahraj commit na Github. - Vrať se do prvního kroku.
-
Pro spodní dvě tlačítka použij tag
<a>.- Prvnímu tlačítku, odkazu na pravidla nastav atribut
href="https://czechitas-podklady.cz/Piskvorky-pravidla/". - Druhému nastav atribut
href="index.html". Bude tedy prozatím odkazovat na stránku, kde zrovna uživatel je. Stránku s hrou totiž doplníte až v dalších úkolech.
- Prvnímu tlačítku, odkazu na pravidla nastav atribut
-
Tlačíka by se po najetí myši měly ztmavit.
- Nadpis Piškvorky je fontem
Lobster. Najdeš ho zdarma na Google Fonts. - Různé vzdálenosti, velikosti textu odhadni od oka nebo přesně změř na obrázku výše.
- Gradient v pozadí jde z fialové
#615daddo růžové
#ffc8da. - Další barvy, které se ti budou hodit:
- Barva textu
#ffffff. - Podkladová tmavě modrá
#283e50. - Tlačítko Pravidla
#1fcca4. A po najetí myši
#1cbb96. - Tlačítko Začít hrát
#0197f6. Po najetí
#0090e9.
- Barva textu
- Úvodní text nemusíš opisovat. Stačí ho zkopírovat zde:
Piškvorky jsou velmi oblíbená společenská hra pro dva hráče. Obvykle se hraje s tužkou a čtverečkovaným papírem. Nyní můžete využít naši skvělou aplikaci, takže už nepotřebujete ani tužku a nemusíte hledat čtverečkovaný papír. Přejeme vám hodně zábavy!
