NFT Card Preview

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @archie-k,

  I have some suggestions regarding your solution:

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image Equilibrium #3429 and Jules Wyvern(in this challenge is an anchor tag <a>)

  • Images must have alternate text.

  • The images don't need filled alt . They are decorative images, so alt attribute should be left intentionally blank. You can optionally add aria-hidden or role presentation to ensure the images are always ignored by screen readers ANDavatar's one and image-equilibrium.jpgshould be empty and should be descriptive . Read more about decorative and informative images .

  • You can simply use unordered list <ul> to wrap class="nft-price-time"’and in each list item would have <img > and <p> `.

  • You shouldn't have used <hr>you can use border-top property for the <div class="creator">

  • You can use more html semantic tags like <figure><figcaption > for the avatar part.

  • Use max-width: instead width .

  • You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design. Using px won't allow the user to control the font size based on their needs.

  • Add the hover effect on the image . (The eye image is missing)

  Hopefully this feedback helps.

  Marked as helpful

  1