Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Component

Franciscoβ€’ 210

@jesusfrancisco88

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback welcome about my practices :D

Community feedback

Prince Royβ€’ 1,210

@iprinceroyy

Posted

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

@madkn1311

Posted

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
Discord logo

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