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 Landing

@simplysabir

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Martin 460

@nonso01

Posted

  • just some couple of things to review, which might make your solution much more better.
  • for the rating text(s) you forgot to use the appropriate color which was very dark magenta
  • for the mean time I don't have a functional machine, would have made a pull request, the solution looks stretched on larger screens, which means you have to increase your components as well( probably responsively) try using relative sizes (%)
  • doesn't look too good on mobile, with time I know you will do it.
  • and add text-align: center to the card paragraph and other places where needed.

Marked as helpful

0

@simplysabir

Posted

@nonso01 thanks a lot

0
faizan 2,420

@afaiz-space

Posted

Hey @simplysabir

  • add a curved background image in the background.
  • add min-height:100vh; in the body and the .container class. -add height: 350px; in the .cards class.
  • remove the margin from the card1, card2 and card3 in the class.
  • add self-align:flex-start; in the card1.
  • add self-align:center; in the card2.
  • add self-align:flex-end; in the card3.

same property used in the rating card.

Marked as helpful

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