Testimonials HTML Template Free Download

Table of Contents

In this article, I will show How to create a Responsive Testimonials HTML Template. Best HTML Template Free Download. HTML Website Templates, Basic and Simple HTML Templates. Responsive and fully customizable.

HTML Code

<div class="testimonial-section sbs-testimonial-section pd-top-105 pd-bottom-120" style="background-image:url(assets/img/bg/1h3.png);">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-5 col-lg-6 pd-xl-5 order-lg-12 align-self-center ">
        <div class="section-title style-two mb-0">
          <h2 class="title">What Our <span>Client Say?</span></h2>
          <p>Our support team will get assistance from AI-powered <br>
            suggestions, making it quicker than ever to handle support <br>
            requests. assistance from AI-powered</p>
        </div>
      </div>
      <div class="col-lg-6 order-lg-1">
        <div class="sbs-testimonial-slider">
          <div class="choose_slider">
            <div class="choose_slider_items">
              <ul id="testimonial-slider">
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/4.png" alt="client">
                    <div class="media-body">
                      <h6>Aryan Singh</h6>
                      <p class="designation">Founder at HTMLCSS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/5.png" alt="client">
                    <div class="media-body">
                      <h6>Ramjee Bharti</h6>
                      <p class="designation">CEO at CSS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/6.png" alt="client">
                    <div class="media-body">
                      <h6>Satish Kumar</h6>
                      <p class="designation">CTO of UIUS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/4.png" alt="client">
                    <div class="media-body">
                      <h6>Rahul Singh</h6>
                      <p class="designation">CEO at HTMLCSS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/5.png" alt="client">
                    <div class="media-body">
                      <h6>Neha Singh</h6>
                      <p class="designation">Branding </p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/6.png" alt="client">
                    <div class="media-body">
                      <h6>Sneha Singh</h6>
                      <p class="designation">CTO of UIUX</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="sbs-arrowleft"><a id="btn_next" href="#"><i class="fa fa-long-arrow-left"></i></a></div>
          <div class="sbs-arrowright"><a id="btn_prev" href="#"><i class="fa fa-long-arrow-right"></i></a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<h2 class="title">What Our <span>Client Say?</span></h2>

<p>Our support team will get assistance from AI-powered <br>

suggestions, making it quicker than ever to handle support <br>

requests. assistance from AI-powered</p>

</div>

<h6>Aryan Singh</h6>

<p class="designation">Founder at HTMLCSS</p>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Ramjee Bharti</h6>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Satish Kumar</h6>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Rahul Singh</h6>

<p class="designation">CEO at HTMLCSS</p>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Neha Singh</h6>

<p class="designation">Branding </p>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Sneha Singh</h6>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

</ul>

</div>

</div>

CSS Code

@charset "utf-8";
/* CSS Document */
.sbs-testimonial-slider {
  height: 300px;
  margin-left: -90px;
  position: relative;
  width: 838px;
}
.sbs-testimonial-slider .sbs-arrowleft {
  position: absolute;
  right: 0;
  bottom: 53px;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  line-height: 42px;
  text-align: center;
  display: inline-block;
  border: 1px solid #EFEFEF;
  background: #fff;
  color: #5B6880;
  z-index: 2;
}
.sbs-testimonial-slider .sbs-arrowleft i {
  transition: all 0.3s ease-in;
}
.sbs-testimonial-slider .sbs-arrowleft a {
  display: block;
}
.sbs-testimonial-slider .sbs-arrowleft:hover i {
  opacity: 0.7;
}
.sbs-testimonial-slider .sbs-arrowright {
  position: absolute;
  right: 0;
  bottom: 4px;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  line-height: 42px;
  text-align: center;
  display: inline-block;
  border: 1px solid #EFEFEF;
  background: #fff;
  color: #5B6880;
  z-index: 2;
}
.sbs-testimonial-slider .sbs-arrowright i {
  transition: all 0.3s ease-in;
}
.sbs-testimonial-slider .sbs-arrowright a {
  display: block;
}
.sbs-testimonial-slider .sbs-arrowright:hover i {
  opacity: 0.7;
}

