Skip to content
Submitted about 3 years ago

summary-card_component

#accessibility
Nnenna Miriam Udefiβ€’300
@Nnenna-udefi
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Anosha Ahmedβ€’9,300
    @anoshaahmedPosted about 3 years ago

    To avoid accessibility issues in the future:

    • wrap everything in your body in <main>
    • start your headings with h1 and move up by one level each time

    Good job! :)

    1
  • Amonβ€’2,560
    @A-amonPosted about 3 years ago

    Hello! Awesome work on this~ πŸ˜€

    Here are some tiny suggestions:

    • You don't need <br> tags for the paragraph. Let the words wrap naturally.
    • To ensure the card is in the center horizontally on large devices, unset width for <body>. Then, set background-size:100%; so that the background image fills up the remaining space.
    1
  • Meladβ€’110
    @meladcodesPosted about 3 years ago

    Hi , Well done on completing it. In order to avoid accessibility issues you can wrap everything with a <main></main> tag. Also you don't have to write your width and height in strings.

    Hope this helps!

    1

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