Skip to content
Submitted about 4 years ago

Float and flexbox solution

Pierre•215
@pchatard
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

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
    @ApplePieGiraffePosted about 4 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)! 😁

    0
  • Tom Trung Zacchia•125
    @tomzacchiaPosted about 4 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

    0

Please log in to post a comment

Log in with GitHub

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