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 Proofing section using dispaly positioning.

InduRajput 120

@InduRajput

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


Please do review my code and give your suggestions. With many trial and error i some how managed to get the design structure but still very much confused on the display of different sections. Any kind of help is appreciated. Thanks in advance :)

Community feedback

JK 345

@JakubKepak

Posted

Hi InduRajput, nice work! The desktop view is pretty close to the design. 👏

My food for thoughts:

  • I would name class attributes in HTML something meaningful. That is just my opinion. It's easier to navigate in css file
  • I would position the boxes ( sectionX in your code) with css grid or flexbox. I would create a container for all with display: flex or grid. You can then shift them by adding margin.
  • Similarly, I would approach the rating-sec container.

With this you can then change ordering by changing display property on container to flex-direction: column, if you would use flexbox.

Keep coding! 🙌

0

InduRajput 120

@InduRajput

Posted

@JakubKepak Thank you so much :) for taking your time to review and giving your feedback, Will surely try to incorporate that in my code.

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