Huddle landing page with alternating feature blocks

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hello, @zetmosoma10!

  • You can make an image a white image by just using a CSS property called filter. So firstly add the logo in the footer and then add a class name to it (I'll name it .footer_logo for this example) and then add this:

  .footer_logo {
           filter: grayscale(1) brightness(20);
  }
  

  • What the above code snippet does is that using the filter property firstly we use grayscale to convert the image to a gray image then using brightness we increase the brightness until it's white.

  Few more suggestions regarding some CSS:

  • As you can see from the screenshot and the live site the hero image stretches out it's because it has height: 100% to it so it's trying to cover all of the space inside the parent container. You can use a more general approach by using a bit of CSS for the global img tag like this:

  img {
       max-width:100%
       height: auto
  }
  

  • This way the image will only take the height it requires and not try to stretch to cover it's parent.
  • After adding this your footer_icons will stretch because they are flexed items and they will try to take the whole space left inside the flexed container,so to fix it just add align-items: baseline to the .footer__text-icon

  Apart from these few fixes, nice solution and nice animations! Nicely done!!

  Keep up the hard work and happy coding!🙌🏻

  Marked as helpful

  0

  ---

  

  Zet•800

  @zetmosoma10Posted over 1 year ago

  Hey @adityaphasu, Thanks for your contribution i really appreciate it, i just learn some new things from your inside knowledge. i will add this to the code. Thanks again.

  1