A few more pointers
- make sure the card can't touch screen edges. Just give the body a little padding (e.g. 15px)
- This challenge is for a single card. We build component demos like this but it's not a full web page so you need to consider the context of the component (make it so it could be dropped into a real page). It's great that you used a h2 because this card would never serve the main page heading. BUT you have currently made the whole card into a
main
landmark and that's bad because you would never nest landmarks inside each other like that. This card needs to be an element inside the main landmark, not be the main landmark. - Remove the fixed position footer as it's overlapping the card sometimes. There's no reason to position it, just let it sit below the card.
- Don't forget about the small details like the paragraph colour.
- Place the reset at the start of the styles instead of loading a whole extra stylesheet.
Marked as helpful