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

@marioferrer

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Travolgi 🍕 31,420

@denielden

Posted

Hello Mario, You have done a good work! 😁

Some little tips to improve your code:

  • To fix the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image

Keep learning how to code with your amazing solutions to challenges.

Hope this help 😉 and Happy coding!

Marked as helpful

1

@marioferrer

Posted

Hi @denielden, thank you very much.

  • I have already fixed the background image, also I have completed it using the shorthand for all the properties.
  • I have also changed the div that wraps the card to a main tag.
  • I have added a descriptive text to the banner image with the alt attribute.
  • I have removed the div that wrapped the banner image because you were right and it didn't do any function.
1
Travolgi 🍕 31,420

@denielden

Posted

@marioferrer you are welcome and keep it up :)

1

@197naveen

Posted

Hi Mario,

In desktop design, for class= card component - uses full viewport height, use margin property to increase the space around the card component, and its doesnt take the full height in desktop design. overall its very responsive and keep building

Thanks, naveen

0

@marioferrer

Posted

Hi @197naveen,

I don't understand exactly what you mean, could you explain it better? Thank you very much for your time.

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