Testimonial Style 5

HTML

<section class="t3-section">
  <div class="t3-row">
    <div class="t3-col">
      <h2 class="t3-main-title">Testimonial</h2>
    </div>
  </div>
  <div class="t3-row">
   <div class="t3-col">
     <div class="owl-carousel owl-theme t3-testimonial" id="t3-testimonial">
              <div class="item t3-testimonial-item"><!-- testimonial item start -->
                <div class="t3-testimonial-body">
                    <div class="t3-content-left"><!-- Row-Left-->
                      <div class="t3-column-1"><!-- Col-1-->
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Profile-person.png" class="t3-img">
                      </div>
                      <div class="t3-Name"><!-- Col-2-->
                        <h2>John <span>Doe</span></h2>
                        <p class="t3-position">Position</p>
                      </div>
                    </div>
                    <div class="t3-content-right"><!-- Row-right-->
                      <div class="t3-description"><!-- Col-1-->
                        <p class="t3-quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                      </div>
                    <div><!-- Col-2-->
                    <div class="t3-rating">
                      <!-- <img src="assets/images/rating.png" class="t3-rating-img"> -->
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="far fa-star"></i>
                      <i class="far fa-star"></i>
                    </div>
                </div>
              </div>
              </div>
          </div><!-- testimonial item  end-->

              <div class="item t3-testimonial-item"><!-- testimonial item start -->
                <div class="t3-testimonial-body">
                    <div class="t3-content-left"><!-- Row-Left-->
                      <div class="t3-column-1"><!-- Col-1-->
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Profile-person.png" class="t3-img">
                      </div>
                      <div class="t3-Name"><!-- Col-2-->
                        <h2>John <span>Doe</span></h2>
                        <p class="t3-position">Position</p>
                      </div>
                    </div>
                    <div class="t3-content-right"><!-- Row-right-->
                      <div class="t3-description"><!-- Col-1-->
                        <p class="t3-quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                      </div>
                    <div><!-- Col-2-->
                    <div class="t3-rating">
                      <!-- <img src="assets/images/rating.png" class="t3-rating-img"> -->
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="far fa-star"></i>
                      <i class="far fa-star"></i>
                    </div>
                </div>
              </div>
            </div>
          </div><!-- testimonial item  end-->

              <div class="item t3-testimonial-item"><!-- testimonial item start -->
                <div class="t3-testimonial-body">
                    <div class="t3-content-left"><!-- Row-Left-->
                      <div class="t3-column-1"><!-- Col-1-->
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Profile-person.png" class="t3-img">
                      </div>
                      <div class="t3-Name"><!-- Col-2-->
                        <h2>John <span>Doe</span></h2>
                        <p class="t3-position">Position</p>
                      </div>
                    </div>
                    <div class="t3-content-right"><!-- Row-right-->
                      <div class="t3-description"><!-- Col-1-->
                        <p class="t3-quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
                      </div>
                    <div><!-- Col-2-->
                    <div class="t3-rating">
                      <!-- <img src="assets/images/rating.png" class="t3-rating-img"> -->
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="far fa-star"></i>
                      <i class="far fa-star"></i>
                    </div>
                </div>
              </div><!-- testimonial item  end-->
            </div>
          </div>
     </div>
   </div>
  </div>

</section>

CSS

@import url("https://fonts.googleapis.com/css2?family=Arvo&family=Open+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");

.t3-section  {
  background: #f6911f;
  padding-bottom:50px;
}

.t3-section h2 {
  font-size: 2.5rem;
  text-align: left;
  font-weight: 400;
  color: #f6eac1;
  margin: 3rem 0 0 0;
}
.t3-main-title{
  color: #FFF;
text-align: center;
font-size: 56px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 40px 0px;
}

.t3-section .t3-Name h2 {
    font-size:2rem;
}
 
.t3-section h2 {
  font-family: "Inter", serif;
  font-weight: 700;
  font-size: 4rem;
  color: #ffffff;
  display: flex;
  justify-content: center;
}

.t3-section .owl-item.active{
  background-color: #f6911f;
}

.t3-section .container {  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 1.4fr 0.6fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "gligliug uvkhbh"
    "jgugv hvjvkjh";
}

.gligliug { grid-area: gligliug; }

.uvkhbh { grid-area: uvkhbh; 
  align-self: center;
}
.uvkhbh { grid-area: uvkhbh; }

.jgugv { 
  grid-area: jgugv;
 text-align: center;
}

.hvjvkjh { grid-area: hvjvkjh; }

