Skip to content
Submitted over 2 years ago

Responsive social proof section CSS Only

Peally•200
@Peallyz
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

It's my best attempt but it's not perfect. I have some issues on mobile screen with rating box behind the comment. I'm not sure that the comment card are done by the best way.

That was cool to do that challenge.

Community feedback

  • Brian Johnson•210
    @BrianJ-27Posted over 2 years ago

    Hey Peally,

    Good job with getting this project completed. I do have some suggestions that can can help you.

    1. Please take a deep look at your basic HTML structure. It is incorrect. especially your <section> tag that has your <body> tag nested within it. Please remove that section tag from your code. Here's a link that will walk you through how to properly setup a basic HTML boilerplate structure. [https://www.sitepoint.com/a-basic-html5-template/] Refactor your html structure and you will lose a lot of these HTML issues above.

    2. In your code you are not correctly using <section> tags. When you use them, you have to have heading tags nested within them like an <h2> tag for example. So I would simply change your <section> tags to <div> tags.

    3. you must always have one main landmark or <main> tag on the page for accessibility reasons. so in your case, change your <section class="top"> to <main class="top"> and the closing tag too..

    So those are a few things to start but overall good job my friend

    Marked as helpful
    0
    Peally•200
    @PeallyzPosted over 2 years ago

    @BrianJ-27 I guess i understand what you mean. What ever i have to thank you for the tips ! I'll try to use them for this and the next challenge !

    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