Hello!
I used a Firefox extension, 'Pixel Perfect Pro', to get the website to match the design. It's a pretty great tool that I recently discovered.
This was a simple challenge, and good for practice as well. I added a neat little 3d hover effect to the card using Javascript (props to Apple Pie Giraffe for inspiration)
Please check it out and leave your feedback!
@ApplePieGiraffe
Posted
Greetings, Syed Ali Mansoor! 👋
Amazing job on this challenge! 👏 You've done a great job in matching the design preview for this challenge (as you mentioned) and the 3D hover state that you added to the card is pretty awesome! 😀 Everything else looks good and responds well! 👍
(And thanks for the mention—that's encouraging and happy for me to hear! 😅)
Of course—keep coding (and happy coding, too)! 😁
@akshay63
Posted
Hey @Syed Ali Mansoor! Great effects, there. I loved it👌😉. Thanks for sharing your solution. I'm too learning a lot from APG. Btw how did you achieve the hover effect though?
@syedalimansoor
Posted
@akshay63 Thanks!
Check out the README file, I have added an explanation in there.
You basically add a "mousemove" event listener to the element, in which you get the position of the mouse cursor, and then you get that position as a percentage of the width/height of the element.
You use this percentage to rotate the card on the X and Y axes. In my example I wanted the card to rotate no more than 30deg on both axes, so I did this:
rotateY = xPercent * 30;
rotateX = -(yPercent * 30);
It's a bit complicated but we got this 💪😤
@coreyhclay
Posted
you've got an extra space between "12m" and "+". this solution is x1000 better than mine, i'm learning a lot from your repository, thanks
@syedalimansoor
Posted
@coreyhclay Oops, thanks for the heads up. Small details like these are key to making a good website.
Thanks for the compliment as well and happy coding!
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
