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
- @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
withmin-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 GitHubJoin 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