Skip to content
Submitted about 3 years ago

html-css and bootstrap social prove section solution

faiyaz rahman•260
@faiyaz-rahman13
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

please let me know how is the website and how can I improve it and make it more responsive on other devices. it would be a pleasure for me if you guys help me improve more in this section

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted about 3 years ago

    Hey, great work on this one. Both layout in desktop and mobile is good and the responsiveness I think is fine as well.

    Some suggestions would be:

    • Have a main element that will wrap the whole content. Having a main element makes your website more structured and this will help also other users to navigate properly on a website. On this one it could be:
    <body>
  # header is here if there is header for navigations
  <main>
    All the content in here
  </main>
  # footer is here if there is a footer
</body>
    • You also forgot to add the two round background images on your solution. You might want to add that.
    • The text for the ratings beside the stars could have used a font-weight setting to a bold like the original.
    • On the testimonial section, I think you may have swapped the name of the first lady and the guy on the middle. Colton is guy, Irene is lady.
    • Also on the img of those in the testimonial section. You could have use their name as the value for the alt attribute, like alt="Colton Smith".
    • The name of the person on the testimonial is right to be a heading tag, but your pick of heading tag is wrong. Do not jump from using 2 level heading tags. What I mean is that, if you use h1 do not jump to h3 without having h2. Use heading tags incrementally by one level. h1 to h2 to h3 without skipping any heading level with 2.
    • On the mobile layout, I see that you are centering the boxes that holds the rating. Use a margin: 0 auto so that it will be dynamically centered or just change the 0 on the margin to adjust the top and bottom margin. Removing also the left property on those boxes on mobile layout would be good, since the margin will handle the centering of it.

    Aside from those, you did a great job on this one.

    Marked as helpful
    1
    faiyaz rahman•260
    @faiyaz-rahman13Posted about 3 years ago

    @pikamart thank you so much for helping me and pointing out my mistakes. It means a lot to me and I am very thankful to you for helping me refining and constructing my work more firmly.

    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