Hướng dẫn testimonial html - lời chứng thực html

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 Component

Chúng ta sẽ code phần section trước

// pages/_home.scss
.section-testimonials {
    
    padding: 5rem 0;
}

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

// main.scss
@import './components/testimonials';

Quay trở lại file _testimonials.scss _testimonials.scss

• Trước tiên ta sẽ để cho width của component chiếm 80% viewwidth: width:80%. width:80%.
• Margin để component nằm giữa màn hình : margin: 0 auto;margin: 0 auto;
• Thêm 1 chút margin bottom để tạo khoảng cách giữa 2 testimonials: margin-bottom: 2rem;bottom để tạo khoảng cách giữa 2 testimonials: margin-bottom: 2rem;
• Padding: padding: 6rem;padding: 6rem;
• Cũng cần 1 chút shadow cho component: box-shadow: 0 3rem 6rem rgba[$color-black, .15];box-shadow: 0 3rem 6rem rgba[$color-black, .15];
• Border radius tạo viền tròn: border-radius: 100rem;border-radius: 100rem;
• Font size để là font-size: $default-font-size;font-size: $default-font-size;
• Background sẽ để là transparent để ta có thể nhìn được background bên dưới: background-color: rgba[$color-white, .1];transparent để ta có thể nhìn được background bên dưới: background-color: rgba[$color-white, .1];

.testimonial{
    width: 80%;
    padding: 6rem;
    margin-bottom: 2rem;
    margin: 0 auto;
    box-shadow: 0 3rem 6rem rgba[$color-black, .15];
    font-size: $default-font-size;
    border-radius: 100rem;
    background-color: rgba[$color-white, .1];
}

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;

&__shape{
        width: 15rem;
        height: 15rem;
        background-color: orangered;
        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]

&__shape{
        clip-path: circle[50% at 50% 50%];
        transform: translateX[-3rem];
        margin-top: -1rem;    
}

Chúng ta sẽ tăng cả padding-left cho testimonials lên 9rem:padding-left cho testimonials lên 9rem:

.testimonial{
    padding-left: 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

&__shape{
         shape-outside: circle[50% at 50% 50%];
}

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.

&__img{
        width: 100%;
        transform: translateY[-2rem];
    }

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í.

&__caption{
        
        top: 50%;
        left: 50%;
        transform: translate[-50%,20%];
        color: $color-white;
        text-transform: uppercase;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
  }

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

// pages/_home.scss
.section-testimonials {
    
    padding: 5rem 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ống

Project

Nế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ận

Nế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.