Testimonials grid section using HTML and CSS
Design comparison
Solution retrospective
This is my solution for the testimonials grid section. I need someone to explain me how to properly display the box shadow for the two white cards (bottom-left and right) and what color should I have used for it, cause I couldn't figure it out. Any other feedback is highly appreciated.
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
Regarding your question,
You would use the
box-shadow
property to achieve it and the color property should have been provided in the "style guide".Here’s a generator you can use:
- The profile images are not decorative. Their alt tags should not be blank. It should state the following; “Headshot of -person’s full name-“
More Info:📚
- Your use of headings is incorrect, since the
h1
heading can only be used once per page.
- The only headings in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a Paragraph Element.
- improve the semantics of your component, you will want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.
Code:
<figure> <figcaption></figcaption> <blockquote></blockquote> </figure>
More Info:
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1@DanielLucaciPosted almost 2 years ago@vcarames Thanks a lot for your feedback. I appreciate it !
0 - @catherineisonlinePosted almost 2 years ago
Looks awesome! Love the animation part🙌🏻
1
Please log in to post a comment
Log in with GitHubJoin 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