Responsive landing page using CSS flexbox.

Community feedback

• 

  Nurcholis•420

  @cholis04Posted over 2 years ago

  Hi Mariano Alvarez, congrats on your work.

  It's a bit tricky to make the svg change color when hovered. I guess you can remove the img tag and replace it with the svg tag itself.

  <div class="footer__social">
  	...
  	<a href="#" class="footer__media">
  		<svg class="footer__icon" ...>
  			<path .../>
  		</svg>
  	</a>
  	...
  </div>
  

  then you can select the path in sass to change the fill color.

  footer__media:hover {
  	& > svg > path {
  		fill: hsl(176, 68%, 64%);
  		}
  	}
  }
  

  And if I may add, make sure the img tag has the alt attribute, but if the image is used for decoration, use the empty alt value <img src="..." alt="" />

  ---

  To use the <section> tag you must include the heading tag inside the <h1> - <h6>. If you want to wrap an element, use the meaningless <div> tag

  <div class="footer__container container">
  	<figure class="footer__picture">
  		<img src="./images/logo.svg" class="footer__img">
  	</figure>
  
  	<div class="footer__links">
  		<a href="#" class="footer__link">FAQs</a>
  		<a href="#" class="footer__link two">Contact Us</a>
  		<a href="#" class="footer__link">Privacy Policy</a>
  		<a href="#" class="footer__link four">Press Kit</a>
  		<a href="#" class="footer__link">Install Guide</a>
  	</div>
  </div>
  

  <div class="brands container">
  	<img src="./images/logo-google.png" class="brands__item">
  	<img src="./images/logo-ibm.png" class="brands__item">
  	<img src="./images/logo-microsoft.png" class="brands__item">
  	<img src="./images/logo-hp.png" class="brands__item">
  	<img src="./images/logo-vector-graphics.png" class="brands__item">
  </div>
  

  You can do the same with other tags.

  ---

  And lastly, I don't see the background as it is in the design, try to add it.

  Marked as helpful

  0