semantic HTML, CSS

Hello,

For the background color on hover: did you try opacity? And you need to reduce the width of the image in the middle text box. It is set to 100%

Hope it helps

Hey @KristaCalleja 👋🏻

I have some quick tips on how to fix the accessibility issues and some minor design ones as well.

• In your markup <div class="card">...</div> should be <main class="card">...</main> and <div class="attribution">...</div> should be <footer class="attribution">...</footer>. These will fix most of your accessibility issues. Don't forget to generate a new repot once you fix the issues.
• For Annual Plan you used <h3> tag, however in HTML heading tags must decrease gradually, like <h1>, <h2>, <h3>, and so on. So in order to fix that issue you can swap <h3> with <h2>.
• What comes to design, I have a couple of suggestions. First, you should add these two lines of styles to the button,

.primary-btn {
   width: 80%;
   padding: 1em 0;
}

• And then you should also change the width of .options to width: 70%;, so it matches the width of the button.

I hope this was helpful 👨🏻‍💻 you did a superb job. Cheers 👾