Úroveň 2:
Designér & Inženýr

Ahoj! V prvním díle jsi postavil kostru. Teď se naučíš, jak z té kostry udělat supermoderní aplikaci pomocí **stínů, proměnných a logiky**.

1. Hloubka (Box Shadow)

Aby věci na webu vypadaly jako skutečné, musíme jim dát stín. Sleduj, jak se mění kód, když hýbeš posuvníkem!

                .karta {

                  box-shadow: 0 20px 50px rgba(0,0,0,0.2);

                  border-radius: 20px;

                }

MOJE KARTA

Výška stínu: Kulatost rohů:

2. Síla proměnných (--var)

Představ si, že máš na webu 100 tlačítek a chceš jim změnit barvu. Budeš to dělat jedno po druhém? Ne! Použiješ **proměnnou**. Změň barvu na jednom místě a sleduj, co se stane.

                :root {

                  --hlavni-barva: #6366f1;

                }

                .tlacitka { background: var(--hlavni-barva); }

Klikni na barvu!

3. Logika (IF / ELSE)

JavaScript je mozek. Umí se rozhodovat. Zkusíme vytvořit jednoduchou kontrolu: **"Pokud (IF) je číslo větší než 10, vybarvi ho zeleně."**

                if (cislo > 10) {

                  barva = "Zelená";

                } else {

                  barva = "Červená";

                }

0

Číslo je malé

4. Tvoje první aplikace: Profilová karta

Teď to všechno spojíme. Použijeme HTML pro jméno, CSS pro styl a JS pro interaktivitu. Zkus si sestavit vlastní vizitku.

                    <div style="background: white; padding: 20px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1);">
  <img src="https://api.dicebear.com/7.x/bottts/svg?seed=Lucky" style="width: 80px;">
  <h2 style="color: #333; margin: 10px 0;">Junior Hacker</h2>
  <p style="color: #666;">Expert na HTML a CSS</p>
  <button style="background: #6366f1; color: white; border: none; padding: 10px; border-radius: 10px;">Poslat zprávu</button>
</div>
                    
                

Úroveň 2: Designér & Inženýr

1. Hloubka (Box Shadow)

2. Síla proměnných (--var)

3. Logika (IF / ELSE)

0

4. Tvoje první aplikace: Profilová karta

Úroveň 2:
Designér & Inženýr