NFT Preview Card Component

Community feedback

• 

  PhoenixDev22•16,830

  @PhoenixDev22

  Posted over 3 years ago

  Hello ksmacleod99 , Your solution looks nice. I have few suggestions , To tackle the accessibility issues :

  Document should have one main landmark. Wrap the body content in< main>tag read more about main landmark.

  • You need to add an interactive element around the image .

  • Images must have alt attribute .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. img src="images/icon-clock.svg">, <img src="images/icon-ethereum.svg">and <img src="images/icon-view.svg">) .

  • 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 or role presentation with empty alt.

  • You can replace the <div class="attribution">by a <footer > tag and it would be out the < main>.

  • You shouldn't wrap the <img> in <p>(<p><img src="images/icon-ethereum.svg"> 0.041 ETH</p>)

  • 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. you can add this code to center the component on the page .

  body{    
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      flex-direction: column;/*because you have two main and footer  */
  }```.
  
   I really hope  this feedback helps , happy and keep  coding
  

  01

  Marked as helpful
• 

  Francis•260

  @FrancisKhaledKhodja

  Posted over 3 years ago

  Hello. Excellent job. To improve your page and to center your card use this code (you must learn box position and the transform property)

  .card {
      border-radius: 10px;
      background-color: hsl(216, 50%, 16%);
      filter: drop-shadow(0px 5px 10px #070e18);
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  My second advice would be to use rem instead px to define the size of your font or box.

  01