NFT preview card component

Community feedback

• 

  Aditya Singh•460

  @adityas24

  Posted over 3 years ago

  Hey Ayush good job.

  I saw that you are using margins to give spaces around the elements inside the card. For example in <div class="nft-img"></div> and <div class="owner"></div>.

  Do not use margins for this purpose. Use padding instead. Margins are used when we want to give space between two adjacent elements. But to give space around the element always use padding.

  All the best 🙂👍

  11

  Marked as helpful
• 

  Rio Cantre•9,650

  @RioCantre

  Posted over 3 years ago

  Hello there! Good job in this project. You did well in implementing the design and I would like to suggest the following for you...

  • Add the hover state for the fonts, for example...

  .nft-name:hover {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
  }
  
  .name:hover {
    color: hsl(178, 100%, 50%);
    cursor: pointer;
  }
  

  • Adjust the top position of the container into 50% and add a padding of padding: 0.5rem;
  • Adjust the size in the .nft-name into 22px and add a padding of padding: 0.5rem 0;
  • Change the color value in the .nft-sub-info into color: hsl(215, 51%, 70%); and add font-size: 15px; and padding: 1rem 0;
  • Change the color value of nft-price into color: hsl(178, 100%, 50%);
  • Inside the .owner p change the color with color: hsl(215, 51%, 70%);
  • Wrap the content container with main tag and attribution with footer tag for readability

  Hope this helps and Keep going!

  01

  Marked as helpful