Landing Page using Sass, CSS Flexbox and CSS Grid

@thulanigamtee

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

@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

@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?

@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🙂

@FarisPalayi

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