Hướng dẫn cắt PSD toàn tập với Leospa design phần 4

Ở bài trước chúng ta đã hoàn thành cơ bản xong phần About. Hôm nay chúng ta sẽ tiếp tục tới phần Popular và Quote như hình dưới đây.

# Popular

Nhìn vào hình ta thấy mỗi block đều có tiêu đề kèm mô tả mà chúng ta đã phân tích ở những bài trước đó chính là tái sử dụng chỗ .heading. Nên ta có HTML lúc này như sau

Tiếp đến là danh sách các phần tử gồm có 3 cột giống nhau chỉ khác về nội dung mà thôi. Trong mỗi cột thì có hình ảnh, tiêu đề, mô tả và một nút Learn more. Từ đây chúng ta có thể dùng ul li để chia cột, sau đó kết hợp CSS Flexbox để tạo khoảng cách giữa các phần tử với nhau, vì khi nhấn vào các phần tử đó đều ra liên kết cho nên trong mỗi thẻ li đều là một thẻ a bọc lại, và chỗ Learn more thay vì thẻ a, thì chúng ta có thể để thẻ button cũng được nhé.

Vì thẻ a không bọc lại thẻ a được cho nên chúng ta phải dùng button thay thế. Trong mỗi phần tử có tiêu đề là kiểu Font Kaushan-Script còn mô tả là Roboto với các màu sắc chúng ta đã phân tích ở các bài trước và cách lấy Font chữ từ Photoshop. Ta có HTML như sau

Vì phần heading đã code chung từ những bài trước rồi nên không cần phải CSS lại làm gì. Như mình đã nói ở trên thì phần Popular này có 3 phần tử bằng nhau nên mình sẽ dùng Flexbox để chia cột và chúng ta thấy rằng giữa các phần tử cách nhau khoảng 20px, vậy có 3 phần tử khoảng cách giữa chúng sẽ là 2 x 20px = 40px sau đó chia cho 3 phần tử khoảng 13.33px. Cho nên độ rộng của mỗi phần tử sẽ là 33.33% - 13.33px. Lúc này ta có CSS như sau

Các bạn để ý thì khi hover vào phần tử thì thấy có box-shadow và nút button đổi màu từ đây chúng ta kết hợp thêm :hover để làm điều đó và kết hợp thêm transition để cho nó mượt mà hơn.

Phần này khi Responsive xuống mobile thì do không đủ chỗ và chúng ta sẽ cho nó thành hàng dọc bằng cách set độ rộng của các phần tử thành 100% là xong. Và cho chúng cách nhau một chút chúng ta sẽ dùng thêm thuộc tính margin-bottom: 25px nhé.

# Quote

Phần này nó là Slider tuy nhiên ở phạm vi bài viết về HTML CSS thì chúng ta cứ làm giống như thiết kế là được. Phần này khá dễ chỉ gồm 1 cái hình quote, 1 đoạn text, 1 hình tác giả và tên tác giả và hình nên màu hồng lợt. Lúc này ta có HTML đơn giản như sau:

CSS ở phần này cũng không khó, chỉ đơn giản là canh giữa, cho hình tác giả bo tròn và tên tác giả có 2 fonts chữ khác nhau. Riêng phần 4 dấu chấm tròn ở dưới chúng ta sẽ dùng ul li để làm việc đó và cho một class active ở thẻ li thứ 2 là được rồi.

# Tạm kết

Thế là xong phần 4 với block Popular và Quote. Các bạn có thể tham khảo code tại đây nhé. Chúc các bạn một ngày tốt lành và một năm mới bình an.

Related Posts
avatar
900
Nguyễn Sơn Hải
Guest
Nguyễn Sơn Hải

Em cảm ơn anh nhiều nhé,xD

Nguyễn Anh Tuấn
Guest
Nguyễn Anh Tuấn

cho em hỏi theo cấu trúc thì thẻ inline không bọc ngoài được thẻ block, thì mình display: block cho thẻ inline thì lại bọc được thẻ block hay ntn ạ?? Em đang muốn hỏi chỗ thẻ bọc thẻ

ở chỗ class=”popular__link”.