Skip to content
Submitted almost 3 years ago

responsive social proof section

chief•220
@cujothechief
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 there! this is my solution to the social proof section challenge. feel free to look through my code: constructive criticism and suggestions are welcomed. thank you! <3

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 3 years ago

    👋 Hi @cujothechief!

    I notice that in the GitHub repo, there's a script.js file and it's also empty. I would recommend removing it from the repo. It might confuse the other developer (it might be you in the future).

    I also notice that you are using the Font Awesome icons for the star icons. Do you know that Frontend Mentor has provided the star icon for you?

    Anyway, 🎉 congratulations on finishing this challenge! 🎊 I have some feedback on this solution:

    • Accessibility
      • Swap the div with ul and section with li. Swap the i tag with span (if you want to keep using Font Awesome).
    <div class="stars">
  <section>
    <i class="fas fa-star"></i>
    <p>Rated 5 Stars in Reviews</p>
</section>
    • Your attribution should go outside the main landmark and wrap it with footer instead.
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
      attribution links goes here...
  </footer>
</body>
    • For the avatar, you can use the author's name as the alternative text.
    • I would recommend wrapping each p tag with blockquote for the testimonial.
    • Styling
      • The below content should be aligned to the left on desktop view.
      <h1>10,000+ of our users love our products.</h1>
  <p>We only provide products combined with excellent customer service. See what our customers are saying about our services.</p>
    • Other
      • Remove the script tag.

    That's it! Hopefully, this is helpful!

    Marked as helpful
    1
    chief•220
    @cujothechiefPosted almost 3 years ago

    @vanzasetia thank you very much!

    0
  • Account deleted

    Hi there 👋 Congratulate on finishing your project 🎉. You did a great job 🔨

    I give some suggestions that I hope help you take your project to the next level 📈. In user cards, user names should be in another color like dark pink, which is currently its too light or looks like a gray color 😉

    Happy coding ☕

    Marked as helpful
    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