adicionar esse filtro roxo na img foi bem dificil, e nao ficou 100%!

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Oi Mateus, tudo bem? Parabéns pelo desafio! Seja bem vindo a comunidade do Frontend Mentor

  Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:

  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

  👋 Espero que essas dicas te ajudem e que você continue no foco!

  1
• 

  Adriano•39,350

  @AdrianoEscarabotePosted about 2 years ago

  Hi Mateus Duarte, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  • every Html document must contain the main tag, so we can identify the main content, to fix this, wrap all the content with the main tag. HTML5 landmark elements are used to improve the navigation experience on your site for users of assistive technology.
  • images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.
  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  The rest is great!

  I hope it helps... 👍

  0