Thiết kế Landing Page sản phẩm

Mục tiêu: Thực hành bố cục website hiện đại.

Chủ đề

Sinh viên chọn một trong các sản phẩm:

• Điện thoại

• Laptop

• Khóa học

• Quán cà phê

• Nhà hàng

• Mỹ phẩm

• Du lịch

Website gồm:

HEADER

 ├── Logo

 └── Menu

HERO

 ├── Tiêu đề

 ├── Mô tả

 ├── Button

 └── Hình sản phẩm

FEATURES

 ├── Feature 1

 ├── Feature 2

 └── Feature 3

PRODUCT

REVIEWS

CONTACT

FOOTER

Bắt buộc sử dụng:

display: flex;

display: grid;

position;

hover;

transition;

box-shadow;

border-radius;

Ví dụ hiệu ứng:

.product-card {

    transition: 0.3s;

}

.product-card:hover {

    transform: translateY(-10px);

}