Stats Preview Component Solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Fala Vitório, tudo bem? Parabéns pelo desafio!

  Aqui umas dicas pra vc:

  Pra deixar o container totalmente responsivo, pode cancelar o width/min-width nesse caso seria melhor max-width: 1110px pra fazer o container ter o maximo de 1110px de largura mas tbm poder diminuir:

  .card {
      max-width: 1115px;
      /* width: 65%; */
      margin: 0 auto;
      display: flex;
      border: solid;
      border-radius: 0.4rem;
      background-color: var(--primary-clr-2);
      border: var(--primary-clr-2);
  }
  

  Pra deixar mais parecido ainda a sua imagem, ao invés de usar esse código aqui:

  .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0 0.4rem 0.4rem 0;
      filter: opacity(0.4) drop-shadow(0 0 0 #ca1df5);
  }
  

  Você pode simplesmente usar mix-blend-mode: multiply e opacity: 82% nesse caso a imagem tem que ser importada pelo html com <img>.

  img {
  mix-blend-mode: multiply;
  opacity: 82%;}
  

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0
• 

  Vitório•120

  @VitorioTuckersPosted about 2 years ago

  After submitting i noticed i forgot about the extra padding on the right side of the text

  0