Submitted 5 months ago
Responsive Testimonials Grid Section (Html-CSS)
@hichamweblog
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am most proud of successfully implementing a fully responsive testimonials grid section that adapts seamlessly to various screen sizes.
What challenges did you encounter, and how did you overcome them?One major challenge was using CSS variables to manage the colors and backgrounds for each testimonial card using HSL values.
Example from the code:
:root {
--clr-primary: 263, 55%, 52%;
--clr-secondary: 217, 19%, 35%;
--clr-white: 0, 0%, 100%;
}
.testimonial-card {
color: hsl(var(--clr));
background-color: hsl(var(--bg));
}
.testimonial-card:nth-of-type(1) {
--clr: var(--clr-white);
--bg: var(--clr-primary);
}
What specific areas of your project would you like help with?
Are there any areas in my HTML or CSS where I can improve code quality, readability, or maintainability? Specifically, any feedback on the structure and organization of my CSS would be appreciated.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord