@Islandstone89
Posted
Good job!
Some suggestions:
HTML:
-
The icons are decorative, meaning the alt text should be empty:
alt="". -
There should only be one
<h1>on a page. Given there are 3 similar headings, I would change all of them into a<h2>. -
Learn More" would navigate to another page, hence it is not a button but a link.
-
Wrap the footer text in a
<p>.
CSS:
-
I would recommend adding
1remofpaddingon thebody, to ensure the card container doesn't touch the edges on small screens. Then, you can remove the margin on the card container. -
To center the card horizontally and vertically, I would use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
-
Remove all heights, and all widths and max-widths in
%. -
Instead, give the card container a
max-widthof around75rem. -
I would set up the grid like this:
Default styles for mobile:
.article {
display: grid;
grid-template-columns: 1fr;
}
Which on larger screens changes to grid-template-columns: 1fr 1fr 1fr;.
Marked as helpful
