Huddle landing page with alternating feature blocks using HTML and CSS

Community feedback

• 

  Ibtisam Tanveer Khan•160

  @itkhanzPosted over 4 years ago

  Thanks Roman for your answer.If I understood your point correctly I guess I will have to use <svg> tag in my html instead of <img> to use this fill property? From this solution, I changed the color using filter property in my CSS for the footer logo: filter: brightness(0) invert(1); I do not understand exactly how this is working. Maybe you could comment on it?

  0

  ---

  

  Roman Filenko•3,335

  @rfilenkoPosted over 4 years ago

  @itkhanz currently you are adding logo with img tag, another way is to include it directly with svg tag (just open image with code editor and copy the code). By this you will have more control over image, inluding colors of svg shapes. More on this - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill

  0

  

  Ibtisam Tanveer Khan•160

  @itkhanzPosted over 4 years ago

  @rfilenko Yes I just wanted to avoid including svg tag, but as I have never worked with svg tag before I was a bit hesitant. I will definitely play around with svg tag in future to check the controls it offer. Thanks for your reply.

  0
• 

  Roman Filenko•3,335

  @rfilenkoPosted over 4 years ago

  Hey, you can set logo as inline svg and define fill property on path with needed color

  Roman

  0

  ---

  

  AXD•505

  @ax-dPosted over 4 years ago

  I was too late, itkhanz already gave the solution.

  0
• 

  Ibtisam Tanveer Khan•160

  @itkhanzPosted over 4 years ago

  Hi, I am facing issue related to color of Huddle svg logo. when I change the background color of my footer, the logo in footer becomes almost invisible. As in the header, it is black by default but how did you change it to another color (white) in the footer? Could you please suggest how did you implement it in your code?I would really appreciate your help. Thanks.

  0

  ---

  

  AXD•505

  @ax-dPosted over 4 years ago

  Hey itkhanz,

  What you can do is create the footer as the design. I also had a hard time to change the color of the SVG, as I didn't want to do it in the SVG itself.

  Go into you CSS and create a rule for the footer selector with the property filter: then use the property value brightness(0) to make all the elements in the footer black, followed up with the property value invert(1) which will invert the white color to black.

  I use the MDN webdocs for documentation, the one for filter is: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

  0

  

  Ibtisam Tanveer Khan•160

  @itkhanzPosted over 4 years ago

  @ax-d Thank you so much. I now understand.

  0