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.
Similar Code Snippets:
- 9+ Simple Speech Bubble in CSS
- Tooltip Box with Arrow in CSS
- Color Palette Generator From Hex Code
- Pure CSS Cube Box Animation On Hover
- Responsive Image Hotspots Code with Demo
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.