Blog Preview Card with css custom properties and media queries
Solution retrospective
I downloaded the Figma files and used Figma for the first time. I didn't use Figma in my first project, but I found it very useful and will use it in all my projects from now on. Edit: I made some changes. When I first completed the project, I hadn't noticed the hover effect. First, I added that, and second, I placed the cursor from the Figma file. (Thanks to @SaruMakes for the tip.)
What challenges did you encounter, and how did you overcome them?I had the most difficulty making the cursor pointer have a black and white border. I struggled with this for a long time. It took me a considerable amount of time because I searched extensively on the internet for a solution to color the cursor pointer but found none. As a result, I ended up using an icon instead. I learned that a URL could be added to the cursor, which also took me a long time to figure out.
What specific areas of your project would you like help with?If there is a way to color the cursor, please show it to me. I would be very happy.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @SaruMakes
@tunaerten, try having a look at my solution for this challenge, if you want to see one way to do the shadow animation (FYI: as per the figma file, it also needs to be different between mobile and desktop). 🙂
As for the mouse cursor, there isn't a ton of stuff you can really do with it, to my knowledge. What you can do is, as you said, to replace the image with a different one. If you look closely, you'll find that the cursor for the design is actually hidden in the Figma file too, if you want to use the exact same cursor as the design. 😉
I hope that helps!
Marked as helpful - @RanitManik
The shadow should grow when hovered.
- Observe closely at the active states design file.
Marked as helpful - P@tunaerten
Thanks I will examine the design file in more detail
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