Bắt đầu code Testimonials Section trong dự án web landing page

     <section class="section-testimonials">
            <div class="u-center-text u-margin-bottom-big">
                <h2 class="heading-secondary">
                    testimonials
                </h2>
            </div>
            <div class="row">
                <div class="testimonial">
                    <figure class="testimonial__shape">
                        <!-- <img src="./img/person1.jpg" class="testimonial__img" alt="photo1">
                        <figcaption class="testimonial__caption">
                            Lionel Meshi
                        </figcaption> -->
                    </figure>
                    <div class="testimonial__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            thank for your guide
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        </p>
                    </div>
                </div>
                <div class="testimonial">
                    <figure class="testimonial__shape">
                        <!-- <img src="./img/person2.jpg" class="testimonial__img" alt="photo2">
                        <figcaption class="testimonial__caption">
                            Hellarri Cshinson
                        </figcaption> -->
                    </figure>
                    <div class="testimonial__text">
                        <h3 class="heading-tertiary u-margin-bottom-small">
                            very helpful course
                        </h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Incidunt repellat tenetur officia quis quasi,
                            temporibus neque reiciendis quaerat exercitationem quibusdam?
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Possimus dolorem labore nam?
                        </p>
                    </div>
                </div>
            </div>
            <div class="u-center-text u-margin-top-big u-margin-bottom-big">
                <a href="#" class="btn-text">read all the testimonials &rarr;</a>
            </div>
        </section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

// pages/_home.scss
.section-testimonials {
    
    padding: 5rem 0;
}
1
2
3
4
5
6

// main.scss
@import './components/testimonials';
1
2
3

.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);
}
1
2
3
4
5
6
7
8
9
10
11

&__shape{
        width: 15rem;
        height: 15rem;
        background-color: orangered;
        float: left;
    }
1
2
3
4
5
6
7

&__shape{
        clip-path: circle(50% at 50% 50%);
        transform: translateX(-3rem);
        margin-top: -1rem;    
}
1
2
3
4
5

.testimonial{
    padding-left: 9rem;
}
1
2
3
4

&__shape{
         shape-outside: circle(50% at 50% 50%);
}
1
2
3
4

&__img{
        width: 100%;
        transform: translateY(-2rem);
    }
1
2
3
4
5

&__caption{
        
        top: 50%;
        left: 50%;
        transform: translate(-50%,20%);
        color: $color-white;
        text-transform: uppercase;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
  }
1
2
3
4
5
6
7
8
9
10
11
12

// components/_testimonials.scss
.testimonial{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 2rem;
    box-shadow: 0 3rem 6rem rgba($color-black, .15);
    padding: 6rem;
    padding-left: 9rem;
    font-size: $default-font-size;
    border-radius: 100rem;
    background-color: rgba($color-white, .1);

    &__shape{
        width: 15rem;
        height: 15rem;
        float: left;
        clip-path: circle(50% at 50% 50%);
        transform: translateX(-3rem);
        margin-top: -1rem;
        shape-outside: circle(50% at 50% 50%);
        
    }

    &__img{
        width: 100%;
        transform: translateY(-2rem);
    }

    &__caption{
        
        top: 50%;
        left: 50%;
        transform: translate(-50%,20%);
        color: $color-white;
        text-transform: uppercase;
        font-size: 1.7rem;
        text-align: center;
        opacity: 0;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41