Bài tập về nhà - Buổi 2 (Lần 2) - Mã đề B

Ngữ cảnh: Bảng giá gói cước điện thoại của nhà mạng viễn thông, mở rộng từ bài Lần 1 sang đơn vị linh hoạt.

Yêu cầu

• Toàn bộ kích thước chữ dùng đơn vị tương đối (em hoặc rem), kích thước khối dùng kết hợp % và đơn vị viewport (vw/vh).
• Đặt max-width và min-width cho khối nội dung chính để trang không vỡ khi thu phóng cửa sổ.
• Áp dụng CSS kế thừa hợp lý: khai báo thuộc tính chung ở phần tử cha thay vì lặp lại ở từng phần tử con, kèm comment chỉ ra chỗ đã tận dụng kế thừa.
• Có ít nhất 2 nhóm phần tử dùng chung 1 class nhưng khác nhau ở một vài thuộc tính được ghi đè bằng class phụ.
• Kiểm chứng và mô tả bằng văn bản trạng thái hiển thị ở 2 kích thước cửa sổ khác nhau (ví dụ cửa sổ rộng và cửa sổ hẹp).

Kết quả mong muốn

Xem file goc.html để lấy khung HTML ban đầu, hoàn thiện phần CSS để đạt được giao diện như ảnh chụp bên dưới (xem dapan.html để đối chiếu đáp án).