Testimonial Style 17

HTML

<section class="testimonial-17-section" id= "ts-17-section">
    <div class="ts-17-container"> 
        <div class="testimonials-slider-and-drag">
            <div class="box-1">
                <div class="ts-17-carousel owl-carousel owl-theme">
                    <!-- item 1 -->
                    <div class="item">
                        <div class="ts-17-testimonial-box">
                            <div class="blue-heading">
                                <h3 class="ts-17-title">#Very<br>Good</h3>
                            </div>
                            <div class="ts-17-content">
                                <h3 class="ts-17-content-user">John Doe</h3>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <p class="ts-17-content-desc">
                                    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. n 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.
                                </p>
                            </div>
                        </div>
                    </div>    
                    <!-- item 2 -->
                    <div class="item">
                        <div class="ts-17-testimonial-box">
                            <div class="blue-heading">
                                <h3 class="ts-17-title">#Very<br>Good</h3>
                            </div>
                            <div class="ts-17-content">
                                <h3 class="ts-17-content-user">John Doe</h3>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <p class="ts-17-content-desc">
                                    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. n 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.
                                </p>
                            </div>
                        </div>
                    </div> 
                    <!-- item 3 -->
                    <div class="item">
                        <div class="ts-17-testimonial-box">
                            <div class="blue-heading">
                                <h3 class="ts-17-title">#Very<br>Good</h3>
                            </div>
                            <div class="ts-17-content">
                                <h3 class="ts-17-content-user">John Doe</h3>
                                <div class="star-board-rating">
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-solid fa-star star-rate"></i>
                                    <i class="fa-regular fa-star-half-stroke star-rate"></i>
                                </div>
                                <p class="ts-17-content-desc">
                                    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. n 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.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>                
    </div>
</section>

CSS

