-
Spusť si tento projekt postavený na Eleventy.
npm install
npm run build
npm run dev
-
Koukni do prohlížeče, že se ti stránka při vývojovém sestavení načte.
-
Zkontroluj, že se proklikneš na všechny tři podstránky (úvodní, ceník, o nás).
-
Na úvodní stránce by měl být obrázek.
-
Všechny stránky by měly být drobně nastylované.
-
-
Přidej další podstránku
Kontakt
.-
Do zdrojové složky
src
přidej souborkontakt.njk
. Můžeš se inspirovat podleo-nas.njk
. Pro obsah použij následující HTML:<h2>Kontakt</h2> <h3>Otevírací doba</h3> <p>Každý den od 9:00 do 18:00.</p> <h3>Adresa</h3> <address> Václavské náměstí 837/11<br /> Nové Město, Praha 1,<br /> 110 00<br /> Česká republika </address>
-
Odkaz na kontakt přidej do společné navigace v hlavičce.
-
Výsledek by měl vypadat takto:
-
-
Doplň do kontaktní stránky odkazy na sociální sítě.
-
Do složky
src/obrazky
stáhni ikonku Instagramu a Facebooku. -
Nachystej si soubor
src/casti/socialni-site.njk
podle předlohy.<section class="socialni-site"> <a class="socialni-site__instagram" href="https://www.instagram.com/"> <img src="/obrazky/instagram.svg" width="24" height="24" alt="Instagram" /> </a> <a class="socialni-site__facebook" href="https://www.facebook.com/"> <img src="/obrazky/facebook.svg" width="24" height="24" alt="Facebook" /> </a> </section>
-
Nachystanou komponentu zapoj pod adresu na kontaktní stránce.
<h3>Sociální sítě</h3> {% include "socialni-site.njk" %}
-
Dostyluj komponentu
socialni-site
tak, aby ikonky měly mezi sebou mezeru0.5rem
. Na hover/focus jim přidej stínbox-shadow: 0 0 0.5rem rgba(#000000, 0.4)
. Styly piš do souborusrc/styly/komponenty/socialni-site.scss
. Nezapomeň na import vindex.scss
. -
Výsledek by měl vypadat takto:
-
-
Proveď produční sestavení a výslednou stránku ve složce
dist
vystav na Netlify Drop.