Responsive Testimonial card with Star rating

In the ever-evolving era of the Internet, a testimonial plays a significant role in establishing credibility and influencing customers. Testimonials are typically feedback or reviews provided by customers who have experienced a product or service. These reviews are usually presented on a website in the form of a slider or card. In today's blog post, we will design three responsive review cards or testimonials cards with star ratings attached. Below is the video tutorial where we have designed the entire snippet with HTML and CSS. Watch the video before collecting the source code.

Video Tutorial:

We Hope you have watched the video tutorial on Responsive Testimonial card with a Star rating. Review Cards or Testimonials are powerful tools for establishing trust and encouraging potential buyers to take action. They are also great for website SEO. Testimonials play an important role in demonstrating the value your business provides to real people. In short, it acts as a social proof for your service or product.

Testimonials can be added to a website in many ways. Some of them are dedicated testimonial pages, Product pages, home pages, Landing pages, Blog posts, etc. These real customer experiences can increase trust and encourage action. Our today's review CSS cards are responsively designed. Responsive web design has become extremely popular as many people these days operate websites from mobile or other small devices. We know that CSS Flexbox is a powerful layout module that can easily create responsive web layouts. So today's entire layout is designed using CSS Flexbox.

You May Also Like:

Responsive Testimonial card with Star rating [ Source Code ]:

To create this Responsive Testimonial card or review card CSS, we have to create an HTML and a CSS file. After that, copy the source code from the boxes provided below and paste them into your project. If you want you can also download the code from the Download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Testimonial Cards</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
  <div class="wrapper">
		<div class="review-card">
			<div class="header-content">
				<div class="img-area">
          <img alt="customer1" src="img/1.jpg">
        </div>
				<div class="info">
					<h4>John Doe</h4>
					<p>Maketing Manager</p>
				</div>
			</div>
			<div class="single-review">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolor eveniet deleniti repellendus! Minima, dolorum.</p>
			</div>
			<div class="review-footer">
				<div class="rating">
					<span class="active">★</span> 
          <span class="active">★</span> 
          <span class="active">★</span> 
          <span class="">★</span> 
          <span class="">★</span>
				</div>
				<p>Reviewed on 01/01/2023</p>
			</div>
		</div>
		<div class="review-card">
			<div class="header-content">
				<div class="img-area">
          <img alt="customer1" src="img/2.jpg">
        </div>
				<div class="info">
					<h4>Mark Wood</h4>
					<p>Graphics Expert</p>
				</div>
			</div>
			<div class="single-review">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolor eveniet deleniti repellendus! Minima, dolorum.</p>
			</div>
			<div class="review-footer">
				<div class="rating">
					<span class="active">★</span> 
          <span class="active">★</span> 
          <span class="">★</span> 
          <span class="">★</span> 
          <span class="">★</span>
				</div>
				<p>Reviewed on 01/02/2023</p>
			</div>
		</div>
		<div class="review-card">
			<div class="header-content">
				<div class="img-area">
          <img alt="customer1" src="img/3.jpg">
        </div>
				<div class="info">
					<h4>Jason Chedd</h4>
					<p>Web Designer</p>
				</div>
			</div>
			<div class="single-review">
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolor eveniet deleniti repellendus! Minima, dolorum.</p>
			</div>
			<div class="review-footer">
				<div class="rating">
					<span class="active">★</span> 
          <span class="active">★</span> 
          <span class="active">★</span> 
          <span class="active">★</span> 
          <span class="active">★</span>
				</div>
				<p>Reviewed on 01/03/2023</p>
			</div>
		</div>
	</div>


    
</body>
</html>

ADD CSS:

body {
	background: #00b5dd;
	font-family: 'Montserrat', sans-serif;
}
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	padding: 10% 0;
}
.review-card {
	background-color: #f5f5f5;
	border-radius: 10px;
	padding: 20px;
	width: 300px;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.img-area {
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: 50%;
	margin-right: 25px;
}
.img-area img {
	width: 100%;
}
.header-content {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.info h4 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}
.info p {
	margin: 5px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: #666;
}
.single-review p {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	color: #333;
}
.review-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	font-size: 14px;
	color: #666;
}
.rating {
	display: flex;
}
.rating span {
	color: #000;
	font-size: 18px;
}
.rating span.active {
	color: #fbc02d;
}
@media screen and (max-width: 767px) {
	.wrapper {
		flex-direction: column;
		align-items: center;
	}
	.review-card {
		width: 85%;
	}
}

We hope this testimonial card CSS snippet is working for you. In this digital age, all customers want social proof before making online purchases. Thus, review cards or testimonials are essential elements for your website, go ahead and add such cards to your website to make your website authentic and impressive. If you want more snippets like this, you can go to our website homepage and click on the Load More button below. If you find the content of our website useful, please share it with others. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Testimonial card with Star rating [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Testimonial card with Star rating

Video Tutorial:

Responsive Testimonial card with Star rating [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form