Stopka i ostatnie szlify · Koduj z Martinem

Dokończ wygląd strony: stopka, małe detale, które robią wrażenie, i końcowy przegląd.

Pokażę ci: stopka

Stopka domyka stronę. Zwykle jest ciemniejsza, spokojniejsza i zostaje na dole:

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

Stopka powinna zawierać: kto zrobił stronę, rok i kontakt (możesz wymyślić albo użyć szkolnych – nigdy nie dawaj adresu domu ani telefonu na stronie).

Pokażę ci: małe detale, które robią profesjonalne wrażenie

Trzy rzeczy, o których mało kto wie, a robią ogromną różnicę:

/* 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) powiększa element do 103%, a transition mówi: „Zmieniaj to płynnie przez 0,2 sekundy.” Najedź na zdjęcie – widzisz delikatne powiększenie? Dokładnie tak robią nowoczesne strony.

Teraz ty 💪

Ostyluj stopkę według przykładu (kolor może pasować do nagłówka) i sprawdź, czy jest: kto zrobił stronę + rok.
Dodaj trzy pro detale z przykładu.
Wielki przegląd całej strony. Przejdź tę listę:
- Menu działa z każdej strony na każdą.
- Wszystkie obrazki widać i mają wypełnione alt.
- Zmniejsz okno do szerokości telefonu – wszystko się mieści, nic nie wystaje.
- W stopce nie ma adresu domu, telefonu ani pełnych danych szkoły/klasy (bezpieczeństwo!).
- <title> ma sens na każdej stronie.

Pełne rozwiązanie stopki (dopasuj kolory)

HTML (taki sam na wszystkich stronach):

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

⚠️

Bezpieczeństwo przede wszystkim: w następnej lekcji strona trafi do prawdziwego internetu, gdzie każdy może ją zobaczyć. Nie powinna zawierać: dokładnego adresu domu, telefonu, e-maila, pełnej nazwy szkoły z klasą ani zdjęć, z których ty lub osoby na nich nie byłybyście zadowoleni. Przejrzyj stronę z dorosłym.

✅

Sprawdź się: Strona ma nagłówek z menu, treść w ładnej kolumnie, karty, zdjęcia, stopkę – i rzeczy płynnie reagują przy najechaniu. Wygląda jak prawdziwa strona. Bo nią jest! Został jeden krok: pokazać ją światu.

Co wyniesiesz z tej lekcji

Stopka: ciemne tło, jasny tekst, text-align: center, margin-top.
transition + transform = płynne mikroanimacje jak u profesjonalistów.
Zawsze sprawdzaj treść oczami dorosłego przed publikacją – dane osobowe nie należą do internetu.