Skip to content
Submitted over 2 years ago

CSS/HTML responsive

Maycon•70
@traceurmaycon
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

Community feedback

  • Dave Quah•660
    @MilleusPosted over 2 years ago

    Hi there 👋,

    Congratulations on completing your first challenge! 🥳👏🎉

    I have a few suggestions for improvement:

    1. There are accessibility landmark issues highlighted in the accessibility report. This can be fixed by having your body content wrapped within a <main> HTML element. You can find out more about this at the W3C ARIA landmarks website.

    2. A nice way to center content is to add a min-height: 100vh; to the <body> and use either CSS flex or grid. Here is a link on how to center with CSS flex.

    3. SVGs can be imported as an image, there actually isn't a need to copy it into the HTML. For example, <img src="images/icon-star.svg" alt="">.

    4. The background images are missing, see the bg-pattern SVG images in the images folder. These can be added with background-image: url(images/bg-pattern-bottom-desktop.svg) and a mix of other background properties to position the patterns.

    5. There's a typo in the color definition of the .rated-text CSS. Instead of color: --light-grayish-magenta; it should be color: var(--light-grayish-magenta);.

    Happy coding~

    Marked as helpful
    0
    Maycon•70
    @traceurmayconPosted over 2 years ago

    @Milleus Oh... didn't know about 3. Thanks for showing me that. About the rest I'll correct everything. Thx.

    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