@Islandstone89
Posted
HTML:
-
The image and icon are both decorative, meaning their alt text should be empty:
alt="". -
I would change "Order Summary" to a
<h1>, and "Annual Plan" and the price to<p>. -
.attributionshould be a<footer>, and its text must be wrapped in a<p>.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>of the HTML than using@import. -
It's good practice to include a CSS Reset at the top.
-
Remove
align-content, you only needalign-items. -
On the
body, remove the margin. Instead, add a bit ofpadding, so the card doesn't touch the edges on smaller screens. Remove thewidth- thebodyis a block element, meaning it is 100% wide by default. Changeheighttomin-height- this way, the content will not get cut off if it grows beneath the viewport. -
On the card, remove
align-self,widthandmargin. Also, max-width should be in rem - around20remworks fine I think. NB: When you need horizontal margin, you can usemargin-inline. -
font-sizemust never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
line-heightmust also never be inpx.
Marked as helpful
