SunnySide Responsive landing page using flex & grid

Community feedback

• 

  Ren Ras•420

  @renras

  Posted over 3 years ago

  You can put your icons in a container like a button and put a hover effect on that container instead. It's also fine if icons don't have a hover effect, most sites are like that.

  Regarding your question about the the menu, the easy way would be making a triangular div and place it above your menu. Here's a useful link: https://css-tricks.com/snippets/css/css-triangle/

  I believe you can also make use of clip-path. It's more complex than the first option but actually worth learning as it provides more flexibility and is often used in complex layouts.https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

  01

  Marked as helpful
• 

  Prabhash Ranjan•2,540

  @besttlookk

  Posted over 3 years ago

  hi, Icon given is in SVG format. If you use <img /> tag to render any type of image you can never change the color. If you want to see the change directly copy the code of the icon and paste inside the markup. Like this

  
  <svg width="20" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M20 2.172a8.192 8.192 0 01-2.357.646 4.11 4.11 0 001.805-2.27 8.22 8.22 0 01-2.606.996A4.096 4.096 0 0013.847.248c-2.65 0-4.596 2.472-3.998 5.037A11.648 11.648 0 011.392 1a4.109 4.109 0 001.27 5.478 4.086 4.086 0 01-1.858-.513c-.045 1.9 1.318 3.679 3.291 4.075a4.113 4.113 0 01-1.853.07 4.106 4.106 0 003.833 2.849A8.25 8.25 0 010 14.658a11.616 11.616 0 006.29 1.843c7.618 0 11.923-6.434 11.663-12.205A8.354 8.354 0 0020 2.172z" fill="#2C7566" fill-rule="nonzero"/></svg>
  
  

  
     svg{
       path{
         fill:red;  //using fill property of path-element you can change the color of svg
  }
  }
  

  Good Luck,

  Happy coding

  01