Responsive data analytcs card landing page (also mobile)

Community feedback

• 

  ROCKY BARUA•1,090

  @Drougnov

  Posted almost 3 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 : )

  01

  Marked as helpful
• 

  Hyron•5,870

  @hyrongennike

  Posted almost 3 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

  01

  Marked as helpful
• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 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

  02

  Marked as helpful