NFT Preview Card Component Responsive

Community feedback

• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @peterramirez18,

  I have some suggestions regarding your solution:

  • By using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So wrap the content of the body (card) in <main> , a < footer > for the attribution.

  • Anything with a hover style in the design means it's interactive . You need to add an interactive element around the image(in this challenge , you can use an anchor tag <a>).

  • 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 not be empty and should be descriptive . Read more about decorative and informative images .

  • Page should contain a level-one heading <h1> .

  • The eye image doesn't really need to be in the html, you could do it with css..

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

  • You shouldn't have used <div class="line">, you can use border-top property for the class="avatarinfo".

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

  Hopefully this helps.

  Marked as helpful

  1

  ---

  

  P

  Peter Ramirez•370

  @peterramirez18Posted almost 3 years ago

  @PhoenixDev22 Thansk so much for you time and suggestions, check now!

  1