Order Summary Card

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Consider using a button instead of an anchor tag for the "change" element, as buttons are designed for actions like altering the order's plan. Anchors are typically used for linking In this instance, the action involves altering the order's plan, making a button a more fitting choice.

• For icons, you should still use the alt attribute, but it should be empty (alt=""). This indicates to screen readers and other assistive technologies that the icon is decorative and that they should skip over it

• While setting height: 100%; is a common practice and even comes by default in some CSS resets, on smaller screens like mobile devices, the content can often exceed 100% of the screen. Consider using min-height: 100vh; or a min-height with dynamic viewport units instead for this type of components.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Hello @gikdev!

Your project looks really good!

I just have one suggestion:

• You can use both background-color and background-image together on the body to create that background-pattern. They will not cancel each other.

I hope it helps!

Other than that, great job!

Hey your solution is amazing! 🤩

📌 Some accessibility and semantics recommendations for your HTML

• To improve the semantics of your HTML, you can change your <div class="card"> to a <main class="card">
• You can apply display: block to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements