NFT preview card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Greetings, Diego! 👋

  Congratulations on completing this challenge! Your solution looks similar compared to the design and you have done a great job of wrapping all the page content with landmark elements!

  There are some areas that can be done better.

  • Firstly, use interactive elements for any elements that have :hover or :active states. In this case, the equilibrium image needs to be wrapped with an anchor tag.
  • Then, I would recommend using pure CSS to create the overlay and showing the eye icon. You could use pseudo-element and background properties. That way, the HTML code will look cleaner.
  • Last thing, create the horizontal line with CSS border property instead of using hr element. hr element has meaning and would be read out by the screen reader. hr element has a role as a separator. In this case, the content below the line should not be separated.

  Overall, nice work. It's great that you wrap all the elements with landmark elements. I think if you implement all the things that I have mentioned, it would make your solution more accessible.

  I hope this information is useful! Happy coding! 😄

  Marked as helpful

  2
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Diego, I took some time to look at your solution and you did a great job!

  Also I have some tips for improving your code:

  • remove all margin from main tag
  • try to use flexbox to the body for center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • try to add a little transition on the element with hover effect
  • use p element and not h2 for the normal text

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  1
• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi Diego, it looks pretty good.

  I would like to see it with

  transition: opacity 1s; cursor: pointer;

  on "nft-image-active" class

  Anyway your challenge is simple and beautiful ! Keep coding !

  1