Skip to content
Submitted almost 3 years ago

Social proof section challenge solution

Muhamad Nur Alfi Syahrin•100
@TahoeBoelat
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

Hi everyone. This my submission for this challenge design. Overall i made using CSS Flexbox for the layout, but im curious how to make a left space in second and third rating or space on top in purple card section? For now im make a new class, and add the margin-left for the second and third rating, and margin-top for second and third card. Any ideas? Thank you

Community feedback

  • Fraser Watt•1,790
    @fraserwatPosted almost 3 years ago

    Hey! This is looking great!!

    Few things I'd change:

    • Semantic HTML: your <div class="container"> acts more like a <main>, and I would have the <header> and <main> sections you currently have both as <section>. Also id's tend to be used for javascript functionality, I would use classes for the labelling.
    • Gets a bit stretched out at larger screen widths. I would add max-width: 1100px; margin: auto; to the .container.

    Keep up the good work!! Fraser

    Marked as helpful
    1
    Muhamad Nur Alfi Syahrin•100
    @TahoeBoelatPosted almost 3 years ago

    @fraserwat Thank you for your feedback. :)

    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