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

Not a perfect solution

#progressive-enhancement
GIGACHAD 230

@Khalid-debugg


Design comparison


SolutionDesign

Solution retrospective


the social media icons weren't included so I downloaded them but I can only change border color while hovering.

Community feedback

@madkn1311

Posted

Hello Gigachad,

Great job on the design...!!!

You can use the icons from font-awesome. All you have to do is include the font-awesome cdn to access the icons and then you can customise them however you like.

All the best for the next challenge. 😊

Marked as helpful

2
Lucas 👾 104,580

@correlucas

Posted

👾Hello Giga, congratulations for your new amazing solution!👾

🍚I liked a lots the work you've done here, specially because you've add a border-radius that makes the instagram icon seems a pokeball! ❤️Just kidding bro we'll solve it together! 🐱 (this is pikachu)

💘Your solution is amazing anyway, is full responsive and all the elements are matching the reference, there's only a small issue with the background-image for mobile after 800px, this is due background-size: auto; replace it with background-size: contain;

........................................................................................................................

About the icons, I had the same issue you had, I choose to fix my solution downloading my own icons like you did and covert them into path to apply the proper hover effect.

💩Is really sh1t that you cannot fill them with the color you want without having to select each svg path, this behavior that change the color only for the borders is a sh1t. But we'll fix it!💩

But you're like me so we can break the rules, you can fix this giving the hover import background-image with the icon colored with other color, use filter to change its color, or convert it into a single svg path to manage all paths in a single line of code.

........................................................................................................................

🤯Here's the tutorial I've used to do the conversion:🤯

https://stackoverflow.com/questions/11529470/is-there-a-tool-to-create-svg-paths-from-an-svg-file

https://css-tricks.com/change-color-of-svg-on-hover

👾 Here's my solution if you want to see the paths already converted and the hover applied:

https://www.frontendmentor.io/solutions/huddle-lp-section-vanilla-css-logo-animation-easter-egg-bem-meb3nl6zF8

Keep it up bro!

Marked as helpful

1

GIGACHAD 230

@Khalid-debugg

Posted

@correlucas Insane support as always, thank you <3

1

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