Skip to content
Submitted about 4 years ago

Social Proof Section using Flexbox, CSS variables and REM units.

Eric Salvi•1,350
@ericsalvi
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Open to feedback. One thing I struggle with is the colors of the not-so-accessible text content from the design. I am colorblind so that is a challenge. Anyone else struggling with this?

Code

Please log in to post a comment

Log in

Community feedback

  • tediko•6,700
    @tediko

    Hello, Eric Salvi! 👋

    Happy to see you posting another solution! It responds well. Here's my small suggestions:

    • Change the alt attributes for the .quote__card-author avatars as they don't do any extra context for screen reader users. Changing to alt="" will make screen readers skip those avatar images.
    • You repeat your HTML code with stars images which is unnecessary. Find the way to use only one star image for a .stars. You can do it easily by using background-repeat approach in your css. Your approach isn't wrong tho, you can keep it as it is tho.

    Good luck with that, have fun coding! 💪

  • P
    Patrick•14,265
    @palgramming

    it looks good until right below 375px it is like you added in an extra media query you do not need

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