Order-Summary-Solution

Replace <div class="card"> with the main tag, <h2> with <h1> and <h4> with <h2> to fix the accessibility issues. click here for more on web-accessibility and semantic html

There is no need to give the body a height value.

To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

To center .card on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

To center .card on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hi there!👋 Great job on completing this challenge! 🥳

I noticed a few areas where your solution to the challenge could be improved, and wanted to share my suggestions with you.

• Use more consistent and semantic class names: Having consistent and semantic class names, that describe their purpose makes the code easier to understand and maintain. It would be helpful to use common prefixes or suffixes for classes that relate to specific elements, like .card__image, .card__plan, .card__text, etc.

• Add alt attributes to images: Images should have an "alt" attribute that describes their contents. This will make the site more accessible and will also be useful in case the image doesn't load.

<img src="illustration-hero.svg" alt="illustrative hero for the card" class="image">

Overall, this is a very well done solution to the challenge. Great job!

Hope I'm Helpful! 👍

Keep up the good work! 😊❤️