Testimonial Card

The theme for week #19 of the Weekly Coding Challenge is:

Testimonials

If you are looking to find new clients it’s important to gather reviews / testimonials from old clients you’ve worked for to show them to your new clients. When you gather a few, you can put them on your website, and in this tutorial we’re building a Testimonial Card that you can just for that 😉:

https://codepen.io/FlorinPop17/pen/VJoGqj

The HTML

You can notice that the card has two parts: a body section - where you can find the actual testimonial text and a footer section where we have the image, the name and the website of the client who left the testimonial.

Let’s translate this into HTML:

<div class="testimonial">
	<div class="testimonial-body">
		<p>
			Florin is a front-end development master, delivering pixel-perfect css and
			html designs. He is professional, highly available and delivers on his
			promises - an all around pleasure to work with!
		</p>
		<i class="fas fa-quote-right"></i>
	</div>
	<div class="testimonial-footer">
		<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="user" />
		<h3>Alex Snow</h3>
		<h4>Example.com</h4>
	</div>
</div>

We also added the quote i (icon) after the p tag (The icon is from FontAwesome), and the image is from RandomUser.me - very helpful website.

The CSS

I’m going to paste the entire CSS as there aren’t many fancy things:

.testimonial {
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	overflow: hidden;
	max-width: 100%;
	width: 400px;
}

.testimonial-body {
	padding: 40px 40px 80px;
}

.testimonial-body p {
	color: #555;
	font-size: 20px;
	line-height: 36px;
	margin: 0;
}

.testimonial-body .fa-quote-right {
	color: #eee;
	font-size: 40px;
	float: right;
}

.testimonial-footer {
	background-color: #686de0;
	color: #fff;
	padding: 40px;
	text-align: center;
}

.testimonial-footer img {
	border-radius: 50%;
	border: 5px solid #fff;
	height: 120px;
	width: 120px;
	margin-top: -100px;
}

.testimonial-footer h3 {
	margin: 10px 0;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.testimonial-footer h4 {
	color: #b3b5ef;
	margin: 0;
	letter-spacing: 1px;
}

What I would like to explain though is the image and how we got it to be positioned in the middle.

Basically we’re moving it up by setting a negative margin-top property on it. The value for this property is half the image height plus the footer’s top padding (120 / 2 + 40 = 100).

Conclusion

This is it. A pretty simple component. 😄

If you’d like to spice it up you can add multiple cards or create a slider or add some animations… The sky is the limit.

I created something similar in the past. You can check it out here.

Happy Coding! 😇