👩‍💻 Stats preview card component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Oi Caroline! Parabéns por essa ótima solução!

  Eu acabei de olhar seu site e o código no Github, você montou a estrutura do html muito bem, achei muito legal que você usou picture, não são todos que usam essa tag picture. Apesar do container estar responsivo, a imagem não está acompanhando e esta sendo forçada a distorcer.

  Pra resolver o problema da imagem se você usar a propriedade object-fit: cover faz a imagem começar a cortar dentro da segunda coluna e se adaptar ao container, além disso você tem que colocar max-width e min-height pra mantê-la responsiva, olha o código abaixo:

  img {
      max-width: 100%;
      min-height: 100%;
      object-fit: cover;
      opacity: 0.4;
      border-radius: 8px 8px 0 0;
      background-size: cover;
  }
  

  Pra fazer o efeito de sobreposição com a cor roxa, você pode usar mix-blend-mode pra fazer o efeito igual o do desafio:

  img {
  mix-blend-mode: multiply;
  opacity: 0.8;}
  

  Parabéns e continue no foco, está tudo muito bom aqui =)

  Marked as helpful

  1

  ---

  

  Caroline Amorim•50

  @CarolAmorimPosted about 2 years ago

  @correlucas Ei Lucas, tubo bem?

  Muito obrigada pelo feedback, foi exatamente na parte que fiquei um pouco perdida e não consegui ajeitar.

  Consegui finalizar o projeto, e agora ficou como eu queria.

  1

  

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  @CarolAmorim que bom que deu certo, essa parte da imagem é chato ha de fazer mesmo, eu refiz esse projeto essa semana pra poder consertar justamente essa parte 😂

  1