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 Card using HTML & CSS

@DanielGrec

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 was really fun actually! Any feedback welcome! Tried to make it as close to the project as possible.

Community feedback

Lucas 👾 104,420

@correlucas

Posted

Hello Daniel, congratulations for you new challenge!

You've done a really good challenge this time. I don't there's much to add. I would say that you can only add a margin to the container to avoid the container card touching the the screen bounds. With a value around 20px or 24px if you note the design file for the mobile version there's a little space between the card and the screen borders.

.container { margin: 20px; }

Congrats bro this is an well done solution!

Marked as helpful

1

@DanielGrec

Posted

@correlucas Hello Lucas.

Thank you! I really tried to do everything I can to make it look as close as possible before actually submitting. I will update the project with your info!

I am learning a lot through this platform and I'm glad you all are so helpful!

0
zdrco 0

@zdrco

Posted

Noob question: How do you put the box in front of the background. Mine just always go below the pattern background.

0

@DanielGrec

Posted

@zdrco It can be two reasons actually, either your html code is in the wrong order, having the background after the box, or you're setting some sort of z-index to either the background or the box. You can check the code from my solution and compare it with yours, see where you're making the mistake. Hope this helps!

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