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 component using vanilla CSS

@kanuos

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 is my solution to the newbie challenge Order Summary Component. Since it was a fairly easy layout, I decided to use vanilla CSS instead of a preprocessor or a library.

Tech Stack

  • Semantic HTML 5
  • CSS3

Tools used

  • VS Code - editor
  • Firefox - browser + dev tools
  • Git - SVN
  • GitHub - Code repo
  • GitHub Pages - deployment

Any suggestions/feedback/tips is welcome :)

Community feedback

@Akhil-Nagpal

Posted

Hey Sounak! 👋Congratulations on completing this challenge!🎉

You did a great job! 👏

I have a few suggestions regarding your code:

  • There's a slight drop shadow under the primary button. I think you missed that.
  • To achieve the desired size of the card, I have a trick, slightly adjust the screen size to 75-80%, which will make your screen 1440px.
  • Font size is small, you should set the font size of a paragraph to 16px not only for the text but also for the pricing panel.

**I hope these suggestions help you to improve!**😄

Happy Coding!

1

@kanuos

Posted

@Akhil-Nagpal These are some good tips. Do you mean zoom the page out to 75% to achieve 1440px size? That's a nifty trick.

0

@Akhil-Nagpal

Posted

@kanuos yeah!

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