Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

Daniel 🛸 44,230

@danielmrz-dev

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Call4julius

Posted

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,230

@danielmrz-dev

Posted

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

@AyaElmancy

Posted

@danielmrz-dev Perfect keep going

1

Daniel 🛸 44,230

@danielmrz-dev

Posted

Thank you! @AyaElmancy

0
JulienLach 260

@JulienLach

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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