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 solution

@d3vcloud

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


This is my second challenge so if there is anything that can be improved please let me know. Thanks a lot.

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Xavi,

I like your design, good job completing this one!

  • i'd add background-size: 100% auto; background-repeat: no-repeat; to your background styles to closer match the design
  • you could add transition: ease .3s; to your interactive elements to make the hover effect smoother

All the best!

Marked as helpful

0

@d3vcloud

Posted

@darryncodes Thank you so much, I appreciate a lot your feedback.

0
Hania B. 1,360

@techanthere

Posted

Good job @d3vcloud! Here are the few suggestions for you:

  1. I have tested your solution, the card is not centered vertically in small heights and that's probably because you need to add some vertical padding in body. It's better to add min-height:100vh; in body
  2. No need to apply styling on both html, body { } instead use body selector only
  3. The card has no padding in smaller screens, try considering mobile-first design and resize card such that it works on smaller screen, don't need media queries, you can just add max-width instead of width here and some padding on the "container" div .

Good luck!

Marked as helpful

0

@d3vcloud

Posted

@techanthere Amazing my friend!. I appreciate a lot your comments. Thank so much.

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