Bài tập về nhà - Buổi 4: Chia layout

Lần 1 - Mã đề F: Ứng dụng đặt đồ ăn (MónNgon)

Yêu cầu: Dựng trang chủ cho ứng dụng đặt đồ ăn "MónNgon" bằng Flexbox, dựa trên bản gốc goc.html (trạng thái tích luỹ hết Buổi 3). Kết quả cần đạt được như ảnh chụp bên dưới (xem thêm bài làm mẫu ở dapan.html).

Ràng buộc cấu trúc riêng cho mã đề F

Khối details/summary: Dùng details/summary để trình bày một ghi chú mở rộng liên quan đến mã đề. Không thay ràng buộc này bằng cấu trúc của mã đề khác.

Yêu cầu kỹ thuật chung (áp dụng cho cả 8 mã đề Lần 1)

Bố cục tối thiểu 4 vùng: header, thanh điều hướng, khu vực nội dung chia nhiều cột, footer nhiều cột.
Khu vực nội dung có ít nhất 6 thẻ con sắp xếp bằng Flexbox, các thẻ không được có chiều rộng bằng nhau, điều khiển bằng flex-grow và flex-basis.
Bắt buộc dùng justify-content, align-items cho container; align-self cho ít nhất 1 phần tử riêng; order để đổi thứ tự hiển thị của ít nhất 1 phần tử so với thứ tự trong HTML.
Có ít nhất 1 phần tử dùng display: inline-block và 1 phần tử bị ẩn bằng display: none.
Không được dùng CSS Grid, không được dùng float.

Ngữ cảnh riêng của mã đề F

Ứng dụng đặt đồ ăn - tên sản phẩm minh hoạ: MónNgon. Menu điều hướng gồm: Trang chủ, Món ăn, Nhà hàng, Ưu đãi, Đơn hàng, Liên hệ. Khu vực nội dung chính hiển thị món ăn nổi bật.