Skip to content
Submitted over 3 years ago

Social Proof Section with HTML & CSS

YannikS14•110
@YannikS14
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This one went pretty well. Only two things that I'm curious for a better solution are:

  • The five stars in the rating div are currently five seperate HTML img tags. I think a better solution would be something like a ::before-selector on the .rating-class, but I was only able to get one star into it. How could I get 5 duplicates of the star image in there?

  • I struggled with the vertical offset on the magenta review boxes. I used position: relative with a 20px (e.g. 40px) top offset on the nth-child(2) and last-child of .review. But I think there might be a better way for this.

Thanks for any feedback :)

Community feedback

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    Hi @YannikS14! Your solution looks great on desktop and smaller mobiles, but you may want to have a look at what happens on larger mobiles (you can do that in your browser). 375px is too early to change to desktop layout :)

    As for your question - you only get one ::before and one ::after for each element so not sure how that would be done, maybe by setting it as the background and allowing to repeat it 5 times? But I don't think it would work as well (I don't think you could control the spacing between images, for example), and it seems like a lot more effort than just embedding the stars in HTML as you did.

    I personally used Flexbox for this challenge, a lot of people also use grid and place items accordingly, but offsetting works well here too, I think. The only issue would be if you had some content below those offset elements, because they could overlap - but it's not a problem here :)

    Hope this helps!

    1

Please log in to post a comment

Log in with GitHub

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