How to Create Testimonial page in
HTML & CSS
Video Tutorial of Testimonial
Testimonial [Source Codes]
To Create Testimonial with HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Testimonial</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>
<div class="testimonials">
<div class="inner">
<h1>Testimonials</h1>
<div class="border"></div>
<div class="row">
<div class="col">
<div class="testimonial">
<img src="1.png" alt="">
<div class="name">john wick</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure assumenda amet architecto animi obcaecati eligendi provident reiciendis harum! Quibusdam architecto ea quisquam, distinctio rerum deserunt velit perferendis alias dolore nihil asperiores, error fugit veniam beatae voluptatibus.</p>
</div>
</div>
<div class="col">
<div class="testimonial">
<img src="2.png" alt="">
<div class="name">Dabit</div>
<div class="stars">
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure assumenda amet architecto animi obcaecati eligendi provident reiciendis harum! Quibusdam architecto ea quisquam, distinctio rerum deserunt velit perferendis alias dolore nihil asperiores, error fugit veniam beatae voluptatibus. </p>
</div>
</div>
<div class="col">
<div class="testimonial">
<img src="3.png" alt="">
<div class="name">mike tyson</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure assumenda amet architecto animi obcaecati eligendi provident reiciendis harum! Quibusdam architecto ea quisquam, distinctio rerum deserunt velit perferendis alias dolore nihil asperiores, error fugit veniam beatae voluptatibus. </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now paste the following codes into your style.css file
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1{
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.testimonials{
padding: 70px 0;
background: #1D1E22;
color: #060606;
text-align: center;
}
.inner{
max-width: 1200px;
top: 0;
bottom: 0;
margin: auto;
overflow: hidden;
padding: 0 20px;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col{
flex: 33.33%;
max-width: 33.33%;
box-sizing: border-box;
padding: 35px;
}
.testimonial{
background: #fff;
padding: 30px;
border-radius: 30px;
}
.testimonial img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.name{
font-size: 18px;
text-transform: uppercase;
font-weight: 600;
margin: 15px 0;
}
.stars{
color: gold;
margin-bottom: 20px;
}
@media screen and (max-width:960px) {
.col{
flex: 100%;
max-width: 80%;
}
}
@media screen and (max-width:600px) {
.col{
flex: 100%;
max-width: 100%;
}
}
If you face any difficulties while creating your Testimonial page or your code is not working as expected, you can download the source code files by clicking on the download button.