.apostropheelement::before{
  content: url('https://nuitwebtek.com/wp-content/uploads/2023/08/apostrophe.png');
  position: relative;
  position: relative;
    left: -41px;
}
.apostropheelement2::after{
content: url('https://nuitwebtek.com/wp-content/uploads/2023/08/apostrophe2.png');
    position: relative;
    display: flex;
    justify-content: end;
    top: -91px;
    right: 20%;
    width: 100%;
}

.testimonialcontent::before{
  background-color: #171e24;
  height: 100%;
  width: 3px;
  position: absolute;
  top: 20%;
  left: 20%;
}

.testimonialcontent{
  font-size: 25px;
  width: 80%;
  height: 75%;
}
.verticalLine {
 border-right: 3px solid #171e24;
    height: 53%;
    position: absolute;
    top: 35%;
    left: 416px;
}
.horizontalLine{
/*  border-right: 655px solid #171e24;*/
  background-color: #171e24;
    height: 3px;
     width: 50%; 
    position: absolute;
    top: 71%;
    left: 184px;
}
.t3-quote{
   text-align: center;
  color: #6E7096 !important;
font-size: 16px;
font-style: normal;
font-weight: 400 !important;
line-height: 30.997px;
font-family: "Inter", serif; 
}

.customer-revs {
  margin: 0 auto 0 auto;
}
.testimonyname{
position: relative;
    top: -26px;
  font-size: 29px;
}
.testimonyname .fullname{
  color: #171E24;
  
}
.testimonyname .surname{
  color: #F69626;
  
}


/* slideshow container */
.slideshow-container {
  position: relative;
/*  width: 60rem;*/
  max-width: 80%;
  margin: 0 auto;
}

/* Slides */
.mySlides {
  display: none;
  padding: 2rem 5rem 0 5rem;
}

.mySlidesContainer {
  min-height: 5rem;
/*  padding: 3.5rem 2.5rem 2rem 3.5rem;*/
  background: #ffffff;
}

/* next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  margin-top: -1.875rem;
  padding: 1rem;
  color: #232323;
  font-weight: bold;
  font-size: 3rem;
  border-radius: 3px;
  user-select: none;
  transition: 0.4s;
}

/* position the "next button" to the right */
.next {
  position: absolute;
  right: 0;
  border-radius: 3px;
}

/* on hover, add a black bg color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #000; /* fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  color: #f6eac1;
  text-decoration: none;
}

/* the dot/bullet/indicator container */
.dot-container {
  text-align: center;
  padding: 1rem 1.25rem;
}

/* the dots/bullets/indicators */
.dot {
  height: 0.9375rem;
  width: 0.9375rem;
  margin: 0 2px;
  background-color: #f6eac1;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.4s ease;
}

/* add bg color to the active dot/circle */
.active {
  background-color: #232323;
}


.t3-testimonial-body{
  background-color: white;
  width: 70%;
  margin: auto;
  display: flex;

}
.t3-Name{
  text-align: center;
}

.t3-content-right{
  align-self: center;
}

.t3-ul-star{
  padding:0px;
  list-style: none;
  display: flex;
  column-gap: 24px;
}

.t3-rating{
  padding: 20px 0px 20px 0px;
}

.t3-content-left{
  width: 40%;
}

.t3-content-right{
  width: 60%;
}

.t3-description{
  width: 90%;
}

.t3-column-1{
  display: flex;
  justify-content: center;
}

.t3-quote{
  font-size: 18px;
  text-align: left;
}

.t3-Name{
  padding: 30px 0px;
}

.t3-Name h2{
  color: #171E24;
}
.t3-Name span{
  color: #F69626;
}

.t3-img{
  padding: 30px;
}

.t3-description{
  padding:30px 0px;
}

.t3-position{
  color: #171E24;
font-family: Inter;
font-size: 17.289px;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
}
.t3-content-right::before{
 background-color: black;
 width: 3px;
 height: 70%;
 position: absolute;
 top: 40%;
 left: 50%;
}

body .owl-carousel .owl-item img{
  width: auto !important;
  display: block !important;
}

.t3-description::before{
  content: url("https://nuitwebtek.com/wp-content/uploads/2023/08/apostrophe.png"); 
  position: absolute;
    left: 40%;
    top: 13%;
}
.t3-description::after{
content: url('https://nuitwebtek.com/wp-content/uploads/2023/08/apostrophe2.png');
    position: absolute;
    top: 66%;
    right: 18%;
}

.t3-col{
  text-align: center;
}

.t3-content-left::after{
  content: '';
    background-color: black;
    width: 2px;
    height: 62%;
    position: absolute;
    top: 26%;
    left: 39%;
}

.t3-content-right::after{
 content: '';
    background-color: black;
    width: 50%;
    height: 2px;
    position: absolute;
    top: 75%;
    left: 20%;
}

