Single Price Grid Component - Grid & CSS

Hey Dakota!

You have started well, keep it up!

There are some changes you might want to make:

Note: I only viewed this on my mobile phone, so I can't really tell how it looks on larger screens.

1. Adjust the mobile font size, it is too small for accessibility.

2. I noticed that you made use of variables to define your colors. That's awesome!

But you still went ahead to enter colors directly in some sections of your code. You can easily assign a variable to the color and that will make it easier if you wish to maintain your code.

1. I suggest you look into BEM for naming classes. This will really help you when you start using SCSS/SASS.

Happy coding!👍

Whoop, well done! You should be proud of this.

✔️ Good semantic HTML ✔️ CSS custom properties ✔️ Understandable clean CSS

To improve this I recommended

• removing the font-size 62.5%. Yes, this will may mean you need to check/adjust rem sizes through your solution (although as others have mentioned current font sizes are too small atm, so you may be fine). I'm a strong advocate for accessibility and it's a bad idea to bump default sizes down like that. The font size in the style guide is 15px I think(?) so I would set that on the body as 0.9375rem, not the root (html). That way 1rem will stay as 16px or whatever the user has set it to be, with no danger of people being unable to read the site.
• I'd also remove the large margin top on the content - again, as others have mentioned you can center the grid on the page using grid/flex
• in html you can't have a button or anchor tag inside each other. Just style the link to look like a button. Links are for navigation (which this sign up link would be) whereas buttons are for action.
• try to add the shadow on the grid if you can. Small details like that matter to designers. There are lots of shadow generators online that can help you, and usually designers use a shade of the background color for the shadow rather than default black.

Good luck ☺

Nice work Dakota. The site is responsive on most devices. I would suggest to increase the font-size - looks a bit smaller than the design.

Happy coding

Hey Dakota 👋

For desktop, view try using on the following code on a body

body { 
min-height: 100vh;
place-items: center;
}

To center cards to the middle of the screen. If you use the code above you can also remove justify-content: center;