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

HTML3, Tailwind CSS

@MundiaNderi

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


I've been having trouble with the quirky background images that Frontend Mentor designs have and I'm happy to have achieved this one.

Community feedback

P
Jax Teller 670

@piushbhandari

Posted

  • the background image (the wavy pattern) gets messed up above 1440px screen width. i would suggest changing your styles for .card to be background-repeat: repeat-x; instead of no-repeat

  • add an alt attribute to your img element

  • cancel order shouldn't just be a text. presumably on a web page this would be an anchor/button element with hover/focus states

  • i would apply the div styles to the proceed to payment link. observe what happens when the link is focused/hovered on. likely the surrounding div can then be removed

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