Responsive data analytcs card landing page (also mobile)

Community feedback

• 

  ROCKY BARUA•1,090

  @DrougnovPosted about 2 years ago

  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 : )

  Marked as helpful

  0

  ---

  

  Caio Rosa•20

  @caio-rosaPosted about 2 years ago

  @Drougnov

  Hey, thank you! i didn't know 'after' and 'before' it really helped!

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  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

  Marked as helpful

  0

  ---

  

  Caio Rosa•20

  @caio-rosaPosted about 2 years ago

  @hyrongennike

  Hi bro, thank you! I really appreciated your design idea. I did what you said and added border radius at the top of the image and removed the border radius at the bottom.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  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

  Marked as helpful

  0

  ---

  

  Caio Rosa•20

  @caio-rosaPosted about 2 years ago

  @correlucas

  Fala Lucas, tudo bem?

  Cara, eu dei uma olhada na documentação e não consegui achar exatamente uma forma de alterar a cor do filtro que aplico livremente, pude ver diversos tipos de filtro bem parecidos com o parâmetro 'filter' mas não encontrei nada sobre aplicar uma cor específica, nesse caso seria um tom roxo. Alguma dica?

  1

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @caio-rosa Acabei de olhar aqui e ficou falando a cor do fundo da div pra fazer o blend da imagem com a cor:

  .container {
      background-color: #ef61ef;
  }
  

  .img {
      mix-blend-mode: multiply;
      width: 100%;
      height: 100%;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
  }
  

  Marked as helpful

  0