Submitted over 2 years ago

Social proof section challenge solution

Muhamad Nur Alfi Syahrin• 100

@TahoeBoelat

Preview site View code

This is a solution for...

Social proof section

HTML
CSS

1newbie

View challenge

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

@fraserwat

Posted over 2 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

Muhamad Nur Alfi Syahrin• 100

@TahoeBoelat

Posted over 2 years ago

@fraserwat Thank you for your feedback. :)

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