Responsive layout, Grid, Media query

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Oi Cassia Moraes, tudo bem?

  Tenho uma dica para resolver o seu problema, com a cor na imagem.

  1.Para se aproximar do efeito de sobreposição na foto, é melhor você usar o modo mix-blend-mode. Tudo que você precisa é a div sobre a imagem com esta cor de fundo: hsl(277, 64%, 61%); e aplique mix-blend-mode: multiply; e opacity: 80%; na img ou seletor de imagem para ativar a sobreposição mesclando a imagem com a cor da div.

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

  Se você quiser ler sobre -> https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  dica do meu amigo @correlucas

  Se você quiser posicionar o footer no final da pagina, faça isso:

  .attribution {
      position: absolute;
      bottom: 1rem;
  }
  

  Para ter ele centralizado coloque ele como filho do body!

  O resto está ótimo!

  Marked as helpful

  1

  ---

  

  Cassia Moraes•130

  @cassialityPosted about 2 years ago

  @AdrianoEscarabote Oi Adriano, boa tarde, tudo certo? Fiz alguns ajustes, coloquei o mix-blend-mode porém achei que ficou muito escura a imagem, ainda assim consegui ajustar a div e o rodapé. Muito obrigada pelas dicas!! Como sempre.

  1

  

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  @cassiality Sem problemas, continue codando!!

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

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

  • The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a Paragraph Element.

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

  • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • Implement a Mobile First approach 📱 > 🖥

  With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  Marked as helpful

  0

  ---

  

  Cassia Moraes•130

  @cassialityPosted about 2 years ago

  @vcarames Hi, I corrected the font!! Thanks for the tip.

  0