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 Section

Francesco 270

@FraCav99

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


What are you most proud of, and what would you do differently next time?

Pretty satisfied with the overall results, especially I used flexbox and grids in conjunction, remarks that these two are two incredible tools in our toolbelt!

Maybe I would have structured differently the markup, I think that if I opted to go full grid, maybe someof the markup could be removed.

Also I took inspiration from Kevin Powell's solution for the stars in the ratings, very cool trick with background-repeat property!

What challenges did you encounter, and how did you overcome them?

Where I struggled initially how to structure the grid.

At first I set it to be 3 columns, and it worked fine the testimonials parts, but with the upper part I had a column in between that was empty and I didn't find a solution on how to collapse it, so I decided to go with 2 columns and the testimonials part was convertend into a flexbox container.

What specific areas of your project would you like help with?

Any improvements is really appreciated! :)

In particular how to make images in the background better match the design

Community feedback

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