NFT-card-component using FlexBox

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @Usmaniyya,

  I have some suggestions regarding your solution:

  • To tackle the accessibility issues, you can use landmark <main> to wrap the NFT card .to wrap the attribution . HTML5 landmark elements are used to improve navigation .

  • Anything with a hover style in design means it's interactive. you need to add an interactive element<a> around the image , Equilibrium #3429 and Jules Wyvern .Add the hover effects on them.

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

  • The avatar's alt shouldn't be empty , you can use Jules Wyvern for it. and for this one img src="images/image-equilibrium.jpg" alt="avatar"> is not the right alt .

  • 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.

  • Read more how to write an alt text

  • There are so many ways to add the hover effect on the image , The one 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.

  • Never use<span>or <div> alone to wrap meaningful content . You can use <ul> to wrap the class="desc" and in each <li> `there would be <img> and <p> to wrap the text . Then you can use flexbox properties to centrally align them .

  • It's not recommended to use px for font size . Using px won't allow the user to control the font size based on their needs. You should use em and rem units.

  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.

  0