Hey, I am Ajink, and today in this blog, we’re going to design a responsive testimonial section using HTML and CSS. A responsive testimonial section ensures that testimonials look great on various devices, providing an optimal user experience.
HTML Code: create index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Responsive Testimonial Section</title>
</head>
<body>
<section class="testimonial-container">
<div class="testimonial">
<div class="testimonial-content">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero."</p>
<h4>John Doe</h4>
<span>Company ABC</span>
</div>
</div>
<div class="testimonial">
<div class="testimonial-content">
<p>"Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
<h4>Jane Smith</h4>
<span>Company XYZ</span>
</div>
</div>
<!-- Add more testimonials as needed -->
</section>
</body>
</html>
HTML Code Explanation:
- We have a basic HTML structure with a section containing testimonial divs, each with content, name, and company.
CSS Code: create a style.css
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.testimonial-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.testimonial {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin: 20px;
overflow: hidden;
width: 300px;
}
.testimonial-content {
padding: 20px;
text-align: center;
}
.testimonial p {
font-style: italic;
color: #333;
margin-bottom: 15px;
}
.testimonial h4 {
color: #3498db;
margin: 0;
}
.testimonial span {
color: #666;
}
CSS Code Explanation:
- The CSS provides styling for the testimonial section, including colors, shadows, and responsive design.
flex-wrapis used to allow testimonials to wrap onto the next line on smaller screens.
Conclusion:
In this blog, we successfully designed a responsive testimonial section using HTML and CSS. Responsive design ensures that testimonials adapt to different screen sizes, providing an optimal viewing experience. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.
Thanks for reading, and if you have any doubts, feel free to comment!
