V rámci bonusového úkolu si zopakujeme, co jsme se naučili během dosavadní lekce. Úkol vypracujte ve VS Code a můžete si ho na konci zkontrolovat s referenčním řešením.

Úkolem bude vytvořit jednoduchou responzivní stránku s hero sekci a obrázkem. Stránka by měla pro desktop a mobil vypadat jako na příkladu níže.

1. Vytvoření souboru index.html a základni struktúry HTML

vytvořte soubor index.html
základní struktúru HTML vytvoříme napsánim znaku ! a následním stisknutím ENTER na klávesnici
2. Přidáni obsahu

odkaz na obrazek v hero sekci: obrázek
odkaz na druhy: obrázek
odkaz na ikonku: ikona
text v hero sekci: "Exploring Icelandic Villages" "Where Nature and Culture Converge"
menu sekce: Home, About Us, Explore, Contact Us
3. Vytvoření souboru styles.css

vytvořite soubor s názvem styles.css
přelinkujte soubor index.html se souborem styles.css vložením nasledujíciho kusu kódu do hlavičky html souboru
4. Přidani třid

přidejte do kódu sémantický element nav, který bude představovat navigaci.
položky navigace obalte elementem a s prázdnim atribútem href.
současti navigace bude ikonka menu pro mobilni verzi. Pro ikonku vytvořte blokový element <div></div> s třídou icon. Elementu přidáte img tag s atribútem src, který bude obsahovat odkaz na obrázek.
vytvořte blokový element <div></div> s třídou hero-section, kterému nastavíte obrázek na pozadi. Tento element bude obsahovat element s třídou hero-text.
Element hero-text bude obsahovat dve elementy. Jeden bude obalovat text "Exploring Icelandic Villages". Tomuto elementu nastavte třídu hero-subtitle. Druhý text "Where Nature and Culture Converge" bude nádpis první úrovně s třídou hero-title.
vytvořte další blokový element <div></div> s třídou image-container. Elementu přidáte img tag s atribútem src, který bude obsahovat odkaz na obrázek.
5. Přidejte selektory tříd

přidejte selektory tříd do css souboru
6. Nastavení navigace

nastavte tagu nav barvu pozadí pomocí vlastnosti background-color na #F08D8F.
nastavte velikost ikonky menu na width: 30px a height: 25px. Pozor ikonku vkládate jako obrázek, proto musíte nastavit obrázku responzívni chováni pomoci width: 100% a height: 100%.
pro umístnění položek menu vedle sebe nastavte vlastnosti display: flex a justify-content: space-evenly na tag nav.
položkam vypnete podtržení pomocí vlasntosti text-decoration: none.
skryjte iconu menu pro viewport větší než 768px a naopak zobrazte položky menu. Skrývani a zobrazení dosáhnete pomocí vlastnosti dislay: none, display: block a použití media query.
Ukázka kódu19
ZKOPÍROVAT KÓD
/* pseudo kód */
.icon {
  display: none;
}
@media (max-width: 768px) {
  .icon {
    display: block;
  }
  .nav a {
    display: none;
  }
}
nastavte pro položky menu padding-top a padding-bottom hodnotu 16px, barvu písma na #fff, velikost na 20px a font-weight: bold.
pro ikonu nastavte padding: 8px.
jednou z možnosti jak napozicovat ikonku na levu stranu je nastavením margin-left: auto.
tagu nav nastavte border-radius: 8px.
tagu nav nastavte margin-bottom: 10px aby se vytvořil prostor mezi navigaci a obrázkem pod ní.
7. Nastavení hero sekce

elementu s třídou hero-section nastavte vlastnosti:
background-image: url('link obrazku')
background-size
background-position
background-repeat
border-radius: 12px
elementu s třídou hero-section nastavte margin-bottom: 24px aby se vytvořil prostor mezi hero sekci a nasledujícim obrázkem.
napozicujte element s třídou hero-text do levého dolního rohu hero-section. V prvním kroku je potřebné nastavit position: relative pro element hero-section. V druhém kroku je potřebné nastavit position: absolute pro element hero-text. Element napozicujte z levého kraje 32px a dolního 16px.
elementu hero-text nastavte bílu barvu písma.
elementu s třídou hero-subtitle nastavte velkost písma na 20px.
elementu s třídou hero-title nastavte margin-top: 8px.
8. Nastavení obrázku

obálke obrázku s třídou image-container nastavte šířku 50% z celkové šířky viewportu.
nastavte tagu img aby se přispůsobil velikosti sve obálky pomoci vlastnosti width: 100% a height: 100%.
obrázku nastavte border-radius na 12px.
9. Prostor kolem stránky

nastavte na tagu body vnější okraj margin: 16px 32px.
10. Mobilní nastavení

pro viewport menší než 768px upravte:
velkost písma pro nádpis na 24px a subtitle na 18px.
šířku obrázku na 100% viewportu
vnejší okraj na tagu body na 8px.
Ukázka kódu20
ZKOPÍROVAT KÓD
@media (max-width: 768px) {
}
11. Rodina písma

Nastavte rodinu písma Roboto pomoci vlastnosti font-family na selektoru body.
Nejdříve musite písmo Roboto naimportovat.
Úkol můžete dle návodu v linku nahrát na Github a odkaz poslat lektorům do soukromé zprávy na Discordu.