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

Responsive order summary

@akashmishrahaha

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


What are you most proud of, and what would you do differently next time?

Everything I guess ;)

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

I loved the fact that we can use svg as background.

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

Nothing as of now, but when maybe when I will work with frameworks.

Community feedback

Luca 130

@LucaJahnen

Posted

Hello there,

Congrats on submitting your solution.

I would consider some minor changes:

styles

Why did you set font-size: 62.5% on the html tag? The styled-guide.md file states you should not change the default value of 16px

white space

Consider changing your margin values to improve your design, e. g. moving your heading and description together to emphasize these elements belong together.

In my opionion, you should decrease the box-shadow value to match the design even better. I would suggest box-shadow: 0 18px 16px rgba(0, 0, 0, 0.24)

Let me know if you have any questions left and consider marking this answer as useful

Marked as helpful

0

@akashmishrahaha

Posted

@LucaJahnen I set font-size:62.5% in order to use rem. But yes I changed the size from 16px to 18px. Thankyou for the shadow advice and pointing out the size ;). Ill look into it.

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