Cards
Cards - Use on the testimonial section of the page
HTML AND CSS Code
HTML CODE
<div class="textCarousel">
<h4>Testimonials</h4>
</div>
<div class="testimonialcontainer">
<div class="container mt-5 mb-5">
<div class="row g-2">
<div class="col-md-4">
<div class="card p-3 text-center px-4">
<div class="user-image">
<img src="Images/Piolo.jpg" alt="Avatar" class="avatar">
</div>
<div class="user-content">
<h5 class="mb-0">Piolo</h5>
<span>Hotel Manager</span>
<p>“My first day I came to the clinic of Dr. Glenn, his team were amazing.
They have done their best to make me feel comfortable. I like to thank them for
the best treatment they gave me and I will recommend my friends to come to Family
Care Dental Clinic as well. My teeth looked fantastic!”</p>
</div>
<div class="ratings">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-3 text-center px-4">
<div class="user-image">
<img src="Images/Maritess.png" alt="Avatar" class="avatar">
</div>
<div class="user-content">
<h5 class="mb-0">Maritess</h5>
<span>Business Entrepeneur</span>
<p>“Doc Glenn definitely is a good dentist and his clinic is very child friendly, my daughter
now loves to go to a dentist. Thank you Doc for taking care of my teeth and also to my daughter. ”</p>
</div>
<div class="ratings">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card p-3 text-center px-4">
<div class="user-image">
<img src="Images/dolphy.png" alt="Avatar" class="avatar">
</div>
<div class="user-content">
<h5 class="mb-0">Dolphy</h5>
<span>Architect</span>
<p>“I definitely recommend this clinic, they have the state of the art equipments and Doc Glenn
is very accommodating. Thank you for making my dentures, it is more than I expected for... ”</p>
</div>
<div class="ratings">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</div>
CSS CODE
.avatar {
vertical-align: middle;
width: 200px;
height: 200px;
border-radius: 50%;
}
body{
background-color:#eee;
}
.card{
border:1px solid #cbe948;
height:500px;
box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
border-radius: 1rem;
}
.user-content p{
margin-top:5px;
font-size:12px;
}
.ratings i{
color:#69cff9;
}