.t3-rating{
  text-align:left;
  color: #FFD600;
  font-size: 22px;
}

@media only screen and (max-width: 600px) {
  .t3-img{
    width:68%;
  }
  .t3-content-left::after{
  content: '';
    background-color: black;
    width: 2px;
    height: 46%;
    position: absolute;
    top: 10%;
    left: 24%;
}

.t3-content-right::after{
 content: '';
    background-color: black;
    width: 52%;
    height: 2px;
    position: absolute;
    top: 45%;
    left: 19%;
}
.t3-description::before{
  content: url("apostrophe.png");
  position: absolute;
    left: 20%;
    bottom: 35%;
    top: auto;
}
.t3-description::after{
content: url(apostrophe2.png);
    position: absolute;
    display: flex;
    justify-content: end;
    right: 20%;
    width: 100%;
    top: auto;
    bottom: 5%;
}
.t3-content-left{
  width: 100%;
}

.t3-content-right{
  width: 100%;
}
.t3-testimonial-body{
  background-color: white;
  width: 70%;
  margin: auto;
  display: block;
}
.t3-description {
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 0px;
}
.t3-quote{
  text-align: center;
}
body .t3-section  .owl-carousel .owl-item img{
  margin: auto;
}
.t3-Name {
    padding: 12px 0px;
}
}

@media only screen and (max-width: 480px) {

  body .t3-section {
    background-color: #fff;
  }
  .t3-quote{
    color: #6E7096;
    font-size: 16px;
    position: absolute;
    top: 63%;
    left: 10%;
    width: 85%;
    line-height: 30px;
    font-weight: 500;
    text-align: center;
  }
   .t3-content-left::after{
  content: '';
    background-color: black;
    width: 2px;
    height: 42%;
    position: absolute;
    top: 0%;
    left: 15%;
}

.t3-content-right::after{
 content: '';
    background-color: black;
    width: 52%;
    height: 2px;
    position: absolute;
    top: 35%;
    left: 7%;
}
 .t3-content-left::before{
  content: '';
    background-color: black;
    width: 2px;
    height: 47%;
    position: absolute;
        top: 8%;
    right: 19%;
}

.t3-content-right::before{
 content: '';
    background-color: black;
    width: 52%;
    height: 2px;
    position: absolute;
    top: 49%;
    left: 37%;
}
.t3-Name{
  padding: 0px 0px;
      position: absolute;
    top: 35%;
    left: 33%;
}
.t3-rating{
  position: absolute;
  top: 52%;
  left: 27%;
  border-bottom: 3px solid black;
}
.t3-description {
    padding: 71px 0px;
    width: 100%;
}
.t3-description::after{
  right: 3%;
  bottom: 3%;
  top: auto;
}
.t3-description::before{
 bottom: 36%;
left: 8%;
top: auto;
}
.t3-img {
    width: 50%;
    position: absolute;
    top: 0%;
    height: auto;
    padding: 0px;
}
.t3-section  .owl-item.active{
  background-color: #ffffff;
}
.t3-section  .item{
  height: 780px;
}
.t3-main-title{
  color: #000;
  font-size: 41px;
  padding: 29px 0px;
}
}

@media only screen and (max-width: 1080px) and (min-width: 480px){
.t3-quote {
    font-size: 15px;
}
}

@media only screen and (max-width: 1080px) and (min-width: 600px){
body .t3-testimonial-item .t3-testimonial-body .t3-column-1 .t3-img{
  width: 80% !important;
}
.t3-rating{
  width: 40% !important;
}
    
.t3-description {
    padding: 30px 0px 0;
}    
    
.t3-testimonial-body {
    width:85%;
}
    
.t3-quote {
    line-height:1.4;
}
    
}

JS

jQuery(document).ready(function(){

    var testimonialSlider3 = jQuery('#t3-testimonial.owl-carousel');
    testimonialSlider3.owlCarousel({
        items:1,
        loop:true,
        margin:10,
        //autoplay:true,
        autoplayTimeout:3000,
        autoplayHoverPause:true
    });
    jQuery('.play').on('click',function(){
        owl.trigger('play.owl.autoplay',[1000])
    })
    jQuery('.stop').on('click',function(){
        owl.trigger('stop.owl.autoplay')
    })

});

Links

<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=Dosis:wght@200;300;500;600&family=Inter:wght@600;700;400&display=swap" rel="stylesheet">

<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/font-awesome/6.4.0/css/all.min.css"/>

Scripts

<script src="https://cdnjs.cloudflare.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 5

Testimonial

John Doe

John Doe

John Doe

HTML

CSS

JS

Links

Scripts