HTML | How to add Testimonials ?

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



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Adding CSS:

filter_none

edit
close

play_arrow

link
brightness_4
code

.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;
  }
}

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.