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

React Order Summary Component

@GuilhermeFigueira

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


Very simple project, no problems. And feel free to add suggestions or tips, i will appreciate it!

Community feedback

@MehrshadHeisenberg3

Posted

Great job your design looks just as the original but there is a slight difference.

If you look at the original one, you can see that there are two waves in the background and not just a simple background color.

By adding this piece of code in your css you can make that happen!

  body {
    background: url(images/pattern-background-desktop.svg), #e1e9ff;
    background-repeat: no-repeat, no-repeat;
  }

You're actually saying that you want to use the svg for the background.

Also you can give transition to your hover states to make the user experience much more smoother!

Great job again and I hope that you find this comment helpful!

Marked as helpful

1

@GuilhermeFigueira

Posted

@MCKH03 Thank you for the comment! I i didn't even notice the waves in the background and also thank you for the reminder on adding transitions to hover states. Very helpful comment!

0

@MehrshadHeisenberg3

Posted

@GuilhermeFigueira Thanks for reading my comment and I really enjoyed your design❤️

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