.ts-17-container{
    width: 70%;
    margin: 45px auto;
}
.ts-17-content {
    border-radius: 0px 0px 35px 35px;
    background: #E9E9E9;
    padding: 15px 115px 30px;
    width: 70%;
    margin: 40px auto;
    position: relative;
}
.ts-17-container .ts-17-content::before{
    content: '';
    position: absolute;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/08/ts-17-bg_2.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: -155px;
    left: 0;
    z-index: -1;
}
.ts-17-container .blue-heading {
    background: #3468DB;
    border-radius: 410px;
    width: 220px;
    aspect-ratio: 1/1;
    margin: auto;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    top: 25px;
}
.ts-17-testimonial-box .blue-heading .ts-17-title{
    color: #FFF;
    font-family: 'Bebas Neue';
    text-align: center;
    font-style: normal;
    font-size: 36px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    margin: 0px;
}
.ts-17-testimonial-box .ts-17-content .ts-17-content-user{
    color: #3468DB;
    font-style: normal;
    font-family: 'Bebas Neue';
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
    margin-top: 10px;
}
.ts-17-testimonial-box .ts-17-content .ts-17-content-desc{
    color: #000;
    text-align: center;
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    position: relative;
    margin: 0;
}
.ts-17-testimonial-box .ts-17-content .ts-17-content-desc::before{
    content: '';
    position: absolute;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/08/left-apostrophe.png);
    top: 0;
    left: -48px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
}
.ts-17-testimonial-box .ts-17-content .ts-17-content-desc::after {
    content: '';
    position: absolute;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/08/right-apostrophe.png);
    right: -48px;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    bottom: 0;
}
.star-board-rating{
    text-align: center;
    margin-block: 16px;
}
.star-rate{
    color: #FFA800;
}
.ts-17-testimonial-box .owl-theme .owl-nav{
position: relative;
}
#ts-17-section .ts-17-container .owl-theme .owl-dots .owl-dot.active span {
    background: transparent;
    border: 2px solid #3468DB ;
}
#ts-17-section .ts-17-container .owl-theme .owl-dots .owl-dot:hover span {
    background: #D6D6D6;
    border: 2px solid #3468DB ;
}
#ts-17-section .ts-17-container .owl-next {
    position: relative;
    right: -105px;
}
#ts-17-section .ts-17-container .owl-prev{
    position: relative;
    left: -105px;
}
#ts-17-section .ts-17-container .owl-prev, #ts-17-section .ts-17-container .owl-next {
top:  50px;
}
#ts-17-section .ts-17-container button.owl-prev::after, #ts-17-section .ts-17-container button.owl-next::after,
#ts-17-section .ts-17-container button.owl-dot::after{
display: none;
}
#ts-17-section .ts-17-container .owl-theme .owl-nav [class*='owl-']:hover {
background: transparent;
}
#ts-17-section .ts-17-container .owl-theme .owl-nav [class*='owl-']{
    background: transparent;
}
@media(max-width:1180px){
.ts-17-container .ts-17-content {
    padding: 15px 60px 30px;
    width: 83%;
}
    .ts-17-container .ts-17-content::before{
    top: -125px;
}
    .ts-17-container .blue-heading{
        width: 205px;
        top: 30px;
}
}
@media (max-width: 1024px){
    .ts-17-container .blue-heading {
    width: 175px;
    top: 25px;
    }
}
@media(max-width:768px){
    .ts-17-container .ts-17-content {
    padding: 15px 60px 30px;
        border-radius: 0px 0px 20px 20px;
    width: 75%;
}
    .ts-17-container .ts-17-content::before {
        width: 100%;
        height: 40%;
        top: -100px;
    }
    .ts-17-container .ts-17-testimonial-box .blue-heading .ts-17-title{
        font-size: 26px;
    }
    .ts-17-container .blue-heading {
          width: 125px;
          top: 20px;
    }
    
    .ts-17-container{
        width:90%;
    }
    
}
@media(max-width:480px){
    .ts-17-container .ts-17-content{
        width: 80%;
        padding: 15px 25px 15px;
        border-radius: 0px 0px 10px 10px;
    }
    .ts-17-container .ts-17-testimonial-box .ts-17-content .ts-17-content-desc::before{
        display: none;
    }
    .ts-17-container .ts-17-testimonial-box .ts-17-content .ts-17-content-desc::after{
        display: none;
    }
    .ts-17-container .ts-17-content::before{
        top: -75px;
        left: 0px;
        width: 100%;
        height: 20%;
    }
    .ts-17-container .ts-17-testimonial-box .blue-heading .ts-17-title{
        font-size: 20px;
    }
    .ts-17-container .blue-heading{
        width: 130px;
        top: 30px;
        left: 2px;
    }
    .ts-17-testimonial-box .ts-17-content .ts-17-content-desc{
        font-size: 14px;
    }
    .ts-17-testimonial-box .ts-17-content .ts-17-content-user{
        margin-top: 0px;
    }
    .ts-17-testimonial-box .star-board-rating {
        margin-block: 5px;
    }
}

JS

jQuery(document).ready(function(){
    
    let ts_style_17= jQuery(".ts-17-carousel");
    
    ts_style_17.owlCarousel({
	loop:true,
	margin:10,
	nav:true,
	dots:true,
	navText: ["<img src='https://nuitwebtek.com/wp-content/uploads/2023/08/arrow-prev-2.png'alt=''class='owl-img-prev'>",
	"<img src='https://nuitwebtek.com/wp-content/uploads/2023/08/arrow-next-2.png'alt=''class='owl-img-next'>"],
	responsive:{
		  0:{
			  items:1,
			  nav: false,
		  },
		  600:{
			  items:1
		  },
		  1000:{
			  items:1
		  }
	  }
  })
    
});

Links

     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <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" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

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>

Testimonial Style 17

#Very
Good

John Doe

#Very
Good

John Doe

#Very
Good

John Doe

HTML

CSS

JS

Links

Scripts

Testimonial Style 17

#VeryGood

John Doe

#VeryGood

John Doe

#VeryGood

John Doe

HTML

CSS

JS

Links

Scripts

#Very
Good

#Very
Good

#Very
Good