NFT Preview Card Component

Community feedback

• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋🏻, in case you want to take a look:

  HTML:

  • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it). Also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

  • The icons are decorative images and therefore need an empty alt attribute to be ignored by a screen reader.

  CSS:

  • The page content could be centered using Grid or Flexbox. For example as follows:

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

  • Think about using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

  I hope it’s useful : )

  Regards,

  Marked as helpful

  1

  ---

  

  P

  Lucas Marchesoti Franco•270

  @lmarchesotiPosted over 1 year ago

  @fernandolapaz Thanks for the suggestions! I have implemented them and now it looks much better! ^^

  1