Responsive huddle landing page with curved sections

Community feedback

• 

  P

  Vander Santos•1,750

  @vandermsPosted over 2 years ago

  Hi there! Nice job!

  About the color of the social media icons in the footer, you can set it to white by:

  • setting the property fill, of the path tag, in the icon file, to white;

  • adding the property filter: brightness(0) invert(100%) on the img tag;

  • replacing the img tag for a div, with the following properties: background-color white, mask-image: url(path_to_the_icon); width: width_of_the_icon; height: height_of_the_icon; mask-repeat: no_repeat; mask_size: contain; mask-position: center. This solution is a bit tricky and you will need an autoprefixer since the mask properties don't work on chrome without the webkit prefix, but it can be quite usefull when you need to use hover effects;

  • and using an icon library like font-awesome. For social media icons, that's the easiest and, in my opinion, the best way.

  Marked as helpful

  1

  ---

  

  Adriano•38,250

  @AdrianoEscarabotePosted over 2 years ago

  @vanderms Thanks for the tip, I was wondering how I was going to change the image color directly in the css which was something I had never done before.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Oi Adriano, parabéns pelo desafio, cada vez fazendo mais landing pages complexas, mandou bem!

  Eu vi aqui seu live site e tá tudo bem feito, bem legal essa coisa dos elementos com a ondinha, eu não faço ideia de como sejam feitos esses tipo curvas.

  Se você quiser dar uma melhorada, cria uma classe com o max-width: 1110px e coloca nas sections pra segurar o conteudo uniformemente e quando for aplicar a lista de redes sociais uma a lista organizada pra listá-los com a tag <ul><li><a> </a></li></ul> que seria o jeito mais semântico e linkável pra aqueles elementos.

  De resto tá tudo bem legal, na real você foi bem mais longe que eu no nível de complexidade de projetos, parabéns!

  Marked as helpful

  0

  ---

  

  Adriano•38,250

  @AdrianoEscarabotePosted over 2 years ago

  @correlucas Muito obrigado pelas dicas. As ondinhas são imagens de fundo que coloquei dentro de uma div pai, e com o background-color eu coloquei a mesma cor que a imagem dentro da div filha na qual foi colocado o conteúdo. Os seus projetos são incríveis sempre muito criativo, o do Will Smith é muito bom huauhau.

  1