Customer Testimonials in HTML CSS

Customer Testimonials HTML CSS
Code Snippet:Mobile-Friendly Customer Testimonials
Author: Stephen Oliver
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 707
License: MIT
Edit Code online: View on CodePen
Read More

This HTML and CSS code is designed for creating a “Customer Testimonials” section on a website. The HTML code structures the content, including testimonials, and the CSS code defines the visual styling.

The main purpose of this code is to showcase customer testimonials on a web page. It arranges the testimonials in a visually appealing manner, with proper formatting and styling. It uses CSS to create a clean and attractive design for the testimonials section, making it helpful for presenting positive feedback from customers in an organized and engaging way.

How to Create Customer Testimonials Section Using HTML and CSS

1. First, load the Normalize CSS by adding the following CDN links into the head tag of your website.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. Copy the HTML code provided into the <body> section of your webpage. Make sure to place it where you want the testimonials section to appear.

<main>
   <h1>Customer Testimonials</h1>
   <div class="blurb">

      <h3>What people are saying about us</h3>
      <hr />
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nulla, pretium ut convallis non, mollis vel erat. Proin vel nibh arcu. Vivamus a augue at quam lacinia maximus.
      </p>
      <p>
         <strong>Vestibulum dapibus ex dictum felis facilisis, id fermentum magna semper.</strong> Phasellus ac eleifend lectus, nec tristique mi. In suscipit dolor quis neque ultricies efficitur ut quis eros. Nullam hendrerit arcu et nisl hendrerit finibus. Vivamus a dolor suscipit, interdum sapien non, posuere lorem. Maecenas id nulla ut turpis faucibus feugiat accumsan sit amet neque.
      </p>
      <p>
         In hac habitasse platea dictumst. Praesent finibus cursus ipsum vel commodo. Pellentesque bibendum dictum nulla, quis vehicula arcu convallis quis. Etiam mi ex, aliquam ut ante sit amet, convallis luctus augue. Quisque sodales, sapien congue aliquam volutpat, urna erat volutpat nisi, vitae tempus tellus odio id arcu. <strong>Cras sollicitudin eget neque dictum blandit.</strong>
      </p>
   </div>
   <ul class="testimonials clearfix">
      <li>
         <figure>
            <blockquote>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nulla, pretium ut convallis non, mollis vel erat. Proin vel nibh arcu. Vivamus a augue at quam lacinia maximus.
               </p>
            </blockquote>
            <figcaption>
               <span>John D.</span><span>ACME INC</span>
            </figcaption>
         </figure>
      </li>
      <li>
         <figure>
            <blockquote>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nulla, pretium ut convallis non, mollis vel erat. Proin vel nibh arcu. Vivamus a augue at quam lacinia maximus.
               </p>
            </blockquote>
            <figcaption>
               <span>John D.</span><span>ACME INC</span>
            </figcaption>
         </figure>
      </li>
      <li>
         <figure>
            <blockquote>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem nulla, pretium ut convallis non, mollis vel erat. Proin vel nibh arcu. Vivamus a augue at quam lacinia maximus.
               </p>
            </blockquote>
            <figcaption>
               <span>John D.</span><span>ACME INC</span>
            </figcaption>
         </figure>
      </li>
   </ul>
</main>

3. Finally, copy the following CSS code and place it within a <style> block in the <head> section of your webpage.

@charset "UTF-8";
* {
  color: #333;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

header {
  background-color: #ff6600;
  height: 80px;
}

footer {
  background: #333;
  height: 300px;
}

main {
  max-width: 64em;
  margin: 0 auto;
  padding: 0 2%;
}
main h1 {
  margin-bottom: 10px;
}
main h3 {
  margin-top: 0;
}
main .blurb {
  margin-bottom: 25px;
}
main ul.testimonials {
  list-style: none;
  padding: 0;
  margin: 0 0 35px 0;
}
main ul.testimonials figure,
main ul.testimonials blockquote {
  margin: 0;
}
main ul.testimonials blockquote,
main ul.testimonials figcaption {
  border-radius: 8px;
  padding: 10px;
}
main ul.testimonials blockquote {
  background: #a3c8db;
  position: relative;
}
main ul.testimonials blockquote::after {
  content: "";
  position: absolute;
  bottom: -15px;
  right: 25px;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #a3c8db transparent;
  display: block;
  width: 0;
}
main ul.testimonials blockquote p {
  margin: 0;
  padding: 10px 20px;
}
main ul.testimonials blockquote p::before, main ul.testimonials blockquote p::after {
  font-size: 3em;
  display: block;
  height: 0.5em;
  color: whitesmoke;
  position: absolute;
}
main ul.testimonials blockquote p::before {
  content: "“︎";
  top: 0;
  left: 10px;
}
main ul.testimonials blockquote p::after {
  content: "”︎";
  bottom: 10px;
  right: 10px;
}
main ul.testimonials figcaption {
  float: right;
  background: #d9d9d9;
  margin-top: 20px;
  width: max-content;
  min-width: 150px;
  text-align: center;
}
main ul.testimonials figcaption span {
  display: block;
}
main ul.testimonials figcaption span:first-child {
  font-weight: bold;
}
main ul.testimonials li {
  max-width: 80%;
  margin: 10px 0;
  float: right;
}
main ul.testimonials li:nth-child(odd) {
  float: left;
}
main ul.testimonials li:nth-child(odd) blockquote {
  background: #c8dee9;
}
main ul.testimonials li:nth-child(odd) blockquote::after {
  border-color: #c8dee9 transparent;
  right: unset;
  left: 25px;
}
main ul.testimonials li:nth-child(odd) figcaption {
  float: left;
}

Now that you have added the code to your webpage, it’s time to customize the content to match your business or website. You can replace the placeholder text with actual customer testimonials, company names, and other relevant information.

That’s all! hopefully, you have successfully created a Customer Testimonials section on your website using HTML and CSS. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X