Landing Page using Sass, CSS Flexbox and CSS Grid

Community feedback

• Account deleted

  If you mean the hover states of the icons, with an svg it is tricky but can be done. So for quick and perfect results I suggest using an icon library.

  And I am viewing from a mobile device atm, so I'm not sure if you strictly did one for 375px, which I advice against as any other mobile devices bigger than that can't achieve it, such as mine.

  2

  ---

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @thulanigamtee

  Thanks so much, you know I used the svg's provided

  0
• 

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  There is a bunch of ways you can do that. This is a great article from Css-tricks about how to Change Color of Svg on Hover.

  It also mentions the way you did it on this challenge😀

  0

  ---

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @FarisPalayi

  About the way I did it, it's nice but not totally genuine so I need something great. I have checked the CSS-Tricks site but I didn't see anything that satisfies me.

  I know that the filter should work but I don't know what filter I would apply to change from white to green

  0

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @FarisPalayi

  Okay, if I used the filter property, how do I filter from white to green. I don't know how to use the filter calculation tool provided by CSS-Tricks. Please a little help on how?

  1

  

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  @efecollins Hey, if you are looking for an easy to implement solution, Instead of using an <img> tag, you can import the svg markup to the html file. Here's how I do it:

  • Copy the markup(code) from the .svg file that you got when you downloaded the starter file(for example logo.svg). It will look something like this:

  <svg
       width="300" height="200"
       xmlns="http://www.w3.org/2000/svg">
      fill="#000000"
      <path> 
      /...
  </svg>
  

  • Paste it to the html file where do you want to use it. Now you can use that markup like it is an ordinary html. Like adding classes and stuff.

  • Now you can change the color of the svg using the fill property from the css file. Remember: if you want to change the fill property of a path, you should change the color of that path itself, not the svg.

  • and also change the fill color on the :hover state.

  Learning about svg is another topic, if you want to learn more about what's fill, viewport and stuff like that, simply search "svg tutorial".

  And, when using filters manually, it can be a bit hard to find the right color, so learn more about filters if you want to use it. Here's a quick guide from w3schools

  If you didn't understand anything that I wrote here, feel free to say so🙂

  1

  

  Efosa Collins EVBOWE•365

  @efecollinsPosted over 3 years ago

  @FarisPalayi

  I'm so grateful, I understand all you said. Thanks for your unfailing response. More strength and codes to write.

  1