Podnožje i završni detalji · Kodiraj s Martinom

Dovrši izgled svoje web stranice: podnožje, mali detalji koji ostavljaju veliki dojam i završna provjera.

Pokazat ću ti: podnožje

Podnožje zatvara stranicu. Obično je tamnije, mirno i ostaje dolje:

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

Podnožje bi trebalo uključivati: tko je napravio web stranicu, godinu i kontakt (slobodno izmisli ili koristi školski – nikad ne stavljaj kućnu adresu ili telefonski broj na web stranicu).

Pokazat ću ti: mali detalji koji te čine profesionalcem

Tri sitne stvari koje gotovo nitko ne zna, a čine ogromnu razliku:

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) poveća element na 103% veličine, a transition kaže: “Promjene neka budu glatke tijekom 0,2 sekunde.” Pređi mišem preko fotografije – vidiš taj nježni mali pomak? Točno to rade moderne web stranice.

Sad si ti na redu 💪

Stiliziraj podnožje prema primjeru (slobodno uskladi boju sa zaglavljem) i provjeri da uključuje: tko je napravio web stranicu + godinu.
Dodaj tri profesionalna detalja iz primjera.
Velika provjera cijele web stranice. Prođi ovaj popis:
- Izbornik radi sa svake stranice na svaku stranicu.
- Sve slike se prikazuju i imaju ispunjen alt.
- Smanji prozor na širinu mobitela – sve stane, ništa ne ispadne u stranu.
- Podnožje nema kućnu adresu, telefonski broj ili puni podatke o školi/razredu (sigurnost!).
- <title> ima smisla na svakoj stranici.

Potpuno rješenje za podnožje (prilagodi boje)

HTML (isto na svakoj stranici):

<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);
}

⚠️

Sigurnost na prvom mjestu: u sljedećoj lekciji tvoja web stranica ide na pravi internet, gdje je svatko može vidjeti. Zato nikad ne smije uključivati: točnu kućnu adresu, telefonski broj, e-mail, puni naziv škole s razredom ili fotografije koje ti ili ljudi na njima ne bi bili ugodni. Prođi web stranicu s roditeljem i provjerite zajedno.

✅

Provjeri sam sebe: Tvoja web stranica ima zaglavlje s izbornikom, sadržaj u lijepom stupcu, kartice, fotografije, podnožje – i stvari se nježno pomiču kad pređeš mišem. Izgleda kao prava web stranica. Jer i jest! Ostaje još jedan korak: pokazati je svijetu.

Što ćeš ponijeti iz ove lekcije

Podnožje: tamna pozadina, svijetli tekst, text-align: center, margin-top.
transition + transform = glatke mikroanimacije, baš kao na profesionalnim web stranicama.
Uvijek dvaput provjeri sadržaj očima roditelja prije objave – osobni podaci ne pripadaju internetu.