Testimonial Style 20

HTML

<section class="ts-section">
    <div class="ts-container">
        <div class="ts-row">
            <div class="ts-col">
                <div class="ts-box-wrapper-outer">
                    <div class="ts-box-wrapper-inner">
                        <div class="ts-box-testimonial-wrapper">
                            <div class="ts-carousel owl-carousel owl-theme">
                                <!-- item 1 -->
                                <div class="ts-content-wrapper item" id="ts-item">
                                    <div class="ts-testimonial-header">The Best-1</div>
                                    <div class="ts-rating-review">
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                    </div>
                                    <div class="ts-testimonial-details">
                                            Publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                                    </div>
                                    <div class="ts-credentials">
                                        <div class="ts-username">
                                                Henry Ford
                                        </div>
                                        <div class="ts-designation">
                                                Position
                                        </div>
                                    </div>
                                </div>
                                <!-- item 2 -->
                                <div class="ts-content-wrapper item" id="ts-item">
                                    <div class="ts-testimonial-header">The Best-2</div>
                                    <div class="ts-rating-review">
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                    </div>
                                    <div class="ts-testimonial-details">
                                            Publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                                    </div>
                                    <div class="ts-credentials">
                                        <div class="ts-username">
                                                Thomas Ford
                                        </div>
                                        <div class="ts-designation">
                                                Position
                                        </div>
                                    </div>
                                </div>
                                <!-- item 3 -->
                                <div class="ts-content-wrapper item" id="ts-item">
                                    <div class="ts-testimonial-header">The Best-3</div>
                                    <div class="ts-rating-review">
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                        <i class="fa-solid fa-star" id="star-color"></i>
                                    </div>
                                    <div class="ts-testimonial-details">
                                            Publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
                                    </div>
                                    <div class="ts-credentials">
                                        <div class="ts-username">
                                                Tom Ford
                                        </div>
                                        <div class="ts-designation">
                                                Position
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.ts-section {
    height: 100vh;
    display: grid;
    background-color: #3287D3;
}
.ts-container{
    overflow: hidden;
    max-width: 80%;
    margin: auto;
}
#ts-item {
    border-radius: 12px;
    background: #FFF;
    text-align: center;
    padding: 2%;
    max-width: 40%;
    margin: auto;
}
.ts-testimonial-header{
    color: #3287D3;
    font-family: 'Roboto';
    font-size: 30px;
    font-weight: 700;
    line-height: 1.6;
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0px 0px 12px 0px rgba(10, 55, 142, 0.24);
    width: fit-content;
    padding-inline: 15px;
    margin: auto;
    position: relative;
}
#star-color{
    color: #FFA800;
}
.ts-testimonial-details {
    padding-inline: 10%;
    color: #000;
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 1.6;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/09/group66.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.ts-rating-review {
    padding: 5%;
}
.ts-credentials{
    padding: 20px;
}
.ts-username{
    color: #E30047;
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: 700;
    position: relative;
}
.ts-designation{
    color: #171E24;
    font-family: 'Roboto';
    text-align: center;
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 10px;
}
.ts-box-testimonial-wrapper .owl-nav .owl-prev {
    position: absolute;
    top: 30px;
    left: 500px;
}
.ts-box-testimonial-wrapper .owl-nav .owl-next{
    position: absolute;
    top: 30px;
    right: 500px;
}
.ts-box-testimonial-wrapper .owl-theme .owl-nav [class*='owl-']:hover {
    background: transparent;
    color: transparent;
    text-decoration: none;
}
.ts-arrow{
    font-size: 30px;
    color: #3287D3;
    
}
.ts-box-testimonial-wrapper{
    position: relative;
}
@media (max-width:1536px){
    .ts-box-testimonial-wrapper .owl-nav .owl-prev {
        left: 380px;
    }
    .ts-box-testimonial-wrapper .owl-nav .owl-next{
        right: 380px;
    }
}
@media(max-width:821px){
    #ts-item{
        max-width: 70%;
    }
}
@media(max-width:480px){
    #ts-item{
        max-width: 100%;
    }
    .ts-testimonial-header{
        margin-top: 10px;
    }
}

JS

jQuery(document).ready(function(){

    const testimonialSlider20 = jQuery('.ts-carousel.owl-carousel');
    
    testimonialSlider20.owlCarousel({
          loop:true,
          margin:10,
          width:270,

          URLhashListener:true,
          navText: ["<i class='fa-solid fa-arrow-left ts-arrow'></i>",
          "<i class='fa-solid fa-arrow-right ts-arrow'></i>"],
          responsiveClass:true,
          responsive:{
                0:{
                    items:1,
                    nav:false,
                    dots:true,
                },
                600:{
                    items:1,
                    nav:false,
                    dots:true,
                },
                1200:{
                    items:1,
                    nav:true,
                    dots:false,
                }
            }
        })
    
});

Links

<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

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

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

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

Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>