Learn how to build stunning customer reviews using HTML and CSS. Enhance your website's credibility and engagement effortlessly.
Table of Contents
Customer reviews play a crucial role in shaping the credibility and trustworthiness of websites and e-commerce platforms. In this guide, we'll explore how to create visually appealing and responsive customer review sections using HTML and CSS.
Source Code
Step 1 (HTML Code):
To begin, let's structure the HTML markup for our customer review section. We'll include elements for rating, comments, and user details.
Let's break down the code:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which in this case is HTML5.
2. <html lang="en">: This opening tag indicates the beginning of the HTML document and specifies the language of the document as English.
3. <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and the title of the webpage.
- <meta charset="UTF-8" />: This meta tag specifies the character encoding of the document as UTF-8, which supports a wide range of characters from different languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />: This meta tag instructs Internet Explorer to use the latest rendering engine available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: This meta tag sets the viewport properties, ensuring proper scaling and rendering on various devices.
- <title>Customer Review</title>: This title tag sets the title of the webpage as "Customer Review".
- <link rel="stylesheet" href="https://fonts.goo..">: This link tag imports a font stylesheet from Google Fonts, specifically the "Poppins" font family, with various weights and styles.
- <link rel="stylesheet" href="styles.css">: This link tag imports an external CSS file named "styles.css", presumably containing additional styles for the webpage.
4. <body>: This section contains the visible content of the webpage.
- <section id="testimonials">: This section defines a container for customer testimonials.
- <div class="testimonial-heading">: This div contains the heading for the testimonials section.
- <span>Comments</span>: This span displays the text "Comments".
- <h4>Clients Says</h4>: This heading displays the text "Clients Says".
- <div class="testimonial-box-container">: This div is a container for individual testimonial boxes.
- <div class="testimonial-box">: This div represents an individual testimonial.
- Within each testimonial box, there are elements for the client's profile picture, name, username, star ratings, and comment.
- <div class="testimonial-box">: Similar divs for additional testimonials follow, each containing the same structure as described above.
- <script src='https://kit.font..2.js'></script>: This script tag imports the Font Awesome library, providing access to various icons used in the webpage (e.g., star icons for ratings).
Step 2 (CSS Code):
Now, let's style our reviews to make them visually appealing. We'll use CSS to add colors, fonts, and spacing to enhance the review section's design.
Let's break down the CSS code:
1. The * selector applies the following styles to all elements on the page. It sets margins and padding to 0 pixels, applies the "poppins" font to all text, and ensures that the box-sizing property includes the border and padding in the element's total width and height.
2. The a selector removes the default underline from all anchor (link) elements.
3. The #testimonials selector styles a specific element with the ID "testimonials". It sets it to flex display, with its items centered both horizontally and vertically, and its flex-direction set to column. The width is set to 100%.
4. The .testimonial-heading class styles elements with this class. It sets letter spacing, margin, padding, and aligns content both horizontally and vertically.
5. The .testimonial-heading span selector styles span within elements with the .testimonial-heading class. It sets font size, color, margin, letter spacing, and text transformation.
6. The .testimonial-box-container class styles elements with this class. It sets them to flex display, with items centered both horizontally and vertically, wrapped when necessary, and the width set to 100%.
7. The .testimonial-box class styles elements with this class. It sets width, box shadow, background color, padding, margin, and cursor. It's essentially styling a box for testimonials, with some shadow and padding.
8. The .profile-img class styles elements with this class. It sets dimensions, border radius, overflow behavior, and margin.
9. The .profile-img img selector styles images within elements with the .profile-img class. It ensures the image fills its container while maintaining aspect ratio and centers it.
10. The .profile class styles elements with this class. It sets them to flex display and aligns items.
11. The .name-user class styles elements with this class. It sets them to flex-direction column.
12. The .reviews class styles elements with this class. It sets the color to a specific shade of yellow.
13. The .box-top class styles elements with this class. It sets them to flex display, with items spaced evenly and aligned.
14. The .client-comment p selector styles paragraphs within elements with the .client-comment class. It sets font size and color.
15. The .testimonial-box:hover selector styles elements with the .testimonial-box class when hovered over. It applies a slight upward translation and a transition effect for smooth animation.
16. Media queries are used to apply specific styles based on the viewport width. For example, when the viewport is less than 1060px wide, the width of .testimonial-box is adjusted, and the padding is reduced. Similar adjustments are made for smaller viewport sizes.
17. The ::selection pseudo-element styles the portion of the document that has been highlighted by the user. It sets the text color to white and the background color to dark gray.
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
}
a{
text-decoration: none;
}
#testimonials{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:100%;
}
.testimonial-heading{
letter-spacing: 1px;
margin: 30px 0px;
padding: 10px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.testimonial-heading span{
font-size: 1.3rem;
color: #252525;
margin-bottom: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
.testimonial-box-container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width:100%;
}
.testimonial-box{
width:500px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
background-color: #ffffff;
padding: 20px;
margin: 15px;
cursor: pointer;
}
.profile-img{
width:50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.profile-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.profile{
display: flex;
align-items: center;
}
.name-user{
display: flex;
flex-direction: column;
}
.name-user strong{
color: #3d3d3d;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
.name-user span{
color: #979797;
font-size: 0.8rem;
}
.reviews{
color: #f9d71c;
}
.box-top{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.client-comment p{
font-size: 0.9rem;
color: #4b4b4b;
}
.testimonial-box:hover{
transform: translateY(-10px);
transition: all ease 0.3s;
}
@media(max-width:1060px){
.testimonial-box{
width:45%;
padding: 10px;
}
}
@media(max-width:790px){
.testimonial-box{
width:100%;
}
.testimonial-heading h1{
font-size: 1.4rem;
}
}
@media(max-width:340px){
.box-top{
flex-wrap: wrap;
margin-bottom: 10px;
}
.reviews{
margin-top: 10px;
}
}
::selection{
color: #ffffff;
background-color: #252525;
} Final Output:
Conclusion:
In conclusion, mastering the creation of responsive customer review sections using HTML and CSS is essential for any website looking to build trust and credibility with its audience. By following the techniques outlined in this guide, you can design visually appealing reviews that adapt seamlessly to different devices and screen sizes, enhancing user experience and driving engagement. Remember to regularly update and optimize your review sections to maintain relevance and continue building trust with your audience. With these skills in hand, you're well-equipped to craft compelling customer testimonials that leave a lasting impression.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
