Testimonial Style 2

HTML

<section id="t2" class="mobile-d-none">
    <div class="mycontainer">
    <div class="ts-owl owl-carousel owl-theme">
        <div class="item">
            <div class="testimonial-box">
                <div class="header-flex">
                    <div class="t2-flex">
                        <h2>Matthew Paul - <br><span>CEO</span></h2>
                        <div class="rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-regular fa-star-half-stroke"></i>
                        </div>
                    </div>
                        <div class="img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/crypto.png" alt="">
                        </div>
                </div>
                <div class="content-wrap">
                    <p>
                        Amet minim mollit non deserunt ullamco est
                        sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam
                        consequat sunt
                        nostrud Amet minim mollit non deserunt ullamco est sit aliqu
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="testimonial-box">
                <div class="header-flex">
                    <div class="t2-flex">
                        <h2>Elizabeth jones - <br><span>Chief Financial Officer</span></h2>
                        <div class="rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-regular fa-star-half-stroke"></i>
                        </div>
                    </div>
                        <div class="img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/ts-img-1.png" alt="">
                        </div>
                </div>
                <div class="content-wrap">
                    <p>
                        Amet minim mollit non deserunt ullamco est
                        sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam
                        consequat sunt
                        nostrud Amet minim mollit non deserunt ullamco est sit aliqu
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="testimonial-box">
                <div class="header-flex">
                    <div class="t2-flex">
                        <h2>Sarah Timothy - <br><span>Chief Technology Officer (CTO)</span></h2>
                        <div class="rating">
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-solid fa-star"></i>
                            <i class="fa-regular fa-star-half-stroke"></i>
                        </div>
                    </div>
                        <div class="img">
                            <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/ape-social.png" alt="">
                        </div>
                </div>
                <div class="content-wrap">
                    <p>
                        Amet minim mollit non deserunt ullamco est
                        sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam
                        consequat sunt
                        nostrud Amet minim mollit non deserunt ullamco est sit aliqu
                    </p>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

CSS

#t2 {
        background-color: #6AC9F9;
        position: relative;
        z-index: 0;
        padding-block:3rem;
        padding-inline:1.5rem;
}
#t2 .mycontainer {
        max-width: 1320px;
        margin-inline: auto;
        padding-top: 20px;
}
#t2 .testimonial-box {
        padding-inline: 45px;
}
.header-flex {
        display: flex;
        justify-content: space-between;
        position: relative;
}

#t2 .owl-carousel [class*="owl-"] button:after {
    display:none;
}
    

#t2 .t2-flex {
        display: flex;
        position: relative;
        background-image: url('https://nuitwebtek.com/wp-content/uploads/2023/08/h2-bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: center;
        /* gap: 40px; */
}
#t2 .t2-flex::after {
        position: absolute;
        content: "";
        background-repeat: no-repeat;
        background-size: contain;
        background: #355ECD;
        height: 100px;
        width: 100px;
        left: 8px;
        bottom: -40px;
        border-radius: 50%;
        z-index: -1;
}
.t2-flex h2 {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        color: #fff;
        font-size: 45px;
        padding-inline: 20px;
        margin: 0;
        margin-left:15px;
}
.t2-flex span {
        font-weight: 400;
        font-style: italic;
        font-size: 30px;
}
#t2 .rating {
        display: flex;
        gap: 10px;
        color: #FFD600;
        font-size: 37px;
        padding-inline: 100px;
        position: relative;
        top: 30px;
}
 .img {
    display: grid;
    align-items: center;
    max-width: 240px;
    background: #fff;
    border-radius: 50%;
    padding: 13px;
    box-shadow: 0px 4px 22px 3px rgba(0, 0, 0, 0.19);
}
#t2 .img img {
        max-width: 100%;
        border-radius: 50%;
}
#t2 .content-wrap {
        background-color: #fff;
        border-radius: 60px;
        position: relative;
        margin-inline: 70px;
        min-height: 260px;
        height: 100%;
        display: grid;
        align-items: center;
        padding: 35px;
        margin-top: -100px;
        z-index: -1;
}
#t2 .content-wrap p {
        font-family: 'Inter', sans-serif;
        font-size: 25px;
        font-weight: 600;
        color: #6E7096;
        margin: 0;
        line-height:1.4;
}
.ts-owl .owl-nav{
        position: relative;
}
.ts-owl .owl-nav [class*=owl-]{
        position: absolute;
        bottom: 0;
        max-width: 45px;
}
.ts-owl .owl-nav [class*=owl-] img{
        max-width: 100%;
}
.ts-owl .owl-nav .owl-prev{
        left: 0;
}
.ts-owl .owl-nav .owl-next{
        right: 0;
}
.ts-owl .owl-nav [class*=owl-]:hover{
        background: transparent;
}
.ts-owl .owl-dots .owl-dot span{
        height: 20px;
        background: #CCE1F4;
}
.ts-owl .owl-dots .owl-dot.active span, .ts-owl .owl-dots .owl-dot span:hover{
        background: #3287D3;
}


