Uncategorized

Testimonial HTML template free download

Today we are building a testimonial Html template. This template is created using both Html and CSS languages. In the last post, we created our team section in HTML and CSS. At this moment our focus is to create a testimonial box in HTML and CSS for a company team

Testimonial HTML template:

It is created using HTML and CSS. This box is mainly used by those websites which are offering to sell their services online. They are working in a team and the team has a lot of members. They show their team in this testimonial box so that people get the knowledge about their team and be confident with the company.

As you can see in the image we have created a beautiful testimonial box using Html and CSS for a company. It has a heading at the top testimonials and it is designed using CSS. Below this, it has a line and it is also drawn with the help of CSS. Then we have three boxes below this line. These boxes have different information related to the team members.

So, these boxes are square in shape and everyone is equal in shape. At the top, it has an image and this image is round in shapeBelow the name, it has a description related to the team member and it satisfies the users that this member has a lot of specialties.

Every box has the same image, name, description, and box and they are also the same in design. We are creating it using HTML and CSS and code will be given along with instructions.

How to create a Testimonial HTML template?

Therefore, we have to download a code editor. We will use it to write HTML and CSS code and this code is used in our project. You can use any HTML code editor for it.

Source code of HTML:

It’s a markup language and it is used to create the content of the testimonial box. We cant design anything in Html. The HTML code is given below and by clicking on the copy button it will be copied.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  <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="p1.png" alt="">
              <div class="name">Full name</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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              </p>
            </div>
          </div>

          <div class="col">
            <div class="testimonial">
              <img src="p2.png" alt="">
              <div class="name">Full name</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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              </p>
            </div>
          </div>

          <div class="col">
            <div class="testimonial">
              <img src="p3.png" alt="">
              <div class="name">Full name</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 is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

<!DOCTYPE html>

<head>

<body>

<h1>Testimonials</h1>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

</p>

</div>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

</p>

</div>

</div>

<p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

</p>

</div>

</body>

</html>

Source code of CSS:

CSS is used to design this testimonial box and without using it we can’t design anything in HTML Therefore, by using both codes in your editor you can create this type of Testimonial HTML template.

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;

}
body{
  background: #6ab04c;
}
.testimonials{
  margin-top: 100px;
  margin-left: 200px;
  padding: 30px 0;
  background: #f1f1f1;
  color: #434343;
  text-align: center;
  border-bottom-left-radius: 350px;
  border-top-left-radius: 350px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.inner{
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  padding: 0 20px;
}

.border{
  width: 160px;
  height: 5px;
  background: #6ab04c;
  margin: 26px auto;
}

.row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.col{
  flex: 33.33%;
  max-width: 31.33%;
  box-sizing: border-box;
  padding: 15px;
}
.testimonial{
  background: #fff;
  padding: 40px;
  margin-bottom:30px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.testimonial img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.name{
  font-size: 20px;
  text-transform: uppercase;
  margin: 20px 0;
}
.stars{
  color: #6ab04c;
  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%;
}
}

margin: 0;

padding: 0;

font-family: "montserrat",sans-serif;

}

body{

background: #6ab04c;

}

.testimonials{

margin-top: 100px;

margin-left: 200px;

padding: 30px 0;

background: #f1f1f1;

color: #434343;

text-align: center;

border-bottom-left-radius: 350px;

border-top-left-radius: 350px;

box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

}

.inner{

max-width: 1200px;

margin: auto;

overflow: hidden;

padding: 0 20px;

}

.border{

width: 160px;

height: 5px;

background: #6ab04c;

margin: 26px auto;

}

.row{

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.col{

flex: 33.33%;

max-width: 31.33%;

box-sizing: border-box;

padding: 15px;

}

.testimonial{

background: #fff;

padding: 40px;

margin-bottom:30px;

box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;

}

.testimonial img{

width: 100px;

height: 100px;

border-radius: 50%;

}

.name{

font-size: 20px;

text-transform: uppercase;

margin: 20px 0;

}

.stars{

color: #6ab04c;

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

}

Download source code:

The source code is very helpful and it is available on the below button. So, by clicking on this button you can download it for free.

Task:

This section has a white background. Change this white background into an image that can be added using <img> tag. Then apply CSS properties for its design and modification. The team members are shown in a single line. Now add three more team members but add them in the next line. Also, change the round profile into a square profile. Best of luck

If you like this post then must follow us because we are sharing our premium templates with our followers only and they are not available for free. So don’t forget to subscribe to us.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download