Skip to content
Submitted over 2 years ago

Order summary

Tom Golding•250
@ComanderPotato
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

Order preview card done with flex-box and relative units. Set up all color and font variables inside the root: element, use of flex box to center the preview card, as well as used flex to stack the buttons and annual plan/price. Transitions were added for mobile layout giving it a smooth transition for the media queries. CSS is a bit messy, just wanted to smash something out quickly and didn't refractor a lot of unnecessary code, such as the several display:flex,justify... etc. Let me know how it looks

Community feedback

  • faizan•2,420
    @afaiz-spacePosted over 2 years ago

    Hey @ComanderPotato,

    • curved image add in the body element of the CSS file.
    • Remove position and replace height:100vh with min-height:100vh in the body element.
    • Remove margin and width from the .order-info class. also, add padding: 3rem; in the order-info class.
    • Remove padding from the .pricing-container class.
    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