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

Responsive web page

Kingsleigh 240

@Kingsleigh-Obi

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

@MatiasVignola

Posted

Hello... so that the background image does not repeat, you should set the no repeat property, example: background-repeat: no-repeat; and to center the card, first define a margin at the top and bottom, and an auto margin at the sides, example: margin: 110px auto;

Marked as helpful

0

Kingsleigh 240

@Kingsleigh-Obi

Posted

@MatiasVignola Thanks Man, i'll correct that now

0

@purrrplelipton

Posted

  • The card isn't on the page's center, consider using a display flex on the direct parent of the card then margin auto on the card itself
  • The background's SVG repeats, consider adding a no-repeat to the background
  • The illustration image overflow, consider adding an overflow hidden to the card
  • The 'Proceed to Payment' button doesn't seem to have the box-shadow that the original has
  • The plan's pricing section has a background colour that's to deep compared to the original

making those corrections should make your solution match more closely to the original

0

Kingsleigh 240

@Kingsleigh-Obi

Posted

@purrrplelipton, Thank you soo much for the detailed response

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