Hello developers, today in this blog, you'll learn to create a Responsive Review Section using HTML & CSS.
A Review Section is a part of the website on which reviews can be posted about people, businesses, products, or services. Reviews have the power to influence customer decisions, can strengthen a company's credibility.
In this blog (Responsive Review Section), on the webpage, there are three review cards with profile icons. Each review card contains the name of the person, place of the person, star rating, and some review content. When you view this review section on the large screen, that is on PC the three cards are arranged horizontally and on the smaller screen, the three cards are arranged vertically. This Review Section is made responsive by using CSS media query property.
The source code of this Responsive Review Section is given below, if you want the source code of this program, you can copy it. You can use this Responsive Review Section with your creativity and can take this project to the next level.
Responsive Review Section [Source Code]
To make this website (Responsive Review Section), you need to create two files: an HTML file and 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.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
display: flex;
height: 100%;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
.rev-section{
margin: auto;
padding: 0 1rem;
max-width: 1100px;
text-align: center;
}
.title{
font-size: 3.5rem;
color: rgb(50, 50, 50);
margin-bottom: .5rem;
color:#fff;
font-family:cursive;
}
.reviews{
margin: 2rem auto;
display: flex;
flex-wrap: wrap;
}
.review{
margin: 0 1rem;
min-width: 300px;
flex: 1;
}
.head-review{
margin: 1.75rem auto;
width: 150px;
height: 150px;
}
img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
}
.body-review{
background-color: rgb(238, 238, 238);
padding: 2.5rem;
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);
}
.name-review{
font-size: 1.5rem;
color: rgb(50, 50, 50);
margin-bottom: .25rem;
}
.place-review{
color: violet;
font-style: italic;
}
.rating{
color: rgb(253, 180, 42);
margin: 1rem 0;
}
.desc-review{
line-height: 1.5rem;
letter-spacing: 1px;
color: rgb(150, 150, 150);
}
@media (max-width: 678px){
.review{
margin-top: 1.5rem;
}
}
.credit a{
text-decoration: none;
color: #fff;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Review Section using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team