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

Mobile first Social Proof Section using Sass

@vivienbalint

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


Second challenge is done, using (mostly) flexbox as suggested :) Please feel free to leave any feedback!

Community feedback

P

@emestabillo

Posted

Hi Vivien, great job! I agree that the star background is an awesome solution! Here are some thoughts:

  • I noticed you used a lot of ids for this project. I suggest sticking to classes if you're not using the div for JS or scrolling link. Ids have a high specificity and therefore much harder to override should you need to in the future.

  • You can simplify your html by doing away with some of the containers. page-container, content-wrap, and flex-container can probably be condensed into one.

  • The divs can also be exchanged for more semantic HTML.

  • The background patterns are missing on medium widths.

Hope this helps! :-)

2

@vivienbalint

Posted

Thank you! :)

0
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hi, Vivien Bálint! 👋

Good job! Your solution looks good and is responsive! 👍

Just a super tiny suggestion but I think a little less line-height on the paragraph of the testimonial cards would make the text look a little nicer and closer to the original design. 😉

Keep coding (and happy coding, too)! 😁

1

@vivienbalint

Posted

Thank you! :)

0
Arturo Simon 1,785

@artimys

Posted

Very nice Vivien👍 Good work on using flexbox. Interesting way of adding the icon-star as a bg image. I'll have to try it that way. I've never seen the value space for background repeat before.

  • I can suggest adding a max-width to your div#page-container.
  • At 1200px wide the third div.rating is offset to the left

Keep on coding!! 👍👍

1

@vivienbalint

Posted

Thank you :)

Yes, I didn't want to spam my html with star images, so I came up with this solution.

I'll look into your suggestions as well!

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