Footer và hoàn thiện cuối

Xem này: footer

Footer kết thúc trang. Thường tối hơn, êm, và nằm phía dưới:

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

Footer nên có: ai làm website, năm, và thông tin liên hệ (cứ tưởng tượng hoặc dùng của trường – đừng bao giờ đặt địa chỉ nhà hay số điện thoại lên website).

Xem này: chi tiết nhỏ khiến bạn trông như pro

Ba điều nhỏ hầu như không ai biết, nhưng tạo khác biệt lớn:

/* 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) phóng to phần tử lên 103%, và transition nói: “Thay đổi mượt trong 0,2 giây.” Di chuột lên ảnh – thấy nó nhẹ nhàng nổi lên? Đó chính xác là website hiện đại làm.

Lượt của bạn 💪

1. Tô kiểu footer theo ví dụ (có thể khớp màu với header) và kiểm tra có: ai làm website + năm.

2. Thêm ba chi tiết pro từ ví dụ.

3. Kiểm tra lớn toàn bộ website. Đi qua checklist:

   • Menu hoạt động từ mọi trang đến mọi trang.
   • Mọi ảnh hiện và có alt điền đầy đủ.
   • Thu nhỏ cửa sổ như điện thoại – mọi thứ vừa, không tràn ngang.
   • Footer không có địa chỉ nhà, số điện thoại, hay thông tin trường/lớp đầy đủ (an toàn!).
   • <title> hợp lý trên mọi trang.

<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>

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

Điều cần nhớ từ bài này

• Footer: nền tối, chữ sáng, text-align: center, margin-top.
• transition + transform = micro-animation mượt, như website pro.
• Luôn kiểm tra nội dung qua mắt bố mẹ trước khi đăng – thông tin cá nhân không thuộc về internet.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung