NFT preview card with HTML & Css

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @Valhalla-2, Congratulations on completing this challenge!

  Here’s some tips to improve your component design:

  1.I saw that you’ve used id to give the styling for your component, its not a good idea because id its a too much specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff.

  It is not advisable to use IDs as CSS selectors because if another element in the page uses the same/similar style, you would have to write the same CSS again. Even if you don't have more than one element with that style right now, it might come later.

  2.You can create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .wallet {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  kounik•300

  @Valhalla-2Posted about 2 years ago

  @correlucas thanks ,,for your feedback

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi there! 👋

  For the image hover effect, I would recommend creating it with pure CSS, pseudo-element and background properties.

  Before start creating the overlay, we need to get the HTML right first.

  • The Equilibrium image needs to be wrapped by an anchor tag. It has interactivity so it should be wrapped by interactive element.
  • The alternative text for the image should be the text content for the link. When I was doing the challenge, I set the value for the href to the image. The purpose of the link was to allow the users to preview the image. So, the alternative text is "Preview Equilibrium".

  Then for the styling,

  • Create one pseudo-element from the anchor tag.
  • Then make the pseudo-element fill the entire image.
  • After that, when the anchor tag gets hovered (a:hover::before), you can add the cyan overlay and the eye icon using background properties.
  • Lastly, for the cyan color, I recommend using the hsla color format. This way, you can reduce the alpha (opacity) of the cyan color.

  For your inspiration, you can take a look at my solution.

  Hope this helps! 🙂

  Marked as helpful

  0

  ---

  

  kounik•300

  @Valhalla-2Posted about 2 years ago

  @vanzasetia thanks i will try that ,,, your feedback was very helpful

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @Valhalla-2 Happy to hear that was helpful! 😊

  0