Noga in zadnji popravki · Kodiraj z Martinom

Dokončaj videz svoje spletne strani: noga, majhni detajli z velikim vtisom in končna preverba.

Pokažem ti: noga

Noga zapre stran. Običajno je temnejša, mirna in ostane spodaj:

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 */
}

Noga naj vsebuje: kdo je naredil spletno stran, leto in kontakt (lahko si izmisliš ali uporabiš šolski – nikoli ne objavi domačega naslova ali telefonske številke na spletni strani).

Pokažem ti: majhni detajli, ki te naredijo profesionalca

Tri majhne stvari, ki jih skoraj nihče ne pozna, a naredijo ogromno razliko:

/* 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 % velikosti, transition pa pove: “Spremembe naj bodo gladke v 0,2 sekunde.” Prepelji miško čez fotografijo – vidiš nežen dvig? Točno to delajo sodobne spletne strani.

Zdaj si na vrsti 💪

Oblikuj nogo po zgornjem primeru (barvo lahko prilagodiš glavi) in preveri, da vsebuje: kdo je naredil spletno stran + leto.
Dodaj tri profesionalne detajle iz primera.
Velika preverba celotne spletne strani. Pojdi skozi ta seznam:
- Meni deluje z vsake strani na vsako stran.
- Vse slike se prikažejo in imajo izpolnjen alt.
- Zoži okno na širino telefona – vse se prilega, nič ne prelije vstran.
- V nogi ni domačega naslova, telefonske številke ali polnih šolskih/razrednih podatkov (varnost!).
- <title> na vsaki strani smiselno pomeni.

Celotna rešitev za nogo (prilagodi barve)

HTML (enako na vsaki strani):

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

⚠️

Varnost na prvem mestu: v naslednji lekciji bo tvoja spletna stran na pravem internetu, kjer jo lahko vidi kdorkoli. Zato nikoli ne sme vsebovati: natančnega domačega naslova, telefonske številke, e-pošte, polnega imena šole z razredom ali fotografij, s katerimi ti ali ljudje na njih ne bi bili udobni. Pojdi skozi spletno stran s staršem in preverita skupaj.

✅

Preveri se: Tvoja spletna stran ima glavo z menijem, vsebino v lepem stolpcu, kartice, fotografije, nogo – in stvari se nežno premaknejo, ko z miško drsiš čez. Izgleda kot prava spletna stran. Ker tudi je! Ostane še zadnji korak: pokazati jo svetu.

Kaj si vzameš iz te lekcije

Noga: temno ozadje, svetlo besedilo, text-align: center, margin-top.
transition + transform = gladke mikroanimacije, kot na profesionalnih spletnih straneh.
Pred objavo vedno preveri vsebino z očmi starša – osebni podatki ne sodijo na internet.