Order summary component using SASS GRID and Flexbox
Design comparison
Solution retrospective
Any advice on how to correctly position the middle section similarly to the design as well as any improvements overall would be greatly appreciated. Thank you!
Community feedback
- @hafizanadliPosted about 3 years ago
To make the middle section similar to design, you can wrap music icon and the list with a div. And use flexbox to that div to position it correctly.
Marked as helpful2 - @afrusselPosted about 3 years ago
There are few areas you are missing. Added bg color on annual plan, icon and change section. Also use this below code for bg image
body{ background-color: var(--pale-blue); background-image: url("images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-size: 100% 50%; display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; }
Marked as helpful2 - @webshurikenPosted about 3 years ago
Nice job replicating the card. Apart from what Ahmed Faisal pointed out, I would recommend:
- looking into HTML5 Semantics. It will help separate your content by its meaning and also improves accessibility.
- also, not required, it would make reading code easier to read if you add indentation.
Happy coding :-)
0
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