NFT preview card component

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 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!

  11

  Marked as helpful
• 

  Pradeep Saini•990

  @pradeeps4ini

  Posted about 3 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.

  13

  Marked as helpful
• 

  Juan Hamilton•470

  @hamilton-i7

  Posted about 3 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😎

  12

  Marked as helpful
• 

  faizan•2,420

  @afaiz-space

  Posted about 3 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.

  12

  Marked as helpful