Testimonials HTML Template Free Download
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;
}
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.
Read Also:
- Pricing Table Design Bootstrap 5?
- How to Display Content on hovering Card using CSS?
- How to create a Portfolio Gallery?
- FAQ Page with Show and Hide Questions and Answers?
- Bootstrap Team Section Design Download
- Bootstrap Carousel with Captions and Thumbnails Free Download
- Bootstrap Table Search Filter Free Download
Related Post
