Skip to content
Submitted over 1 year ago

Responsive order summary component using vanilla CSS

Sounak Mukherjee•560
@kanuos
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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•180
    @Akhil-NagpalPosted over 1 year ago

    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
    Sounak Mukherjee•560
    @kanuosPosted over 1 year ago

    @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•180
    @Akhil-NagpalPosted over 1 year ago

    @kanuos yeah!

    0

Please log in to post a comment

Log in with GitHub

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