Social Proof Page using Grid + hover effects + different color pallete
Design comparison
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
- @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@danielmrz-devPosted 11 months agoI 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@Call4juliusPosted 11 months ago@danielmrz-dev
Oh ok. I don't know SASS.
0 - @AyaElmancyPosted 11 months ago
@danielmrz-dev Perfect keep going
1 - @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 GitHubJoin 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