Single price grid component

👋 Hi Ed!

🎉 Congratulations on finishing this challenge! It's great to know that you are learning something new when doing this challenge!

Feedback:

• Accessibility
  • There's no need for header in this case since inside the header inside the main element has no meaning ( I guess, after trying screen reader on your solution ).
  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
  • The Sign Up button should not be a submit button. It should be an anchor tag (link). Submit button is commonly used inside a form element. In this case, there's no data that can be submitted.
  • The Sign Up button should also have cursor: pointer and hover effect to make everyone know that it is clickable.
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Every page should only contain one h1. I would recommend lowering the level of the other heading to h2.
  • The 30-day, hassle-free... and $29... text should not be a heading, it should be a paragraph with strong or em tag.

<p>
  <strong>30-day, hassle-free money back guarantee</strong>
</p>

• Visual
  • The monthly subscription section should have lighter background to match the design.
  • The Join our... text should be bigger.
• Best Practice
  • You don't need type attribute on the stylesheet link.

<link rel="stylesheet" href="style.css" media="all" />

That's it! Hopefully, this is helpful!

Nice Job!