NFT preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾 Fala Mateus Moura, beleza?

  De novo outra análise do seu código, essa solução tá certinha, inclusive responsiva. As únicas coisas que faltam ajustar é a sombra que tá muito forte e o efeito hover que está sem solução e não tá tão suave.

  Adicionar transição:

     .link-image:hover::after {
       transition: all ease 0.3s
      }
  
     .link-image:after {
       transition: all ease 0.3s
      }
  
  h1 a:hover, section a:hover {
      color: hsl(178, 100%, 50%);
      transition: 500ms;
  }
  

  O valor correto para a sombra:

  box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 14%);

  Usa esse site aqui pra criar as box-shadow e só jogar código no css: https://www.cssmatic.com/box-shadow

  Espero ter ajudado, pra cima ein!

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @correlucas thank you very much again

  0
• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hey, Mateus. How are you, dude?

  Congrats on completing the project.

  I would like to give some suggestions.

  1. Learn about CSS custom properties (variables). They help in make the code reusable and modifiable without changing the same value repeatedly.

  2. You are using "display: flex;" on multiple elements. You can create an utility class, ".flex {display:flex;}". And use it on the elements where you want to use flexbox. This way you won't have to write same property multiple times.

  3. You don't need to provide alt text for decorative images. For example clock and icon-ethereum image. Give a descriptive alt for images that convey some meaning. Clock and icon-ethereum don't convey any meaning here. They are for decorative purpose only.

  4. Try to limit use of id's in CSS. They have high specificity and can cause cascade and specificity issues. Try to use classes and element selectors.

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  Hi @pradeeps4ini

  Thank you very much, I had forgotten that I could put a class utility for multiple tags where it uses the same styles.

  About the alt text of images, I'm not very creative with names or descriptions, but I'll see what I can do.

  Thanks for the id tip too, I'll update my project using the tips you and other people gave me.

  0

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @pradeeps4ini

  Okay, I updated my code with the tips you gave me, I hope it's good now.

  1

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  @Theuz1nh0 You're welcome, dude! We're all helping each other learning here. Your updated code looks better.

  1
• 

  Juan Hamilton•470

  @hamilton-i7Posted over 2 years ago

  Hi there, Mateus!👋

  You did a very good job on this challenge👏 Great use of flexbox to center the card throughout different screen sizes👍

  There's just a couple of things I'd suggest:

  1. Try to use relative units such as rem or em whenever possible. For instance, you may also use it on padding and margin. That way, you ensure your website will scale properly if the root font size changes
  2. You could use a combination of max-width and width instead of just width to make sure the card is able to scale down better on the really small screen sizes, like below:

  main {
    max-width: 21.875rem;
    width: 100%;
  }
  

  Hope you find this helpful! Happy coding😎

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  Hi @hamilton-i7

  • thanks, i thought these measurements were better just in font size, but now you showed me that i can use in other things, thank you very much.

  1

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @hamilton-i7

  did what you said, thank you very much for the feedback.

  1
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @Theuz1nh0,

  <div id="informations">
      <div>    >--- **add div element**
        <img src="./images/icon-ethereum.svg" alt="icon ethereum"><span id="icon-ethereum"> 0.041 ETH</span>
      </div>
      
       <div>      >------ **add div element**       
        <img src="./images/icon-clock.svg" alt="icon clock"><span id="icon-clock"> 3 days left</span>
      </div>
  </div>
  
  

  • after add div element then add justify-content: space-between; in #informations id.
  • remove margin-right: 37%; from icon-ethereum id.

  Marked as helpful

  1

  ---

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  HI @afaiz-space

  • thanks, I couldn't think of an easy way to do this, I'll do what you said.

  0

  

  Mateus Moura Domingos•140

  @Theuz1nh0Posted over 2 years ago

  @afaiz-space

  did what you said, thank you very much for the feedback.

  0