Design comparison
Solution retrospective
Hello! It was fun doing this small challenge. I used svg for social media icons and did not found a viable solution to make background bigger on :hover while changing the color of the icon to white.
It surely would have been easier to use fontawesome icons but I wanted to use svg locally stored. If you have any ideas ... would be great to study this together.
Also ... I did not yet worked on JS, cause I'm yet yo learn ...
Thank you all and happy coding !
Community feedback
- @AgataLiberskaPosted over 3 years ago
Hi Daniel! Nice work on this challenge, looks really good!
As for your icons - I actually see tiny icons and text next to them which is not what shows on the screenshot above, which is strange. But - having the svg files stored locally is not a problem at all. But what I would do is set the border and background on the actual
<a>tag and change that background on hover - you'll just need to change the display from the default (which is inline) so that you can set the height of the element.I would also look at adding some padding to the input - the cursor is disappearing behind the edge of it. And most importantly - it's not good practice to remove the default outline unless you provide good focus styles to replace it - many users rely on them to navigate the page.
Hope this helps :)
Marked as helpful0 - @danielduduPosted over 3 years ago
Hi Agata! Thank you for your observation. I have modified the social media icons and now they look ok even with :hover. Also for the input, I restored the outline while eliminate border on :focus state. And of, course, some padding for the cursor.
I appreciate your help :)
0
Please log in to post a comment
Log in with GitHub
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