Skip to content
Submitted 11 months ago

Building a Blog Preview Card with HTML and CSS

KS-Coder24•50
@KS-Coder24
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I was able to complete the challenge, and learnt how to get icon from an online source, and credit the site.

What challenges did you encounter, and how did you overcome them?

I encountered some challenges while trying to implement the black hand cursor hover effect (note that I downloaded a black hand icon from Flaticon website). Despite several attempts to resolve the issue, I was unable to determine the cause. I plan to revisit and troubleshoot the problem when I have the opportunity.

As a result, I was unable to complete the challenge, specifically the part involving displaying a black cursor when hovering over elements that require interaction.

What specific areas of your project would you like help with?

I would appreciate if someone could review my code and point out a fix for the issued I had with displaying my downloaded cursor icon as hover effect.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Steven Stroud•11,910
    @Stroudy

    Great solution, I think i found the issue looking at your code,

        color: var(--gray-800);
    cursor: url(up-sign.png), pointer;
  }

 cursor: url(assets/images/up-sign.png), pointer; 

You got to tell the command what folders to get the image from. Let me know if this work.

You could try this aswell 
cursor: url(assets/images/up-sign.png) 4 12,
  auto;
  • Affan Amer•350
    @AffanRM

    Hey, your downloaded cursor image size is 512x512 pixels and most browsers have restrictions on the image size (should be less than or equal to 128x128 pixels). I tried downloading a 24x24 cursor image and then set it as the following and it works: {cursor: url('<image_path>'), auto;

    If you need any further assistance, let me know!

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