Submitted almost 2 years ago

Order summary

#accessibility#semantic-ui

Tom Golding• 250

@ComanderPotato

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

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-space

Posted almost 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.

Please log in to post a comment

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