Create a Testimonial Card Using HTML and CSS
Last Updated :
03 Jan, 2025
In this tutorial, we're going to create a testimonial card that can be used on websites to display feedback from clients or customers. Testimonials are an excellent way to add social proof to your site, enhancing credibility and trust among visitors.
We’ll create a testimonial card with:
- A speech bubble for the user’s testimonial.
- A section displaying the user’s photo, name, and designation.
Project Preview
Create a Testimonial Card Using HTML and CSSTestimonial Card - HTML Code
The HTML structure defines the layout of the testimonial card.
HTML
<html>
<head>
<title>Testimonial Card</title>
</head>
<body>
<div class="test">
<div class="speech-bubble">
<p>
I have been learning Web Development from<br> <strong>geeksforgeeks.org</strong>
and I am surprised how <br> far I have come from where I started.<br><br>
<strong>Highly recommended!</strong>
</p>
</div>
<div class="user">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250103114439827966/Profile-.jpg"
alt="User Photo" class="user-photo">
<div class="useInfo">
<h4>NOOB CODER</h4>
<p>Junior Frontend Developer</p>
</div>
</div>
</div>
</body>
</html>
In this code
- HTML Structure: The entire testimonial card is wrapped in a <div> element with the class test-card.
- Speech Bubble: Contains the testimonial text, styled using a div with the class speech-bubble.
- Includes a <p> tag for the feedback content.
- Uses a <strong> tag to highlight key phrases like "Highly recommended!".
- User Section: Displays the user’s photo and details.
- The img tag is used for the profile picture, styled with the class user-photo.
- A nested div with the class userInfo includes:
- <h4> for the user’s name.
- <p> for their designation.
Output
Create a Testimonial CardTestimonial Card - Including CSS for Styling
The CSS styles bring the testimonial card to life.
HTML
<html>
<head>
<title>Testimonial Card</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.test-card {
background-color: #ffffff;
width: 400px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
}
.speech-bubble {
background-color: #000000;
color: #ffffff;
border-radius: 10px;
padding: 15px 20px;
position: relative;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0;
border-color: #000000 transparent transparent transparent;
}
.speech-bubble p {
margin: 0;
line-height: 1.5;
}
.user {
display: flex;
align-items: center;
margin-top: 20px;
}
.user-photo {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.userInfo h4 {
margin: 0;
font-size: 16px;
}
.userInfo p {
margin: 0;
font-size: 14px;
color: #555555;
}
</style>
</head>
<body>
<div class="test">
<div class="speech-bubble">
<p>
I have been learning Web Development from<br> <strong>geeksforgeeks.org</strong>
and I am surprised how <br> far I have come from where I started.<br><br>
<strong>Highly recommended!</strong>
</p>
</div>
<div class="user">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250103114439827966/Profile-.jpg"
alt="User Photo" class="user-photo">
<div class="useInfo">
<h4>NOOB CODER</h4>
<p>Junior Frontend Developer</p>
</div>
</div>
</div>
</body>
</html>
In this code
- The main card has a white background (
background-color: #ffffff;) with rounded corners (border-radius: 10px;) and a subtle shadow (box-shadow) to make it look modern. - The speech bubble is a black box (
background-color: #000000;) with white text inside (color: #ffffff;), styled to look like someone is speaking. - Both the card and the speech bubble have rounded edges using
border-radius for a smooth and friendly appearance. - The
padding adds space around the text in the bubble, so it doesn’t stick to the edges, making it look clean - The triangle “tail” of the bubble is created using
:after with CSS borders. It’s a small triangle pointing to the user’s photo. - The user’s photo and details (name + job title) are aligned in a row using
display: flex; for a neat, horizontal alignment. - The user’s photo is made into a perfect circle with
border-radius: 50%; and is sized consistently (width and height set to 50px). - The
margin adds space:- Between the speech bubble and the profile section (
margin-top: 20px;). - Between the photo and the name (
margin-right: 10px;).
- Everything (photo, name, and title) is centered vertically in the profile section using
align-items: center; for perfect alignment.
With these HTML and CSS snippets, you can create a sleek and functional testimonial card UI. Customize the styles and layout to fit your design preferences.
Similar Reads
How to Add Testimonials using HTML? Testimonials are Written recommendations from users and are often seen in a separate section of a web page. In this article, we will learn how to add responsive testimonials to our web page. Generally, a testimonial contains the user’s name, picture, his/her identity(optional), and most importantly
5 min read
Design a Rotating card effect using HTML and CSS Rotating cards are the effect on cards that will rotate to some degree when you hover your mouse over them. There will be information, links, or images on the card which will be visible when you hover over the cards.In this article, you’re going to learn how to make rotating cards on your website us
2 min read
Design an About us Page using HTML and CSS An About Us page is a crucial part of any website. It introduces your organization, builds trust with visitors, and often serves as one of the most visited pages. Whether you're building a portfolio, company site, or educational platform, having a structured and visually appealing About page improve
5 min read
How to design Meet the Team Page using HTML and CSS ? You will learn how to create a simple and responsive “Meet the Team†page using HTML and CSS. We will use HTML to structure the content of the page, such as the headings, paragraphs, images, and links, and then we use CSS to style the elements of the page, such as the colors, fonts, and layout. Here
5 min read
How to Create Facebook Login Page in HTML & CSS ? To Create a Facebook Login Page with HTML and CSS, we will first create the overall structure of the application and then apply the styling and formatting properties using CSS. The application consists of exactly a similar design to the Facebook Login Page. The application is designed in a responsiv
4 min read