.choose_slider_items {
  position: relative;
}
.choose_slider_items ul {
  position: relative;
}
.choose_slider_items ul li {
  width: 500px;
  background: #ffffff;
  box-shadow: 0px 12px 36px #97A1B224;
  border-radius: 6px;
  padding: 67px 30px 55px 75px;
}
.choose_slider_items ul li img {
  height: 74px;
  width: 74px;
  border-radius: 50%;
  background: #efefef;
  margin-right: 33px;
}
.choose_slider_items ul li .media {
  margin-bottom: 25px;
}
.choose_slider_items ul li .media-body h6 {
  font-size: 21px;
  letter-spacing: 0.21px;
  color: #fff;
  line-height: 25px;
  font-weight: 500;
  margin-bottom: 0;
}
.choose_slider_items ul li .media-body .designation {
  font-size: var(--body-font-size);
  letter-spacing: 0.45px;
  color: #cacaca;
  line-height: 25px;
  margin-bottom: 0;
}
.choose_slider_items ul li .media-body span i {
  color: #FFC82A;
  font-size: 12px;
}
.choose_slider_items ul li p {
  font-size: var(--body-font-size);
  letter-spacing: 0.3px;
  color: #fff;
}
.choose_slider_items .previous_item {
  top: 0;
  transform: scale(0.9, 0.9);
  left: 150px;
  padding: 67px 30px 55px 60px;
  z-index: 1;
}
.choose_slider_items .previous_item_2 {
  top: 0;
  padding: 67px 30px 55px 60px;
  transform: scale(0.7, 0.7);
  left: 32px;
}
.choose_slider_items .previous_hidden {
  top: 0;
  transform: scale(0.7, 0.7);
  padding: 67px 30px 55px 60px;
}
.choose_slider_items .current_item {
  transition: all 0.5s ease-in-out;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

@charset "utf-8";

/* CSS Document */

.sbs-testimonial-slider {

height: 300px;

margin-left: -90px;

position: relative;

width: 838px;

}

.sbs-testimonial-slider .sbs-arrowleft {

position: absolute;

right: 0;

bottom: 53px;

height: 42px;

width: 42px;

border-radius: 50%;

line-height: 42px;

text-align: center;

display: inline-block;

border: 1px solid #EFEFEF;

background: #fff;

color: #5B6880;

z-index: 2;

}

.sbs-testimonial-slider .sbs-arrowleft i {

transition: all 0.3s ease-in;

}

.sbs-testimonial-slider .sbs-arrowleft a {

display: block;

}

.sbs-testimonial-slider .sbs-arrowleft:hover i {

opacity: 0.7;

}

.sbs-testimonial-slider .sbs-arrowright {

position: absolute;

right: 0;

bottom: 4px;

height: 42px;

width: 42px;

border-radius: 50%;

line-height: 42px;

text-align: center;

display: inline-block;

border: 1px solid #EFEFEF;

background: #fff;

color: #5B6880;

z-index: 2;

}

.sbs-testimonial-slider .sbs-arrowright i {

transition: all 0.3s ease-in;

}

.sbs-testimonial-slider .sbs-arrowright a {

display: block;

}

.sbs-testimonial-slider .sbs-arrowright:hover i {

opacity: 0.7;

}

.choose_slider_items {

position: relative;

}

.choose_slider_items ul {

position: relative;

}

.choose_slider_items ul li {

width: 500px;

background: #ffffff;

box-shadow: 0px 12px 36px #97A1B224;

border-radius: 6px;

padding: 67px 30px 55px 75px;

}

.choose_slider_items ul li img {

height: 74px;

width: 74px;

border-radius: 50%;

background: #efefef;

margin-right: 33px;

}

.choose_slider_items ul li .media {

margin-bottom: 25px;

}

.choose_slider_items ul li .media-body h6 {

font-size: 21px;

letter-spacing: 0.21px;

color: #fff;

line-height: 25px;

font-weight: 500;

margin-bottom: 0;

}

.choose_slider_items ul li .media-body .designation {

font-size: var(--body-font-size);

letter-spacing: 0.45px;

color: #cacaca;

line-height: 25px;

margin-bottom: 0;

}

.choose_slider_items ul li .media-body span i {

color: #FFC82A;

font-size: 12px;

}

.choose_slider_items ul li p {

font-size: var(--body-font-size);

letter-spacing: 0.3px;

color: #fff;

}

.choose_slider_items .previous_item {

top: 0;

transform: scale(0.9, 0.9);

left: 150px;

padding: 67px 30px 55px 60px;

z-index: 1;

}

.choose_slider_items .previous_item_2 {

top: 0;

padding: 67px 30px 55px 60px;

transform: scale(0.7, 0.7);

left: 32px;

}

.choose_slider_items .previous_hidden {

top: 0;

transform: scale(0.7, 0.7);

padding: 67px 30px 55px 60px;

}

.choose_slider_items .current_item {

transition: all 0.5s ease-in-out;

}

Testimonials HTML Template Free Download

Full HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>What Our Client</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" target="_blank" rel="noreferrer noopener">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css</a>"  />
<link rel="stylesheet" href="css/slick.css">
<!-- animated slider -->
<link rel="stylesheet" href="css/animated-slider.css">
</head>

<body>

<!-- testimonial area Start -->
<div class="testimonial-section sbs-testimonial-section pd-top-105 pd-bottom-120" style="background-image:url(assets/img/bg/1h3.png);">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-5 col-lg-6 pd-xl-5 order-lg-12 align-self-center ">
        <div class="section-title style-two mb-0">
          <h2 class="title">What Our <span>Client Say?</span></h2>
          <p>Our support team will get assistance from AI-powered <br>
            suggestions, making it quicker than ever to handle support <br>
            requests. assistance from AI-powered</p>
        </div>
      </div>
      <div class="col-lg-6 order-lg-1">
        <div class="sbs-testimonial-slider">
          <div class="choose_slider">
            <div class="choose_slider_items">
              <ul id="testimonial-slider">
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/4.png" alt="client">
                    <div class="media-body">
                      <h6>Aryan Singh</h6>
                      <p class="designation">Founder at HTMLCSS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/5.png" alt="client">
                    <div class="media-body">
                      <h6>Ramjee Bharti</h6>
                      <p class="designation">CEO at CSS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/6.png" alt="client">
                    <div class="media-body">
                      <h6>Satish Kumar</h6>
                      <p class="designation">CTO of UIUS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/4.png" alt="client">
                    <div class="media-body">
                      <h6>Rahul Singh</h6>
                      <p class="designation">CEO at HTMLCSS</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/5.png" alt="client">
                    <div class="media-body">
                      <h6>Neha Singh</h6>
                      <p class="designation">Branding </p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
                <li class="current_item">
                  <div class="media"> <img class="media-left" src="img/6.png" alt="client">
                    <div class="media-body">
                      <h6>Sneha Singh</h6>
                      <p class="designation">CTO of UIUX</p>
                      <span> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </span> </div>
                  </div>
                  <p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="sbs-arrowleft"><a id="btn_next" href="#"><i class="fa fa-long-arrow-left"></i></a></div>
          <div class="sbs-arrowright"><a id="btn_prev" href="#"><i class="fa fa-long-arrow-right"></i></a></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- testimonial area End --> 
<script src="js/jquery-2.2.4.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.magnific-popup.js"></script> 
<script src="js/wow.min.js"></script> 
<script src="js/jquery.cssslider.min.js"></script> 
<script src="js/main.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

<!doctype html>

<html>

<head>

<title>What Our Client</title>

</head>

<body>

<h2 class="title">What Our <span>Client Say?</span></h2>

<p>Our support team will get assistance from AI-powered <br>

suggestions, making it quicker than ever to handle support <br>

requests. assistance from AI-powered</p>

</div>

<h6>Aryan Singh</h6>

<p class="designation">Founder at HTMLCSS</p>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Ramjee Bharti</h6>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Satish Kumar</h6>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Rahul Singh</h6>

<p class="designation">CEO at HTMLCSS</p>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Neha Singh</h6>

<p class="designation">Branding </p>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

<h6>Sneha Singh</h6>

</div>

<p>Our support team will get assistance from AI-powered suggestions, making it quicker than ever to handle support requests.</p>

</li>

</ul>

</div>

</div>

</body>

</html>

Hope this will help you to create a Responsive Testimonials HTML Template.

Testimonials HTML Template Free Download