Design comparison
Solution retrospective
I created this with having design tokens in mind.
Each property has to be stored within a variable and will be inherited.
Therefore design changes will be made easily, by just adjusting an isolated token for itself.
Please feel free to comment. Feedback is very much appreciated.
Community feedback
- @denieldenPosted about 2 years ago
Hello Flexowitsch, You have done a good work! 😁
Some little tips to improve your code:
- add
main
tag and wrap the card for improve the Accessibility - remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - to make it look as close to the design as possible add
width: 25rem
to.order-sum-card
class - centering a
div
withabsolute
positioning is now deprecated, it uses modern css likeflexbox or grid
- use flexbox to the body to center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px or %
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful1 - add
- @FlexowitschPosted about 2 years ago
I only used % and rem in the :root variables. The variables are then used throughout the design. The rest i will take and adjust my code. Thx for the feedback @denielden
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