Skip to content
Related Articles

Related Articles

HTML | How to add Testimonials ?
  • Last Updated : 26 Sep, 2019

Testimonials are Written recommendations from users and are often seen in a separated section of a web page. In this article, we will learn how to add good looking responsive testimonials on our web page.

Generally, a testimonial contains the user’s name, picture, his/her identity(optional) and most importantly his/her quoted text.

Adding HTML:
We will add the user’s name, profile picture, his/her identity and most his/her quoted text




<div class="container">
    <img src=
         alt="" 
         width="318" 
         height="159" 
         class="aligncenter size-full wp-image-1271664" 
         alt="Avatar" 
         style="width:90px" />"
    <p><span>Chris Doe</span>, CEO at XYZ.</p>
    <p>"A Computer Science graduate who likes to make things simpler.
       When he's not working, you can find him surfing the web,
       learning facts, tricks and life hacks. He also enjoys
       movies in his leisure time."</p>
</div>
  
<div class="container">
    <img src=
         alt="" 
         width="318" 
         height="159" 
         class="aligncenter size-full wp-image-1271664" 
         alt="Avatar" 
         style="width:90px" />
    <p><span>John Doe</span> CEO at ABC Company.</p>
    <p>"A Computer Science graduate who likes to make things simpler.
        When he's not working, you can find him surfing the web,
        learning facts, tricks and life hack.
        He also enjoys movies in his leisure time."</p>
</div>

Adding CSS:




.container {
  border: 2px solid #ccc;
  background-color: #eee;
  border-radius: 5px;
  padding: 16px;
  margin: 16px 0;
}
  
.container img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}
  
  
/* Adding media queries for responsiveness.
@media (max-width: 500px) {
  .container {
    text-align: center;
  }
  
  .container img {
    margin: auto;
    float: none;
    display: block;
  }
}

Example:




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1">
    <style>
        .container {
            border: 2px solid #ccc;
            background-color: #eee;
            border-radius: 5px;
            padding: 16px;
            margin: 16px 0
        }
          
        .container::after {
            content: "";
            clear: both;
            display: table;
        }
          
        .container img {
            float: left;
            margin-right: 20px;
            border-radius: 50%;
        }
          
        .container span {
            font-size: 20px;
            margin-right: 15px;
        }
          
        @media (max-width: 500px) {
            .container {
                text-align: center;
            }
            .container img {
                margin: auto;
                float: none;
                display: block;
            }
        }
    </style>
</head>
  
<body>
  
    <h2>Testimonials</h2>
  
    <div class="container">
        <img src=
             alt="" 
             width="318"
             height="159" 
             class="aligncenter size-full wp-image-1271664" 
             alt="Avatar"
             style="width:90px" />
        <p><span>Chris Doe</span>, CEO at XYZ</p>
        <p>"A Computer Science graduate who likes to make things simpler.
          When he's not working, you can find him surfing the web, learning facts
          , tricks and life hack."</p>
    </div>
  
    <div class="container">
        <img src=
             alt="" 
             width="318"
             height="159" 
             class="aligncenter size-full wp-image-1271664" 
             alt="Avatar"
             style="width:90px" />
        <p><span>John Doe</span>, CEO at ABC Company.</p>
        <p>"A Computer Science graduate who likes to make things simpler.
          When he's not working, you can find him surfing the web,
         learning facts, tricks and life hack."</p>
    </div>
  
</body>
  
</html>

Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :