Order Summary Component Card using Vanilla CSS with Flexbox
Design comparison
Solution retrospective
I have successfully concluded the development of my Order Summary Component project, employing vanilla CSS and the Flexbox layout model.
Throughout the project's implementation, I acquired proficiency in utilizing the background property to configure the required SVG background.
Additionally, I adeptly employed Flexbox to ensure precise alignment of the project's elements. Should you have any feedback or inquiries, please feel free to share them.
Community feedback
- @Islandstone89Posted 12 months ago
Hi, good job,here is some feedback.
HTML:
-
Hero image and music icon are decorative images, which needs empty alt text:
alt=""
-
"Proceed to payment" would navigate you to another page, so should be a link
CSS:
-
It's best practice to link the fonts in the
<head>
of the HTML, not import it in CSS. -
Font-size must not be in px. Use rem instead.
-
Max-width should also be in rem.
-
Remove the fixed width for
.card-details
Marked as helpful1 -
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