Blog Preview Card with css custom properties and media queries
Design comparison
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.
Community feedback
- @SaruMakesPosted 5 months ago
@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 helpful0@tunaertenPosted 5 months ago@SaruMakes I didn't realize that shadow was an animation. I will review and fix my code again. Additionally, I will thoroughly re-examine the Figma file for the cursor. (I haven't fully understood how to use Figma yet, but I'm working on it.) I really liked your HTML. You have used semantic elements nicely. I think you could gather all the media queries in one place. Of course, I don't know if you have another purpose.
1@SaruMakesPosted 5 months ago@tunaerten Thank you for your critique as well! I had already considered that I should gather the media queries as you say. So far, its been helpful for me to have it split up that way, as I work my way through the sections and add the media queries, but I think I need to find a different workflow for it regardless. 😅 I'm very much also wanting to get better at writing DRY code, so I don't repeat myself more than I have to.
You can find the hand cursor in the Desktop - Active frame in the Figma file. It'll be under Frame 3 > Content > Handcursor. You can then export it as a .png or .svg to use on your site (just don't re-use it elsewhere).
0 - @RanitManikPosted 5 months ago
The shadow should grow when hovered.
- Observe closely at the active states design file.
Marked as helpful0
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