Solution to NFT Preview Card Component Challenge

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello @Arekkusu17 ,

  I have some suggestions regarding your solution:

  • Using landmark elements , you can improve the navigation experience on your site for users of assistive technology . So use a <footer >(for the attribution)

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

  • 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 .Read about how and when to write image alt text and what it's for.

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

  • The eye image doesn't really need to be in the html, you could do it with css. If you want it to stay in html it needs to be aria-hidden .

  • You can simply use unordered list <ul> to wrap .information and in each list item <li>would have <img > and <p> for the text .And for each <li> , you can give :

      display: flex;
      align-items: center; /* align them on the center */
      justify-content: flex-start;
  
  

  Then a little margin to the img or the p .(no need for <h2>)

  • you can add this to fix the the little quirk of the overlay

  .nft-image {
     border-radius: 0.9rem;
     /* max-width: 19rem; */
     width: 100%;
     **display: block;**
  

  Also

  .creator img {
      width: 2rem;
  }
  
  

  • Use flexbox properties to center the card on the middle of the page to the element that holds the card and min-height: 100vh; .

  {
  display: flex;
  align-items: center;
  justify-content : center ;
   flex-direction: column;
  min-height: 100vh
  }
  

  Hopefully this feedback helps.

  00

  Marked as helpful