Submitted over 3 years ago

Float and flexbox solution

Pierre• 215

@pchatard

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Made this one with float for the top part and flexbox for the bottom part.

Also used nth-of-type to shift ratings and quotes parts.

I just saw the comparison on the page looks weird, I don't really know why because my view looks good when I open the link. I'm open to any suggestions of improvements !

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, nice work, Pierre! 🙌

Your solution looks good! 👍

I only suggest,

Working a little more on the responsiveness of the site. Currently, there are a few issues such as the text in the boxes with the SVG stars and the title text of the testimonial boxes overflowing their containers when the width of the viewport decreases (around 800px to 600px).

Keep coding (and happy coding, too)! 😁

Tom Trung Zacchia• 125

@tomzacchia

Posted over 3 years ago

Hi Pierre,

Your solution looks good. The only difference I see is that the original design has a larger font size for the "10,000+" text and there is more empty space between the top of the page and the content.

Tom

Please log in to post a comment

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