Skip to content
Submitted over 3 years ago

Order Summary Card w/ Pure CSS

Michael•15
@zhaungsont
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

I'd like to know if there are any better ways to implement the div that holds the music logo and "Annual Plan" than my bare-bone html table. I am assuming my method limits the flexibility of this div's design. (e.g. I don't know a proper way to change the vertical spacing between "Annual Plan" and "$59.99/year", or how to fine-tune the positions of those elements in this div.)

Community feedback

  • Bharath Sampath•120
    @bharath-sampathPosted over 3 years ago

    Hey Michael, the desktop design is awesome! Here are some pointers which helped me complete this challenge -

    1. Try using relative units (rem, em) rather than hard pixels. This helps in reponsiveness
    2. Try using flexbox/grid. It makes life a lot easier when it comes to centering divs (horizontally and vertically).

    Please find my solution here - https://bharath-sampath.github.io/order-summary-component/

    Marked as helpful
    1
    Michael•15
    @zhaungsontPosted over 3 years ago

    @bharath-sampath

    Hi Bharath,

    Thank you so much for the feedback! These are some extremely valuable tips and I really appreciate them! Your advice has really immensely helped me. Btw, your solution is such a fantastic recreation and I love it!!

    1

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