Hướng dẫn testimonial html - lời chứng thực html
Dẫn nhậpỞ bài học trước chúng ta đã cùng nhau kết thúc quá trình CODE COURSES SECTION. Show Trong bài học này chúng ta sẽ cùng nhau code tiếp phần Testimonials section. Testimonials section. Nội dungĐể tiếp thu tốt bài học này các bạn cần:
Trong bài này chúng ta sẽ cùng nhau:
Code HTML cho phần testimonials sectionTrước hết chúng ta sẽ nhìn lại sản phẩm chúng ta sẽ đạt được sau phần này: Bố cục phần này gồm heading của testimonials, phần quan trọng nhất là các thẻ chứa những lời nhận xét của khách hàng - Testimonial component và cuối cùng là button “read all the testimonials”, ở đây phần background sẽ được cover bởi 1 đoạn video ngắn.heading của testimonials, phần quan trọng nhất là các thẻ chứa những lời nhận xét của khách hàng - Testimonial component và cuối cùng là button “read all the testimonials”, ở đây phần background sẽ được cover bởi 1 đoạn video ngắn. Trước hết thì mình sẽ tạm thời bỏ phần background ở phần sau của bài học. Chúng ta sẽ có code HTML như sau:background ở phần sau của bài học. Chúng ta sẽ có code HTML như sau:
Tương tự như các section khác chúng ta sẽ bọc toàn bộ phần này trong 1 class name là section-testimonials. Tiêu đề của section trong thẻ h2. Tiếp theo là các thẻ chứa nhận xét của khách hàng (thẻ div.testimonial). Trong thẻ testimonial lại chia làm 2 phần nhỏ: class name là section-testimonials. Tiêu đề của section trong thẻ h2. Tiếp theo là các thẻ chứa nhận xét của khách hàng (thẻ div.testimonial). Trong thẻ testimonial lại chia làm 2 phần nhỏ: Phần chứa Ảnh (img.testimonial__img) và tên khách hàng (figcaption.testimonial__caption) nằm trong thẻ figure.testimonial__shape. Trong đó, phần image và caption được comment lại để chúng ta sẽ căn chỉnh css cho testimonial__shape trước và sẽ dễ ví dụ và quan sát hơnẢnh (img.testimonial__img) và tên khách hàng (figcaption.testimonial__caption) nằm trong thẻ figure.testimonial__shape. Trong đó, phần image và caption được comment lại để chúng ta sẽ căn chỉnh css cho testimonial__shape trước và sẽ dễ ví dụ và quan sát hơn Phần text gồm tiêu đề (h3.heading-tertiary) và lời nhận xét (thẻ p) nằm trong thẻ div.testimonial__texttext gồm tiêu đề (h3.heading-tertiary) và lời nhận xét (thẻ p) nằm trong thẻ div.testimonial__text Code Testimonial ComponentChúng ta sẽ code phần section trước
Việc sử dụng padding rất quen thuộc, còn set position: relative sẽ dùng để chúng ta set background-video về sau (background video sẽ có position: absollute, để vậy cho chúng ta có thể dễ dàng căn chỉnh vị trí của background)position: relative sẽ dùng để chúng ta set background-video về sau (background video sẽ có position: absollute, để vậy cho chúng ta có thể dễ dàng căn chỉnh vị trí của background) Bây giờ chúng ta sẽ chuyển sang codetestimonials componentvà như cái tên của nó chúng ta sẽ tạo 1 file trong folder component có tên _testimonials.scss và import nó vào main.scsstestimonials componentvà như cái tên của nó chúng ta sẽ tạo 1 file trong folder component có tên _testimonials.scss và import nó vào main.scss
Quay trở lại file _testimonials.scss _testimonials.scss
Tiếp theo ta sẽ chuyển đến code css cho testimonial__shape. testimonial__shape. Trước hết set width và height bằng nhau và bằng 15rem.width và height bằng nhau và bằng 15rem. Set backgroundcolor: orangeredbackgroundcolor: orangered Và để vị trí shape ở phía bên trái sử dụng float:left;float:left;
Ở đây ta sẽ tạo shape hình tròn bằng cách sử dụng clip-path (vì &__shape còn chứa image nền sử dụng clip-path mới có thể khiến image bên trong &__shape cũng có hình tròn không nó sẽ bị tràn ra ngoài).clip-path (vì &__shape còn chứa image nền sử dụng clip-path mới có thể khiến image bên trong &__shape cũng có hình tròn không nó sẽ bị tràn ra ngoài). Ta cách text và image ra xa nhau 1 đoạn bằng cách sử dụng transform: translateX(-3rem)transform: translateX(-3rem)
Chúng ta sẽ tăng cả padding-left cho testimonials lên 9rem:padding-left cho testimonials lên 9rem:
Tiếp theo chúng ta sẽ làm cho chữ sẽ nằm theo viền hình tròn của shape bằng cách sử dụng 1 thuộc tính CSS mới shape-outlineshape-outline
Nó sẽ giúp các bạn tạo cho chữ ở các dòng sát với &__shape sẽ chạy theo viền hình tròn (có thể tạo hình ellipse, polygon, … chứ không chỉ có hình tròn) &__shape sẽ chạy theo viền hình tròn (có thể tạo hình ellipse, polygon, … chứ không chỉ có hình tròn) (hình tròn màu xanh chính chỉ tác dụng shape-outline sẽ tạo ra, chữ sẽ không chèn được vào hình tròn đó và tạo thành viền hình tròn )shape-outline sẽ tạo ra, chữ sẽ không chèn được vào hình tròn đó và tạo thành viền hình tròn ) Bây giờ đây chúng ta sẽ bắt tay vào code phần image và caption.image và caption. Trước hết là bỏ phần comment trong file htmlvà xóa background color của &__shapebỏ phần comment trong file htmlvà xóa background color của &__shape Chúng ta sẽ chỉnh cỡ ảnh trước, nó sẽ chiếm 100% width của shape: width: 100%shape: width: 100% Và chỉnh vị trí ảnh nhích lên 1 chút.
Tiếp theo ta sẽ chỉnh &__caption.&__caption. Đầu tiên ta phải để &__shape có để &__caption có thể hiển thị đè lên &__img. &__shape có để &__caption có thể hiển thị đè lên &__img. Tiếp theo là set position cho &__caption là absolute và chỉnh vị trí.position cho &__caption là absolute và chỉnh vị trí.
Ban đầu caption có opacity là 0 và nằm phía dưới của của image, sau khi hover sẽ hiện từ dưới lên và có opacity là 1, những phần còn lại như font-size,text-align, color thì đã quen thuộc với các bạn rồi :Dopacity là 0 và nằm phía dưới của của image, sau khi hover sẽ hiện từ dưới lên và có opacity là 1, những phần còn lại như font-size, text-align, color thì đã quen thuộc với các bạn rồi :D Code SASS 0 Kết luậnỞ bài này chúng ta đã cùng nhau code phần Testimonials component. Ở bài sau chúng ta sẽ tạo HIỆU ỨNG KHI HOVER HÌNH ẢNH CỦA TESTIMONIAL VÀ SET VIDEO BACKGROUND CHO SECTION TESTIMONIALS. Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: "Luyện tập – Thử thách – Không ngại khó". Luyện tập – Thử thách – Không ngại khó". Tải xuốngProjectNếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!PROJECT THAM KHẢO ở link bên dưới! Thảo luậnNếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. |