Skip to content
Submitted 11 months ago

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

Daniel 🛸•44,250
@danielmrz-dev
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

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.

Community feedback

  • Uwuigbe Julius Osemwengie•380
    @Call4juliusPosted 11 months ago

    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.

    1
    Daniel 🛸•44,250
    @danielmrz-devPosted 11 months ago

    I get what you mean, but there's a reason for that.

    First, those cards had some shared properties and others that were not shared, that's why I couldn't simply add the same class for all of them.

    Also, that very long line happens in the CSS because I used SASS in this project, so when SASS compiled the CSS code, it turned out that way. If you take a look on the .scss file, you'll notice that's different.

    @Call4julius

    0
    Uwuigbe Julius Osemwengie•380
    @Call4juliusPosted 11 months ago

    @danielmrz-dev

    Oh ok. I don't know SASS.

    0
  • AyaElmancy•70
    @AyaElmancyPosted 11 months ago

    @danielmrz-dev Perfect keep going

    1
    Daniel 🛸•44,250
    @danielmrz-devPosted 11 months ago

    Thank you! @AyaElmancy

    0
  • JulienLach•260
    @JulienLachPosted 11 months ago

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

    0

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