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

Ở bài trước chúng ta đã làm tới Block Blog. Hôm nay chúng ta sẽ tiếp tục với các Blocks cuối cùng là Contact và Footer. Các bạn có thể coi hình kết quả dưới đây.

# Block Contact

Nhìn vào hình ta thấy Block này cũng 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à ở dưới các bạn cũng có thể thấy rằng layout được chia thành hai cột, cột bên trái là thông tin như địa chỉ, email, số điện thoại kèm icon bên trái màu trắng, hình tròn và có màu nền là màu chủ đạo.

Ở bên phải là một cái form liên hệ với các trường như tên, email, khung soạn thảo tất cả đều có placeholder in hoa và một nút button với các style mà chúng ta đã định nghĩa từ các bài trước. Ở mục email mình sẽ dùng thẻ a với hrefmailto để khi người ta nhấn vào sẽ hiện lên hành động gửi mail, tương tự cho số điện thoại thì mình dùng hreftel để khi nhấn vào sẽ gọi trên điện thoại. Ta có HTML cho block này như sau:

Và kết quả lúc này thì chưa được đẹp lắm vì chưa có CSS nhúng tay vào cho nên chúng ta sẽ CSS tiếp theo dưới đây.

Để chia cột thì chúng ta sẽ dùng CSS Flexbox nhé với thuộc tính display: flex thì sẽ tạo ra hai cột hai bên trong trường hợp này. Cột bên trái là .contact__info chiếm 35% và bên phải là .contact__form chiếm 65%, các bạn để ý trên hình thì chỗ contact có cách một khoảng trắng bên trái là 120px = 12rem nên chúng ta sẽ dùng thêm padding-left: 12rem.

Ở cột bên trái chúng ta có 3 phần tử, cách đều nhau trên dưới thì ở đây mình sẽ chọn cái số 2 bằng cách dùng :nth-of-type(2) sau đó margin cho nó là xong. Sau đó mình cũng áp dụng Flexbox để chia thành 2 cột nhỏ, cột bên trái sẽ là icon với độ rộng và chiều cao là 5rem, bo tròn, màu trắng có màu nền là màu chủ đạo, và để khi co màn hình lại nó không bị bóp lại mình dùng thêm flex-shrink: 0.

Ở cột bên phải thì là một cái form, với các trường input, textarea CSS như nhau như padding, font chữ, kiểu chữ. Chữ khi nhập vào là in thường tuy nhiên placeholder lại là in hoa thì chúng ta sẽ dùng pseudo class ::-wekbit-input-placeholder để style chữ in hoa riêng. Cuối cùng là button như những button mà chúng ta đã định nghĩa từ trước với các class như btn btn--rounded btn--primary. Cuối cùng ta có CSS như sau:

Vì mình thấy khi xuống mobile mình muốn cái .contact__form cũng như .contact__info rộng 100% cho nên mặc định mình cho 2 tụi nó là 100% còn nếu màn hình lớn hơn mobile tức là > 768px thì mình sẽ set như đã phân tích ban đầu là 35% 65%

Ta có kết quả như mong đợi

# Block Footer

Block này khá đơn giản với một tấm hình logo, menu chúng ta sẽ tái sử dụng code ở trên block Header, và một danh sách các icon mạng xã hội, đoạn chữ copyright rất đơn giản nên mình sẽ bỏ qua nhé. Như vậy ta có HTML như sau:

Vì ở trên block Header thì Menu có CSS margin-left: 12% nên xuống footer chúng ta sẽ CSS đè lên là xong.

Ở mục Social thì mình dùng thẻ ul li kết hợp với Flexbox để chia 4 icon ra đều nhau với thuộc tính padding, sau đó thì dùng border-left cho chúng, nhưng không áp dụng cho cái đầu tiên nên sẽ dùng thêm :not(:first-child) để loại trừ cái đầu tiên. Những icon này có màu mặc định nhưng khi rê chuột vào thì đổi màu nên chúng ta sẽ thêm :hover cho chúng. Lúc này ta có CSS như sau:

Và tada kết quả ngon lành

# Tạm kết

Như vậy là đã xong phần 6. Ở phần cuối sắp tới chúng ta sẽ dùng một chút Javascript để làm Toggle Menu, nên các bạn hãy nhớ đón đọc nhé. Và cuối cùng đừng quên tham khảo code của mình tại đây nhé. Chúc các bạn một ngày tốt lành.

avatar
Trí
Guest
Trí

hay quá

Duy Linh Dang
Guest
Duy Linh Dang

Ra phần cuối nhanh a ơi <3 <3