Skip to content
Submitted over 2 years ago

Order Summary Component

Francisco•210
@jesusfrancisco88
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

Solution retrospective

Feedback welcome about my practices :D

Community feedback

  • Prince Roy•1,210
    @iprinceroyyPosted over 2 years ago

    That's excellent work @jesusfrancisco88. You need to focus on some key points here:-

    1. The content should be wrapped inside the main landmark to avoid accessibility issues. Like this <body><main>your content goes here......</main></body>.
    2. Avoid inline style, it is a bad practice.

    All the others are perfect. Hope it adds to your learning, Happy Coding :)

    Marked as helpful
    0
  • Madiha Khan•420
    @madkn1311Posted over 2 years ago

    Hello Fransisco,

    You have designed the card quite well.

    Here are some things that you need to change

    You need to remove the background from your html code and place it in the styling of the body.

    body
{
background-image: url("./images/pattern-background-desktop.svg");
}

    1. To center the card vertically use min-height: 100vh in the body instead of plain height as min-height allows responsive behaviour and adjusts according to the screen sizes.

    2. Always add an alt attribute to the images for better accessibility.

    All the best for the next challenge 😊

    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