Hello developers, today in this blog, you'll learn how to create a Responsive Testimonials Section using HTML & CSS with modern UI.
A testimonial is a card with a statement that comments on the success of how good someone or something is. Testimonials help the user to build trust in the product or a person. The testimonials card may contain the person's name, profile picture, and some statement.
In this Responsive Testimonials Section, there are six testimonial cards with a statement, name, and the person's profile icon. Each testimonials card has some statement at the center, a person's name at the center bottom of the card, and a profile icon is placed at the top center of the testimonials card.
CSS hover effects have been used in every card. On hovering on each testimonials card, the size of the profile icon becomes zoomed or large. The border has been provided to every testimonials card. The border-radius property has been used in every card to make the rounded corners.
This Testimonials Section is fully responsive for any device which is made by using CSS media query property. On the PC, these testimonial cards are horizontally visible, but on the mobile screen, these cards are vertically visible. That is arranged one after the other.
The source code of this Responsive Testimonials Section using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Responsive Testimonials Section code on your projects.
Responsive Testimonials Section using HTML & CSS with modern UI [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
* {
margin: 0;
font-family: "Roboto", sans-serif, "Helvetica", sans-serif;
font-weight: 300;
}
body, html {
background-color: #FF9A8B;
background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}
.testimonials {
margin-top: 5px;
margin-bottom: 5px;
position: relative;
display: block;
width: 100%;
min-height: 250px;
}
.testimonials ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.testimonials li {
background-color: #202124;
margin: 50px 20px 10px 20px;
width:30%;
height: 250px;
border: solid 2px hotpink;
position: relative;
transition: ease-in-out .3s;
color:#fff;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.testimonials li img {
height: 70px;
width: 70px;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border-radius: 50%;
box-shadow: 0px 0px 0px 2px #fff;
background-color: #fff;
transition: box-shadow 0.3s linear;
}
.testimonials li p {
position: absolute;
width: 70%;
text-align: center;
top: 50px;
left: 50%;
transform: translatex(-50%);
font-size: 15px;
}
.testimonials li h1 {
position: absolute;
text-decoration: bold;
bottom: 10px;
left: 50%;
transform: translatex(-50%);
font-size: 17px;
}
.testimonials li:hover {
background-color: #212121;
color: #fff;
}
.testimonials li:hover img {
height: 80px;
width: 80px;
}
@media only screen and (max-width: 860px) {
.testimonials li {
width: 70%;
margin: auto;
display: block;
margin-top: 70px;
}
.testimonials li:first-child {
margin-top: 50px;
}
}
.credit{
text-align: center;
color: #fff;
font-weight: 900;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#202124;
font-weight: bold;
}
We hope you would like this Responsive Testimonials Section using HTML & CSS with modern UI.
Thank you for reading our blog. If you face any problem in creating this Responsive Testimonials Section using HTML & CSS with modern UI, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team