Skip to content
Submitted about 3 years ago

Order summary

accessibility, semantic-ui
Tom Golding•250
@ComanderPotato
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • faizan•2,420
    @afaiz-space

    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.

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