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

Building a Blog Preview Card with HTML and CSS

@KS-Coder24

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

P
Steven Stroud 4,080

@Stroudy

Posted

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;
0
Affan Amer 370

@AffanRM

Posted

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!

0

@KS-Coder24

Posted

@AffanRM , Thank you very much. I'll try that. Much Appreciated.

0

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