Order summary component

Hi Adan, your component look super nice 🤩 I'm not a pro, but I have two suggestions for you :

• Instead of < article class="main-container"> you can just use <main>. It will also correct your accessibility issue.

• Keep the alt text on your images, but let them empty as they are just decorative. Alt text is here to be helpful with accessibility and give a nice image's description. For example : <img src="./images/pattern-background-desktop.svg" alt="bg" />, here "bg" don't give any useful information, you can let the alt empty then.

Hope it can help you. Have a nice day ☺️

Hello there, Adan! 👋

I recommend making the pattern-background as a background image of the body element instead of an actual img element.

In addition to @CarolineLienard feedback about the alternative text for an image, it should not be hyphenated (like code) and it should not contain any words that are related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element. 🙂

<h1 class="plan-item">Annual Plan</h1> should be a h2 instead.

change-item and cancel-item should be interactive elements instead of paragraph elements. It has interactivity so it should be an interactive element.

Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.

By default, the font size is 16px so you don't need to specify it.

To make the card perfectly in the middle of the page, you can make the body element as a flexbox container and then remove any absolute positioning. Currently, on mobile view, the page has a horizontal scrollbar.

Hope this helps.