NFT Preview Card Component

Community feedback

• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Yanyan, I just checked you work and I would say your did it good, even you also added hover effects and all. Here are some suggestion to make your work more better.

  1. Your Etherium price and time left strings are bigger than required give your font-size 0.75rem; to make little bit smaller.

  2. After resolving above issue, you will see your icons are not aligned with your text and I found reason why you haven't set your font-size to that much, because you used the icon as a background image, It is ok that you completed this task but approach like this will not make you consistent in long run. So instead of using background-image, use img tag in your card to place those icons and with the help of flexbox, you can easily align your card.

  3. Use transform: translate(0, 25%); to make your card align to center horizontally.

  I hope you understand, above suggestions/tip might be helpful to you.

  Best Of Luck

  0
• 

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  To avoid accessibility issues in the future:

  • wrap everything in your body in <main>
  • start your headings with h1 and move up by one level each time
  • use CSS for styling

  Good job! You can adding margin on the top to move the card down or use flex:)

  0