Design comparison
Solution retrospective
The footer links (facebook, instagram etc) could not highlight when hovering, I'm guessing because it's an image, any advice on how to highlight an image?
For the menu I wasn't sure on how to get that pointing like corner on the upper right corner, so I just settle with a regular box, any tips on how I can make that?
Community feedback
- @renrasPosted over 2 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-pathMarked as helpful0 - @besttlookkPosted over 2 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
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord