NFT Card Component

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great work on this challenge! You've done a great job of replicating the design and layout of the card.

  I noticed that if I shrink the viewport height enough, the card no longer fits on the page and gets partially cut off at the top.

  This is happening because you've hard-coded the height of the body to 100vh.

  To fix this issue, you can simply add min-height: 100vh to the body element:

  body {
    height: 100vh; ❌
    min-height: 100vh;
  }
  

  A very minor thing I noticed was that you wrapped the 'of' in the bottom part inside the span tag as well when it should only be the name.

  Additionally, since the creator's name is meant to be a link that takes you to the page of the creator, you should wrap the name in an anchor tag instead of a span tag:

  <a href="#">Jules Wyvern</a>
  

  The name of the NFT should also be a link:

  <h3 class="heading">
    <a href="#">Equilibrium #3429</a>
  </h3>
  

  You should also be able to hover over the NFT image to get the overlay to appear with the view icon.

  You can achieve this in a number of ways, but the best way to my knowledge that works with your HTML markup is this:

  1. Make the card responsive:

  .component {
    width: min-content; ❌
    max-width: 290px;
  }
  
  .NFT {
    height: 250px; ❌
    width: 100%
    aspect-ratio: 1/1;
  }
  

  2. Remove the whitespace underneath the image with display: block:

  img.NFT {
    display: block;
  }
  

  3. Add a div tag with the class .overlay as a child of the div.NFT element:

  <div class="NFT">
    <img class="NFT" src="images/image-equilibrium.jpg" alt="">
    <div class="overlay"></div>
  </div>
  

  4. Position this new element absolutely, and position the div.NFT element relatively:

  div.NFT {
    position: relative;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
  }
  

  5. Give this new element a width and height of 100%, an opacity of 0, and a transition:

  .overlay {
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity 100ms linear;
  }
  

  6. Add the view icon as a background image to the .overlay element:

  .overlay {
    background-image: url([insert path to view icon image file here]);
    background-repeat: no-repeat;
    background-position: center;
  }
  

  7. Change the opacity to 1 on hover or focus:

  .overlay:hover,
  .overlay:focus-visible {
    opacity: 1;
  }
  

  8. Change the cursor to a pointer when the user hovers over the div.NFT element:

  div.NFT:hover {
    cursor: pointer;
  }
  

  I apologise for the super long message. If it was difficult to digest, or if you have any problems or questions at all, please feel free to message me, and I'll do my best to help you.

  Other than that, well done once again for completing this challenge!

  Hope this has been helpful! :)

  Marked as helpful

  1

  ---

  

  Roshan•270

  @Darkx-devPosted 8 months ago

  @VenusY Thanks! for the suggestions , I'll optimize my code as you said up here 🫡,

  I actually coded this and a few more, long before (newbie stage) 😅 but unfortunately I lost my code, thankfully i saved it on my drive and retrieved it few days back

  0

  

  Venus•1,640

  @VenusYPosted 8 months ago

  @Darkx-dev No worries! I'm glad I was able to help.

  I'm sorry you had to go through that, must have been very annoying 😅. It's good you managed to recover it though!

  0