/*media query tab*/
@media (max-width:1025px) and (min-width:769px) {
        #t2 .t2-flex{
                gap: 10px;
                background-size: 100% 75%;
                background-position: bottom;
        }
        #t2 .t2-flex::after{
                height: 100px;
                width: 100px;
                left: 4px;
                bottom: -40px;
        }
        .t2-flex h2{
                font-size: 25px;
                > span {
                        font-size: 18px;
                }
        }
        #t2 .rating{
          padding-inline: 18px;
          font-size: 20px;
        }
        .img{
                max-width: 200px;
        }
}

/*  media query mobile */
@media (max-width:768px) {
        
        #t2 .testimonial-box {
            padding-inline: 0;
        }
    
        #t2 .t2-flex{
                flex-direction: column;
                align-items: start;
                gap: 0;
                justify-content: space-between;
        }
        .t2-flex h2{
                font-size: 16px;
                position: relative;
                top: 15px;
                line-height: 20px;
                > span {
                        font-size: 15px;
                }
        }
    
        .t2-flex h2 {
            margin-left:5px;
        }
    
        #t2 .rating{
                padding-inline: 25px;
                font-size: 20px;
                top: 25px;
                left: 15px;
        }
        #t2 .t2-flex::after{
                bottom: -25px;
                left: 2px;
                height: 50px;
                width: 50px;
        }
        .img{
                padding: 8px;
                max-width: 90px;
        }
        #t2 .content-wrap{
                margin-inline: 25px;
                border-radius: 15px;
                margin-top: -40px;
                padding: 75px 20px 15px;
                > p {
                        font-size: 15px;
                }
        }
        .ts-owl .owl-nav [class*=owl-]{
                top: 0;
        }
}

JS

jQuery(document).ready(function(){

let ts_slider2 = jQuery('.ts-owl.owl-carousel');

ts_slider2.owlCarousel({
    loop: true,
    // margin: 10,
    nav:true,
    dots:true,
    navText: ["<img src='https://nuitwebtek.com/wp-content/uploads/2023/08/prev-1.png'>", "<img src='https://nuitwebtek.com/wp-content/uploads/2023/08/next-1.png'>"],
    items:1
})

    
});

Links

<!-- owl carousel css  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />

<!-- fonts awosome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>

<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap" rel="stylesheet">

Scripts

<!-- owl carousel js jqurey  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Testimonial Style 2

Matthew Paul -
CEO

Elizabeth jones -
Chief Financial Officer

Sarah Timothy -
Chief Technology Officer (CTO)

HTML

CSS

JS

Links

Scripts

Testimonial Style 2

Matthew Paul - CEO

Elizabeth jones - Chief Financial Officer

Sarah Timothy - Chief Technology Officer (CTO)

HTML

CSS

JS

Links

Scripts

Matthew Paul -
CEO

Elizabeth jones -
Chief Financial Officer

Sarah Timothy -
Chief Technology Officer (CTO)