Hello developers, today in this blog, you'll learn how to create a Responsive Testimonials Section using HTML & CSS.
In this Responsive Testimonials Section, there are three testimonial cards with a statement, star rating, name of the person, and the person's profile icon. Each testimonials card has a profile icon at the top, the name of the person which is followed by a star rating, and some content about the person.
The box-shadow 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 [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;
padding: 0;
font-family: "montserrat",sans-serif;
}
body{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.testimonials{
padding: 40px 0;
color: #434343;
text-align: center;
}
.inner{
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 0 20px;
}
.border{
width: 160px;
height: 5px;
background: #000;
margin: 26px auto;
}
.row{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col{
flex: 33.33%;
max-width: 33.33%;
box-sizing: border-box;
padding: 15px;
}
.testimonial{
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.testimonial img{
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.name{
font-size: 20px;
text-transform: uppercase;
margin: 20px 0;
}
.stars{
color: #000;
margin-bottom: 20px;
}
@media screen and (max-width:960px) {
.col{
flex: 100%;
max-width: 80%;
}
}
@media screen and (max-width:600px) {
.col{
flex: 100%;
max-width: 100%;
}
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Testimonials Section using HTML & CSS, 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