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.
@NaveenGumaste
Posted
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 helpful
@dolomita28
Posted
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 helpful
@denielden
Posted
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 helpful
@Cmdliner
Posted
@denielden Thanks very much, but please i do not understand the background property values "top and contain" and the reason why they are used.
@denielden
Posted
@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 helpful
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
