Stats preview card using Vanilla HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Fala Gustavo, beleza?

  Para adicionar exatamente o mesmo efeito de sobreposição roxo para a imagem, combinando os arquivos de design que você pode usar, filter, background-blend-mode ou mix-blend-mode: multiply; (a melhor escolha na minha opinião). Veja o código abaixo ```

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

  Aqui a documentação explicando esse efeito mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  Marked as helpful

  0

  ---

  

  Gustavo de Assis G. Reis•90

  @gustavoagoncalvesPosted about 2 years ago

  @correlucas and @vcarames I just this code and the result was exactly what I was looking for, thanks for the tip.

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @gustavoagoncalves, some suggestions to improve you code:

  • To center you content to your page, add the following to your Body Element:

  body {
      min-height: 100vh;
      display: grid;
      place-content: center;
  }
  

  • The incorrect font-family is being used. You want to look at the “style-guide” to download the correct one.

  • The stat numbers are not headings. They should be wrapped in a Paragraph Element.

  • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • To get the image to look like the FEM example, you are going to want to use the Mix-Blend-Mode along with the Multiply Value and include a Opacity with the value of 0.8. (Courtesy of @correlucas)

  Code:

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

  Happy Coding! 👻🎃

  0