Hello
Definitely change these to h2s. In this case you are doing a single component challenge, not a full Web page, so it's fine to have no h1 on the page if you want. If this component was on a real full Web page there would need to be a h1 higher up on the page.
Learn more would almost certainly navigate not perform an action like open a modal or toggle content. So use anchor tags
Don't use huge paddings to create your layout
Remove width from the cards. All this component needs is a max width. The cards currently overflow the sides of my mobile screen because you have given them an explicit width, meaning they can't shrink if they need to.
Other than these small things, all looks great to me
One minor suggestion - line height is usually unitless. Nothing wrong with using rem, it's just become a convention to write a unitless value like 1.5. Your choice though, no harm that I know of.
@albina0104
Posted
@grace-snow Hello, thank you!
- Changed headings to <h2>.
- Changed buttons to links. But I wonder, why do we care about tags, but not about visual style? Why do links can look like buttons? By the way, in the "style-guide.md" document in the colors description it says "buttons":
Very light gray (background, headings, buttons): hsl(0, 0%, 95%). - In a jpg design file of a mobile version, there were empty spaces on the top and the bottom with 88px height, so I repeated that. Now removed.
- Changed to max-width, thanks!
- I used unitless values for line-height in previous challenges. But in this one, I measured all values in pixels with a screen ruler, including line height, and I thought the easiest way would be to convert it to rem, rather than guess the unitless line height.
