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 using Tailwind CSS

@ThornenSan

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


Guys, I'm looking forward to your feedback. Please don't hesitate 🚀

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @ThornenSan!

Your project looks great! If you add the color #E1E9FF to your background, it'll look even closer to the original design. Took a look at your code, tested it and it worked. Here's the updated code, in case you need:

.bg-image {
    background-color: #E1E9FF;
    background-image: url(../images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

@ThornenSan

Posted

@danielmrz-dev Thank you for the feedback

1
P
gfunk77 1,200

@gfunk77

Posted

This is great. Congratulations. I noticed that the bottom half of your background is still white. The easy solution is to just add that light blue color on the bg-image right before the url. ‘background: #color url(./whatever)’.

That should do it. Well done on the your solution, it looks fantastic.

Marked as helpful

0

@ThornenSan

Posted

@gfunk77 Thank you for the feedback

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