Responsive NFT card component

Hello @Anq92,

I have some suggestions regarding your solution:

• For any decorative images, each img tag should have empty alt="" *as you did**and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in( icon-view, icon-ethereum, icon-clock ).

• I would use pseudo-elements to change the teal bg color to a hsla. Then opacity can be changed from 0 to 1 on the pseudo element on hover as there is no reason to have the extra clutter in the html.

• The avatar's alt shouldn't be empty , you can use Jules Wyvern for it.

• Read more how to write an alt text

• the link should be wrapping the main image and either have Sr-only text, an aria-label or alt text that says where that link takes you.

• So you can use <ul> to wrapclass="counter" and in each <li> there would be <img > and <p>`` .

• No need for<hr>, you can use border-top to the class="author ".

• For the avatar's part , you can use <figcaption > and <figure> .

You might have a look at my solution , to see how I did the hover effect on the image , it might my helps.

Overall, your solution is good, Hopefully this feedback helps.

Hi Anna, I took some time to look at your solution and you did a great job!

There are many ways to do the hover effect on the image... how you did it is great :)

Also it would be better to use padding for the interior spaces of the elements in container class instead margin

Overall you did well :)

Hope this help and happy coding!