Single price grid component using CSS Grid

Hi, Monica! 👋

The card is filling the entire of my screen. Are you doing it on purpose?

Some feedback from me:

• Accessibility
  • Don't use header for the card content since it is not a full webpage. This is one chunk of content that all belong together and in a real website would sit with other content.
  • I would recommend using the dollar sign ($) directly instead of using &dollar. The UTF-8 charset supports all symbols including emoji.
  • About the Why Us section, use ul and wrap each text with li instead of using p elements.
  • 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 (by using Tab key) easily.
• Styling
  • Make the website looks closer to the design by decreasing the size of the card.
  • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead.

That's it! I hope my feedback helps!

Congratulation to complete the challenge ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

transform : scale(0.8); this property decrease the size of card. 😉

large size for increase the number of scale & small size for decrease the number of scale

And in image card design give the opacity less number like :- opacity : 0.5, 0.8.

I hope you find this helpful

Hay ! Monica Good Job on challenge