Skip to content
Submitted over 1 year ago

Social Proof Page using Grid + hover effects + different color pallete

sass/scss, accessibility
P
Daniel 🛸•44,790
@danielmrz-dev
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, Front-end Mentor Community! I'm Daniel and this is my solution to Social Proof Section Challenge! 🚀

This was by far the most difficult challenge using CSS Grid. It's definitely the one that I learned the most from. If you wanna practice Grid, this is one of the best challenges to do so.

It took me many hours, but I managed to finish it.

If you have any suggestions on how I can improve it, please feel free to leave me a comment! I appreciate feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Uwuigbe Julius Osemwengie•380
    @Call4julius

    I noticed this long line of selection:

    body .principal .section02 .rating01, body .principal .section02 .rating02, body .principal .section02 .rating03{}

    Since the aim was to select the various ratings, I would have just added rating class to each in the html mark-up.

    Then writing the rating:hover like this too.

    Nice code sir. You are really doing well.

  • AyaElmancy•70
    @AyaElmancy

    @danielmrz-dev Perfect keep going

  • JulienLach•260
    @JulienLach

    Wow ! Looks gorgeous , thanks i will check the grid with the cards :)

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