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>

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;
}

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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"  />
<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>

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

Testimonials HTML Template Free Download

Testimonials HTML Template Free Download

HTML Code

CSS Code

Full HTML Code

Read Also:

Responsive Testimonials

Related Post

Owl Carousel Product Slider in HTML5

Review Page Design in HTML5 Download

Product Grid in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Bootstrap Table with Pagination and Search

Responsive Video Background free download

Leave a Reply Cancel reply

Search

Donate

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement

Quick Links

Important Links

Share on

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Testimonials HTML Template Free Download

HTML Code

CSS Code

Full HTML Code

Read Also:

Responsive Testimonials

Share this:

Related Post

Owl Carousel Product Slider in HTML5

Review Page Design in HTML5 Download

Product Grid in HTML5

jQuery Carousel Slider With Accordion Style Transitions

Bootstrap Table with Pagination and Search

Responsive Video Background free download

Leave a Reply Cancel reply

Search

Donate

Categories

Adobe Photoshop

API Integrations

Bootstrap 5.0 Tutorials

Database Query

Email Templates

Flask and MongoDB

Google Cloud

HTML and CSS

Javascript

PHP

Search Engine Optimization

Templates

Wordpress Theme

Advertisement