Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

clipboard-landing-page-master

Soytto 180

@Soytto

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Could be better, could be worse...

What do you think about this one and what can I do to improve my code ? I struggle with hover effect on icons in the footer tag, don't know how to do it.

Any feedback are always good !

Community feedback

@AhmadHamido

Posted

Hello Soytto, first I want to tell you that your layout looks really nice, and as for the hover effect on the icons, you can do something like this: .icon a:hover, .icon a:active { filter: invert(59%) sepia(68%) saturate(463%) hue-rotate(122deg) brightness(91%) contrast(86%); }

This should do the work, I did it like this. Worst case scenario, put "img" instead of "a". Hope this helps, and happy coding!

Marked as helpful

0

Soytto 180

@Soytto

Posted

@AhmadHamido thank you for your feedback !

wow uhhh... seems a little difficult, how did you figured out to find that ?:O

0

@AhmadHamido

Posted

@Soytto I just had to do some google research, I found something that is similar to what I am looking for, so I said let's try it, and it turned out working really fine. If you want to make sure about that, you can check my solution on my profile, and also you can check my code on my GitHub profile

0
Soytto 180

@Soytto

Posted

@AhmadHamido I did some research as well to find a slightly simpler way and this is what I found: if you directly use the <svg> instead of <img> in HTML, then you can do in css : svg:hover path { fill: hsl(171, 66%, 44%); } and instead of using "alt" you can use "title" :)

1

@AhmadHamido

Posted

@Soytto thank you for your info Soytto :D I probably used the longer way haha

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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