Responsible NFT Preview Card Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello there! 👋

  Here are some recommendations for improvements.

  • Wrap the Equilibrium image with an interactive element. It has interactivity so it should be wrapped by an interactive element. The interactive element can be a link or a button. (the same also for the other elements that have hover effect)
  • Anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
  • Alternative text should not be hyphenated. It should be human-readable. This text will be used by screenreaders to pronounce the image.
  • Set the font size for the site on the body element. Changing the html font size will overwrite the user's browser's font size setting. Also, use rem for font size.

  That's it! I hope this helps! 🙂

  Marked as helpful

  1
• Account deleted

  Your solution buddy looks good to me.. but I've some recommendation basically it will make your styles clean especially colors if you implement this it will make easier if there is a changes needed in the color or background-colors and you can also used this in a font-size if you want too

  // for implementing this always above the body selector 
  :root {
    --p-color:  hsl(215, 51%, 70%);
    --overlay: hsla(178, 100%, 50%, 0.4);
    --hover-effect: hsl(178, 100%, 50%);
  }
  
  body {}
  
  p {
  // this is the way how you can access the color variables
    color: var(--p-color);
  
  }
  

  Marked as helpful

  1
• 

  Didia Uchenna•400

  @D-KILLJOYPosted about 2 years ago

  This is awesome, Try wrapping the eth logo and the price in a (div) and use flexbox for it so it stays on the same line use "align-items:center" do the same thing for the time left too

  1