Hi Guys, I am back with another fantastic project in this project I used HTML, CSS, and Swiper Js. This project is a Clients Testimonials slider using pure HTML and CSS.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.
I recently created a Modal Popup Box Using HTML, CSS, and some JavaScript. I also share this source code in the blog post here you can check this Modal Popup Box.
Testimonials Section on the website
A testimonials section on a website can be a powerful tool for building trust with potential customers or clients. Featuring positive feedback from satisfied customers, can help establish credibility and demonstrate the quality of your products or services.
Here are some tips for creating an effective testimonials section on your website:
Select the right testimonials:
Choose testimonials that are specific, detailed, and provide tangible examples of how your product or service helped the customer. Aim for a mix of testimonials from different types of customers or clients.
Use real names and photos:
Including real names and photos of the people providing the testimonials can help build trust and make the testimonials feel more authentic.
Format the testimonials effectively:
Use a clean, readable format for the testimonials section, and consider using visual elements like icons or graphics to make it more visually appealing.
Place the section strategically:
Consider where on your website the testimonials section would have the most impact. It could be on the homepage, the product or service pages, or a dedicated testimonials page.
Update regularly:
Keep your testimonials section up-to-date with fresh feedback from customers or clients. This can help show that your business is actively engaged with its customers and committed to providing quality service.
About This Project
This project was Created by the Coding Pakistan blog website to help students for free of cost that is learning this type of programming languages, learning web development technologies such as HTML, CSS, JavaScript, React.js, and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML CSS and Swiper Js |
| Source Code | Download GitHub |
| Preview | Take Preview |
In this testimonials slider, first, you see the section right and left at the top of the page containing the heading “What our Client Say“ and in button three white dots to navigate more sliders used for clicking these white dots.
In the slider one image of our client with their name profession and review about our products and services the last give a rating.
The best part of this Testimonial design it is very simple and also very beautiful. if you are a beginner in coding and programming this project is best for your learning.
The source code of this project is also available in my GitHub Profile which you can download and use this code without any type of restriction.
How To Create a Testimonial Section Design
There are some steps to create this type of testimonial section using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files HTML, CSS, and JavaScript
- Make sure the HTML file extension is (.html), the CSS file extension will be (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Source Code of Testimonial Section Using HTML and CSS
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials Slider using Html Css & Swiper Js</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="testimonials">
<div class="container">
<div class="section-header">
<h2 class="title">What our clients say</h2>
</div>
<div class="testimonials-content">
<div class="swiper testimonials-slider js-testimonials-slider">
<div class="swiper-wrapper">
<div class="swiper-slide testimonials-item">
<div class="info">
<img src="pic 1.png">
<div class="text-box">
<h3 class="name">John deo</h3>
<span class="job">Web Developer</span>
</div>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis commodi nihil
consectetur praesentium distinctio repellendus doloremque nulla assumenda modi?</p>
<div class="rating">
<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>
</div>
</div>
<div class="swiper-slide testimonials-item">
<div class="info">
<img src="pic 2.png">
<div class="text-box">
<h3 class="name">John deo</h3>
<span class="job">Web Developer</span>
</div>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis commodi nihil
consectetur praesentium distinctio repellendus doloremque nulla assumenda modi?</p>
<div class="rating">
<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>
</div>
</div>
<div class="swiper-slide testimonials-item">
<div class="info">
<img src="pic 3.png">
<div class="text-box">
<h3 class="name">John deo</h3>
<span class="job">Web Developer</span>
</div>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis commodi nihil
consectetur praesentium distinctio repellendus doloremque nulla assumenda modi?</p>
<div class="rating">
<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>
</div>
</div>
<div class="swiper-slide testimonials-item">
<div class="info">
<img src="pic 4.png">
<div class="text-box">
<h3 class="name">John deo</h3>
<span class="job">Web Developer</span>
</div>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis commodi nihil
consectetur praesentium distinctio repellendus doloremque nulla assumenda modi?</p>
<div class="rating">
<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>
</div>
</div>
<div class="swiper-slide testimonials-item">
<div class="info">
<img src="pic 5.png">
<div class="text-box">
<h3 class="name">John deo</h3>
<span class="job">Web Developer</span>
</div>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus corporis commodi nihil
consectetur praesentium distinctio repellendus doloremque nulla assumenda modi?</p>
<div class="rating">
<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>
</div>
</div>
</div>
</div>
<div class="swiper-pagination js-testimonials-pagination"></div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.js-testimonials-slider', {
grabCursor: true,
spaceBetween:30,
pagination:{
el: '.js-testimonials-pagination',
clickable:true
},
breakpoints:{
767:{
slidesPerView: 2
}
}
})
</script>
</body>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
font-size: 16px;
background: linear-gradient(to right, hsl(186, 98%, 37%), hsl(170, 100%, 40%));
}
.container{
max-width: 1170px;
margin: auto;
padding: 0 15px;
}
/* Section Header */
.section-header{
text-align: center;
margin-bottom: 50px;
}
.section-header .title{
font-size: 35px;
font-weight: 600;
text-transform: capitalize;
color: hsl(0, 0%, 100%);
line-height: 1.2;
}
.testimonials{
padding: 100px 0;
}
.testimonials-item{
background-color: hsl(0, 0%,100%);
padding: 30px;
border-radius: 30px;
}
.testimonials-item .info{
display: flex;
align-items: center;
}
.testimonials-item img{
max-width: 80px;
border-radius: 50%;
margin-right: 20px;
vertical-align: middle;
}
.testimonials-item .name{
font-size: 24px;
text-transform: capitalize;
font-weight: 600;
color: hsl(0,0%,0%);
line-height: 1.2;
}
.testimonials-item .job{
text-transform: capitalize;
color: hsl(0, 0%, 40%);
}
.testimonials-item p{
margin-top: 20px;
color: hsl(0,0%,40%);
}
.testimonials-item .rating{
margin-top: 15px;
font-size: 14px;
color: hsl(36, 88%, 66%);
}
.testimonials .swiper-pagination{
position: relative;
margin-top: 40px;
bottom: auto;
}
.testimonials .swiper-pagination-bullet{
height: 12px;
width: 12px;
background-color: white;
}
Video Tutorial – Testimonial Section Using HTML, CSS, and JavaScript
If you don’t understand this code and you want to learn in deep so please watch this video and subscribe to this youtube channel for more videos like this.
Related Content
- Responsive Team section Desing using HTML and CSS
- Footer Menu Design using HTML and CSS with source code.
- Build a movie app using HTML, CSS, and JavaScript
Conclusion
A testimonial slider can be a great addition to any website as it allows for showcasing customer feedback and positive reviews in an interactive and visually appealing way. By using HTML and CSS along with a library like Swiper js, it’s easy to create a slider that’s both functional and stylish.
With Swiper js, it’s possible to customize the slider’s design, navigation, and behavior to fit the website’s overall aesthetic and user experience. Plus, the library’s responsive design makes it accessible and user-friendly on any device.
Overall, a testimonials slider can be a valuable tool for building trust with website visitors and highlighting the strengths of a business or product. By using HTML and CSS with Swiper js, creating a testimonials slider is a straightforward and effective way to enhance a website’s overall design and functionality.
