NFT Card Component Solution

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @robinjmm,

  I have some notes for you:

  • use <a> element instead of span for .nft-card__creator-name. It's more Semantic and on click this name this may lead to another page.

  • you can just use <img> instead of .nft-card__eth::before and .nft-card__timer::before. the current way is totally right.

  • instead using both ::after and ::before pseudo elements you can use one of them as the styles below and everything will work fine:

  .nft-card__bg-layer::after {
          content: url(./images/icon-view.svg);
          position: absolute;
          background-color: rgb(0 255 247 / 45%);
          width: 100%;
          height: 100%;
          opacity: 0;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
         border-radius: 1rem;
          overflow: hidden;
          transition: .3s ease;
  	}
  

  .nft-card__bg-layer:hover::after {
          opacity: 1;
  	}
  

  • use transition property for smoother hover effect for both .nft-card__heading and .nft-card__creator-name

  • you can see My solution for this challenge it may be helpful for you..!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  Marked as helpful

  1

  ---

  

  robinjmm•390

  @robinjmmPosted over 2 years ago

  @MohamedAridah Thanks for the tips. I totally missed the name of the creator being a link. You were also right about the background layer and the view icon. I could've just combined them into one. I was too focused on implementing them I didn't care for efficiency at all.

  Thank you very much.

  0

  

  Mo•840

  @MohamedAridahPosted over 2 years ago

  @robinjmm you are welcome👍🌹. I'm glad this was helpful for you.

  0
• 

  Carlton•130

  @CarltonMpofuPosted over 2 years ago

  Looks great! Love your code, I learned a few things from it.

  1