Design comparison
Solution retrospective
This is my solution for the order-preview-card component and is my second solution on front-end mentor. I did this one to correct the mistakes i did in the first one and improve my css. If there is any advice on how i can improve the code, i'm open for suggestions.
Community feedback
- @NaveenGumastePosted over 2 years ago
Hello Adeyemi Abiade ! Congo π on completing this challenge
Let's look at some of your issues, shall we:
-
"In Annual Plan" reduce the bottom space
-
add background shadow to proceed to payment button
-"The element a must not appear as a descendant of the button element" this is pretty obvio
happy Codingπ
Marked as helpful0 -
- @dolomita28Posted over 2 years ago
Hi Adeyemi, Well done! You could remove the flex class at <div class="payment-amount flex"> so that these two items of that dive get closely aligned.
Marked as helpful0 - @denieldenPosted over 2 years ago
Hi Adeyemi, great job!
For fix the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center; background-size: contain; background-color: #e0e8ff;
Overall you did well :)
Hope this help and happy coding!
Marked as helpful0@CmdlinerPosted over 2 years ago@denielden Thanks very much, but please i do not understand the background property values "top and contain" and the reason why they are used.
1@denieldenPosted over 2 years ago@Adeyemi-Abiade You are welcome!
top is the position and contain is the size of image, read here:
I would really appreciate if you mark my comment as helpful if it helped you, thank you very much :)
Marked as helpful0
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