This content originally appeared on DEV Community and was authored by Beginner Developer
Learn how to create testimonial section using HTML, CSS and Bootstrap
HTML Code
<!DOCTYPE html>
<html lang="en">
<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>Testimonial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<section class="testimonial-section py-3" id="testimonial">
<div class="container">
<h2 class="align-center pb-3 text-center">
What Our Clients Say
</h2>
<div class="col-lg-10 testimonials-container">
<div class="testimonials-item">
<div class="user row">
<div class="col-lg-3 col-md-4">
<div class="user_image">
<img src="images/user1.jpg" alt="" title="">
</div>
</div>
<div class="d-flex flex-column justify-content-center testimonials-caption pl-0 col-lg-9 col-md-8">
<div class="user_text">
<p class="mbr-text mbr-fonts-style mbr-lighter display-7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, saepe iusto blanditiis, architecto magni dolores perspiciatis expedita ut voluptates soluta neque voluptas eveniet
</p>
</div>
<div class="user_name mbr-bold mbr-fonts-style pt-3 font-weight-bold">
John Doe
</div>
</div>
</div>
</div>
<div class="testimonials-item">
<div class="user row">
<div class="col-lg-3 col-md-4">
<div class="user_image">
<img src="images/user2.jpg">
</div>
</div>
<div class="d-flex flex-column justify-content-center testimonials-caption pr-0 col-lg-9 col-md-8">
<div class="user_text">
<p class="mbr-text mbr-fonts-style mbr-lighter display-7">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed molestiae ipsam repellat nemo architecto itaque similique suscipit beatae consequuntur.
</p>
</div>
<div class="user_name mbr-bold mbr-fonts-style pt-3 font-weight-bold">
John Doe
</div>
</div>
</div>
</div>
<div class="testimonials-item">
<div class="user row">
<div class="col-lg-3 col-md-4">
<div class="user_image">
<img src="images/user3.jpg" alt="" title="">
</div>
</div>
<div class="d-flex flex-column justify-content-center testimonials-caption pl-0 col-lg-9 col-md-8">
<div class="user_text">
<p class="mbr-text mbr-fonts-style mbr-lighter display-7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur deleniti eaque architecto, sed placeat, quo sunt delectus perferendis dolores ad quasi facere.
</p>
</div>
<div class="user_name mbr-bold mbr-fonts-style pt-3 font-weight-bold">
John Doe
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS Code
.testimonial-section{
background-image: url(images/bg.jpg), linear-gradient(rgb(255 253 253 / 90%),rgb(253 253 253 / 50%));
background-blend-mode: overlay;
}
.testimonial-section h2,
.testimonial-section h3,
.testimonial-section p,
.testimonial-section .mbr-text {
letter-spacing: normal;
}
.testimonial-section .underline .line {
width: 2rem;
height: 1px;
background: #ffffff;
display: inline-block;
}
.testimonial-section .testimonials-container {
margin: 0 auto;
}
.testimonial-section .testimonials-container .testimonials-item:nth-child(2n) .user.row {
flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
}
.testimonials-container .testimonials-item:nth-child(2n) .user.row .testimonials-caption {
text-align: right;
}
.testimonial-section .testimonials-container .testimonials-item .user.row {
margin: 0;
}
.testimonial-section .testimonials-container .testimonials-item .user .user_image {
width: 150px;
height: 150px;
overflow: hidden;
margin: 2rem auto;
border-radius: 50%;
}
.testimonial-section .testimonials-container .testimonials-item .user .user_image img {
width: 100%;
min-width: 100%;
min-height: 100%;
}
@media (max-width: 260px) {
.testimonial-section .user_image {
width: 100% !important;
height: auto !important;
}
}
@media (max-width: 767px) {
.testimonial-section, .testimonials-container .testimonials-item:nth-child(2n) .user.row .testimonials-caption{
text-align: center;
}
.testimonial-section .testimonials-caption {
padding: 0 2rem 2rem 2rem !important;
}
.testimonial-section .testimonials-caption .user_name {
text-align: center;
padding-top: 0px !important;
}
}
Video
My Blog:- https://beginners-developer.blogspot.com
This content originally appeared on DEV Community and was authored by Beginner Developer
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Beginner Developer | Sciencx (2021-09-19T11:25:39+00:00) Testimonial Section in HTML and CSS. Retrieved from https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/
" » Testimonial Section in HTML and CSS." Beginner Developer | Sciencx - Sunday September 19, 2021, https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/
HARVARDBeginner Developer | Sciencx Sunday September 19, 2021 » Testimonial Section in HTML and CSS., viewed ,<https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/>
VANCOUVERBeginner Developer | Sciencx - » Testimonial Section in HTML and CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/
CHICAGO" » Testimonial Section in HTML and CSS." Beginner Developer | Sciencx - Accessed . https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/
IEEE" » Testimonial Section in HTML and CSS." Beginner Developer | Sciencx [Online]. Available: https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/. [Accessed: ]
rf:citation » Testimonial Section in HTML and CSS | Beginner Developer | Sciencx | https://www.scien.cx/2021/09/19/testimonial-section-in-html-and-css/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.