
My Solution for Order Summary Component Challenge!
Design comparison
Solution retrospective
Hello! 👋
I'm excited to share with you my solution for the order summary component challenge. 💕
In this challenge, I've learned how to stretch a image in background with the background-position property.😁
I don't think I had many difficulties, but I have two more general questions:
-
Is there any way to more easily identify when I will and will not need to work with flexbox? 🤔
-
I know that it is recommended to work with font-size using rem/em for responsiveness reasons, but what about other properties such as paddings, margins, borders? Should I work with rem/em or can I work with px? 🤔
By the way, any suggestions or recommendations are welcome.😊
Community feedback
- @MarziaJaliliPosted about 2 months ago
Nice work!
Some amandments you can make
- For smoother changes on hover of the buttons, you can use the
transition
property.
Take the code below as an example to get this feature:
For the
proceed to payment
:.proceed-to-payment-btn { transition: filter 0.4s; /* or .4s for short */ }
For the
cancel order
andchange
:.change-btn, .cancel-order { transition: color .4s; }
This ensures that the colors will change after 400 milliseconds. Which makes it looks even better.
Other than this you're doing great, man!
Keep up the great work 💪
Marked as helpful1P@RogeanCostaPosted about 2 months ago@MarziaJalili 👋
Thank you very much for your recommendation!😁
I will implement the transitions as soon as possible. 😊
0 - For smoother changes on hover of the buttons, you can use the
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