NFT Card Component Using HTML, CSS and SCSS

@didyouseekyng I’m afraid the html needs rewriting on this

1. Anywhere there is a hover style in the design that indicates interactivity. You have not used any interactive elements here so no interactive behaviour can happen. Once correct interactive elements are added, focus-visible styles need adding for keyboard users, and text or labels need to communicate to screenreader users what happens on click
2. Heading elements must only be used for headings. They are extremely important semantically
3. In cases where multiple headings are needed on a design (they’re not in this challenge), they must go in order and never skip levels. They are what communicates structure of the content on a webpage, like with any document
4. If images are decorative, alt needs to be blank

Good luck with it

@grace-snow I really appreciate the time you have spent reviewing my code.

• Firstly, I thought the interactivity just deals with when you hover the image and it changes the background color with the svg icon on display. You made mention of no interactive elements , please can you help me with a resource so I can perform better in that aspect.
• Speaking on your third point, from my FEM report, it was an a11y issue and I'm currently working on the restructuring of the content.
• Why does the image have to be blank if it's decorative? I thought that would be an a11y issue?
• Lastly, sometime last year, you reviewed my code which helped me in terms of class naming which led me to learn the BEM style, and with that I also stepped into Sass. I really want to thank you for your input towards my progress. I have to be more conscious of my a11y from now on.

@didyouseekyng accessibility means making content perceivable, operable, understandable and robust (POUR)

If you don't use interactive elements, this solution is not useable, for anyone but especially keyboard and screenreader users