Responsive data analytcs card landing page (also mobile)

Hi @caio-rosa, good job on the challenge.

To achieve the purple filter on the image, you can use pseudo-code(after or before) on the container. At first use position relative to the container.:

.container {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

And add after to the container like this:

.container::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: hsla(277, 64%, 40%, 0.6);
  top: 0;
  left: 0;
}

this should do the trick.

You might wanna work on the accessibility and responsiveness(mobile devices). For further help feel free to comment or view my solution

Anyway, keep up the good work and have a good day : )

HI @caio-rosa,

** Nice job on the challgenge** Just a few things on mobile remove the display:none on the image on mobile and add the following:

.mainBox {
    flex-direction: column-reverse;
    margin-top: 5rem;
}

this is stack the image on top of the text and the below will the stack the stats.

.stats {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

Hope this is helpful

Oi Caio, respondendo sua pergunta:

O jeito de fazer o efeito de sobreposição é feito de dois modos, ou 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

Depois me fala se funcionou