Responsive Testimonials Section using only HTML & CSS
Hello readers, Today in this blog you’ll learn how to create a Responsive Testimonials Section using only HTML & CSS.
A website testimonial shows the success of a site’s products and the statement that comments on how good someone or something is. Testimonials help to convince interested users that you’re worth their trust. By strategically website testimonials are placing on a dedicated ‘Testimonials’ page.
In this program [Responsive Testimonials Section], there are three testimonials box or card on the webpage and inside each box, there is a quote, name, job, and stars rating of that person. This testimonial section is fully responsive for any devices like mobiles and tablets. On the PC, these boxes are shown in a horizontal line but on mobile devices, these boxes are shown vertically.
If you’re feeling difficult to understand what I am saying. You can try Own with below code copy and paste it.
HTML
<!DOCTYPE html>
<!-- Created By Praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Responsive Testimonials Section | vikashtech</title> -->
<link rel="stylesheet" href="blog.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<div class="box">
<i class="fas fa-quote-left quote"></i>
<p>Lorem aliasry ipsum dolor sits ametans, consectetur adipisicing elitits. Expedita reiciendis itaque placeat thuratu, quasi yiuos repellendus repudiandae deleniti ideas fuga molestiae, alias.</p>
<div class="content">
<div class="info">
<div class="name">Alex Smith</div>
<div class="job">Designer | Developer</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<div class="image">
<img src="Screenshot (12).png" alt="">
</div>
</div>
</div>
<div class="box">
<i class="fas fa-quote-left quote"></i>
<p>Lorem aliasry ipsum dolor sits ametans, consectetur adipisicing elitits. Expedita reiciendis itaque placeat thuratu, quasi yiuos repellendus repudiandae deleniti ideas fuga molestiae, alias.</p>
<div class="content">
<div class="info">
<div class="name">Steven Chris</div>
<div class="job">YouTuber | Blogger</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<div class="image">
<img src="Screenshot (11).png" alt="">
</div>
</div>
</div>
<div class="box">
<i class="fas fa-quote-left quote"></i>
<p>Lorem aliasry ipsum dolor sits ametans, consectetur adipisicing elitits. Expedita reiciendis itaque placeat thuratu, quasi yiuos repellendus repudiandae deleniti ideas fuga molestiae, alias.</p>
<div class="content">
<div class="info">
<div class="name">Kristina Bellis</div>
<div class="job">Freelancer | Advertiser</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<div class="image">
<img src="Screenshot (15).png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #17a2b8;
}
::selection{
background: rgba(23,162,184,0.3);
}
.wrapper{
max-width: 1200px;
margin: auto;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .box{
background: #fff;
width: calc(33% - 10px);
padding: 25px;
border-radius: 3px;
box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
}
.wrapper .box i.quote{
font-size: 20px;
color: #17a2b8;
}
.wrapper .box .content{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 10px;
}
.box .info .name{
font-weight: 600;
font-size: 17px;
}
.box .info .job{
font-size: 16px;
font-weight: 500;
color: #17a2b8;
}
.box .info .stars{
margin-top: 2px;
}
.box .info .stars i{
color: #17a2b8;
}
.box .content .image{
height: 75px;
width: 75px;
padding: 3px;
background: #17a2b8;
border-radius: 50%;
}
.content .image img{
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 2px solid #fff;
}
.box:hover .content .image img{
border-color: #fff;
}
@media (max-width: 1045px) {
.wrapper .box{
width: calc(50% - 10px);
margin: 10px 0;
}
}
@media (max-width: 702px) {
.wrapper .box{
width: 100%;
}
}
- By Praveen Kumar
- January 7, 2021 5:02 pm
- 0
- Tags: customer review, quotes, testimonial section
Comments
Leave a Reply
Latest Posts
How to send message via Telegram Bot using PHP - Telegram API
Telegram is a great platform for chat and communication purposes. Having a large community and large user base, it is…
SuiteCRM, an open source tool for startups to use from an early stage.
When we talk about businesses in their early stage, it's quite a big deal to choose good management and sales…
How to Implement Google QAuth Authentication | Google Login - PHP MySQL
PHP Google OAuth API allows users to login into a website with their Google credentials. A user with a Google…
How to use Google Two Factor Authentication in your project?
At our end we take security at a priority, implementation of different ways to secure website should be the priority…
