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 challenge on Frontend Mentor

Cas 210

@iguanasplit

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


i still have some trouble with sizing and card sizes. i noticed the main card size expands to fit the width of the text, this one worked by using an specified [VW] and and max-width. is this the recommended method?

and! i would like some feedback on my code? are the semantics alright? how could it be better?

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Hello @iguanasplit, Congratulations on completing this challenge!

You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

To improve your box-shadow, you’ve to have in mind two things that make a good shadow, blur and low opacity for smooth shadows. To improve your current shadow, decrease the opacity and increase the blur, try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

✌️ I hope this helps you and happy coding!

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