Nft preview card using only html/css

Solution retrospective
- My second attempt -I would like to know how to add the image active state
- How to improve on the responsiveness and accessibility? -Feedback welcome
Please log in to post a comment
Log in with GitHubCommunity feedback
- @LTOssian
In order to fix your accessibility issue you should implement a level one heading element. I suggest replacing the h2 tag with an h1 (always use them in order ! then change their style in the css).
You can also improve some positionning details ; I suggest putting your class"="line" div and you class="avatar" div inside the main landmark and keep the class="attribution" div in the footer out of the card. Also make sure your main is well centered, with a fixed width and height and equally spaced on each of the 4 sides of the card. (we can see it is unequal around the image for example!)
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord