NFT Preview Component 3rd

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Kim, congratulations for your new challenge solution!

  You've done a great work applying the hover effect! I've some tips for you!

  1. Consider applying the attribution tag out of the card container, you'll have a cleaner layout if you do it.

  2.You can get rid of the <header> tag an keep only the <h1> in this context is an unnecessary element.

  3.Card Icon Overlay: the overlay is a little bit not aligned in the right, its a matter of 2 pixels. You can try the follwing values to have it centered:

  display: flex; position: absolute; border-radius: 7px; align-items: center; justify-content: center; flex-direction: column; top: 0; left: 0; width: 100%; height: 100%; background-image: url(./images/icon-view.svg) no-repeat center; background-color: hsl(178, 100%, 50%, 0.5); opacity: 0;

  4.Hover animation: in the hover animation you can give a final touch adding animation properties like "ease / ease-in / ease-out" to have a non linear transition, try it in the image overlay for example to the result. transition: ease-in .5s;

  I hope it helps you, keep coding!

  Marked as helpful

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Kim! 👋

  Good effort on this challenge! 👍

  I have some feedback on this solution.

  • width and height attributes on the img element are used to optimize CLS (Cumulative Layout Shift) (giving placeholder before the image is fully loaded or simply prevent jumping layout). The value for those attributes should be unitless.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • The site is currently missing the interactive elements. So, I recommend wrapping all the elements that have interactivity with interactive elements such as anchor tag.

  I hope this helps. 😊

  0