Responsive landing Page

Hi Agatha, nice solution!

If you want to change the color of the svg icons on hover you should use the svg tag instead of img tag.

You can find the svg "code" if you open the .svg file in your text editor. For example the facebook icon.

HTML

Before:

<li><a href=""><img src="images/icon-facebook.svg" alt=""></a></li>

After:

<li>
  <a href="">
      <svg width="20" height="20"       
xmlns="http://www.w3.org/2000/svg"><path d="M18.896 0H1.104C.494 0 0 .494 0 1.104v17.793C0 19.506.494 20 1.104 20h9.58v-7.745H8.076V9.237h2.606V7.01c0-2.583 1.578-3.99 3.883-3.99 1.104 0 2.052.082 2.329.119v2.7h-1.598c-1.254 0-1.496.597-1.496 1.47v1.928h2.989l-.39 3.018h-2.6V20h5.098c.608 0 1.102-.494 1.102-1.104V1.104C20 .494 19.506 0 18.896 0z" fill="#2C7566" fill-rule="nonzero"/></svg>
  </a>
</li>

And then you can use css to change the fill attribute of the svg. CSS:

a:hover svg path{
  fill:red;
}

You can also use the css filter property and change the icon's brightness:

.icon:hover { filter: brightness(8); }

Or directly change the color with this set of functions:

.footer-logo { filter: brightness(0.3) sepia(1) hue-rotate(120deg) saturate(6); }

Which changes the logo's color through filter instead of setting the background color.