Submitted 3 months ago

Order Summary Component using CSS Grid and Flexbox

HeewonSeo1• 80

@HeewonSeo1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Background image was a bit challenging, but I eventually figured it out.

What specific areas of your project would you like help with?

Maybe a more indepth understanding of background images and box shadows. I still need to work on responsive design as well.

Community feedback

Carlos Maracara👷👨‍💻• 780

@MaracaraCarlos

Posted 3 months ago

Hello HeewonSeo1your solution was very similar to the original design, congratulations. Some friendly constructive feedback:

In the buttons you can place the class cursor: pointer; this will cause every time the mouse cursor passes over your button the hand will appear pointing to the element.
You can use rem instead of px for the font-size dimensions of this text to adapt better to browsers and devices. Why font-size must NEVER be in pixels

Marked as helpful

Please log in to post a comment

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