Responsive NFT card component

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  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.

  Marked as helpful

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  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!

  Marked as helpful

  0