Pätička a finálne doladenie · Programuj s Martinom

Dokonči vzhľad svojej webovej stránky: pätička, malé detaily, ktoré robia veľký dojem, a finálna kontrola.

Ukážem ti: pätička

Pätička uzatvára stránku. Zvyčajne je tmavšia, pokojná a zostáva dole:

footer {
  background-color: #1f2937;   /* tmavosivá */
  color: white;
  text-align: center;          /* vycentruj text */
  padding: 24px 16px;
  margin-top: 48px;            /* priestor od obsahu */
}

footer a {
  color: #93c5fd;              /* odkazy v tmavej pätičke musia byť svetlé */
}

Pätička by mala obsahovať: kto web spravil, rok a kontakt (môžeš si ho vymyslieť alebo použiť školský – nikdy na web nedávaj svoju domácu adresu ani telefónne číslo).

Ukážem ti: malé detaily, ktoré vyzerajú profesionálne

Tri maličkosti, o ktorých takmer nikto nevie, a predsa robia obrovský rozdiel:

/* 1. Plynulé posúvanie pri kliknutí na odkaz v rámci stránky */
html {
  scroll-behavior: smooth;
}

/* 2. Obrázky sa pri prejdení mierne priblížia */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...a to priblíženie bude plynulé, nie okamžité */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) zväčší prvok na 103 % veľkosti a transition povie: „Zmeny rob plynulo počas 0,2 sekundy.” Prejdi myšou nad fotkou – vidíš to jemné zdvihnutie? Presne to robia moderné weby.

Teraz ty 💪

Naštýluj svoju pätičku podľa príkladu (farbu môžeš prispôsobiť hlavičke) a skontroluj, že obsahuje: kto web spravil + rok.
Pridaj tri profesionálne detaily z príkladu.
Veľká kontrola celej webovej stránky. Prejdi tento checklist:
- Menu funguje z každej stránky na každú stránku.
- Všetky obrázky sa zobrazujú a majú vyplnené alt.
- Zmenši okno na šírku telefónu – všetko sa zmestí, nič nevyteká do strán.
- Pätička nemá domácu adresu, telefónne číslo ani plné meno školy/triedy (bezpečnosť!).
- <title> dáva zmysel na každej stránke.

Kompletné riešenie pätičky (uprav farby)

HTML (rovnaké na každej stránke):

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS:

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

Bezpečnosť na prvom mieste: v ďalšej lekcii pôjde tvoja webová stránka na skutočný internet, kde ju môže vidieť ktokoľvek. Preto na nej nikdy nesmie byť: presná domáca adresa, telefónne číslo, e-mail, plné meno školy s triedou ani fotky, s ktorými by si ty alebo ľudia na nich neboli spokojní. Prejdi web s rodičom a skontrolujte to spolu.

✅

Skontroluj sa: Tvoja webová stránka má hlavičku s menu, obsah v peknom stĺpci, karty, fotky, pätičku – a veci sa pri prejdení jemne hýbu. Vyzerá ako skutočný web. Lebo je! Zostáva posledný krok: ukázať ju svetu.

Čo si z tejto lekcie odnášaš

Pätička: tmavé pozadie, svetlý text, text-align: center, margin-top.
transition + transform = plynulé mikroanimácie, ako na profi weboch.
Pred zverejnením vždy skontroluj obsah očami rodiča – osobné údaje na internet nepatria.