Frontend Mentor | NFT preview card component

Community feedback

• 

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezR

  Posted over 3 years ago

  Nice job!! I have a few suggestions:

  1. You could get rid of the height: min-content on the .card-container, it has no use in this situation.
  2. Instead of using the <figure> tag, you could use a <header> or a <div>, it works the same and they have less (or none) default styles.
  3. If you want to have no extra markup, you could use ::before or ::after for the overlay layer on the images, apply this style on the card_image_container and in the content property put the url() to the svg file, and set position: relative on card_image_container and position: absolute on the ::before or ::after element and work you way.
  4. If you want to get rid of the space at the bottom of images, use display: block on the images
  5. To avoid extra markup you could use ::before for the svg icon, on the .nft-cost and .nft-timer, and the content property has the url to their respected icon.
  6. You could workaround of the hrs height by giving just the bottom border a 1px thick border-width: 0 0 1px 0;, this way you don't have to set the 0.5px

  00