Skip to content
Submitted about 1 month ago

Responsive Clipboard Landing Page Challenge using HTML & CSS

neeta Purohit•160
@neetaPurohit
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I have social media icon images in my footer, and I want their color to change to hsl(171, 66%, 44%) on hover. If anyone has ideas or advice on how to implement this effect cleanly and effectively, I’d really appreciate your help.

Also, if you have any suggestions for improving my code or other tips, please feel free to share!

Thanks in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • Nathan Ray•400
    @NathanRayM

    Great Job on this landing page! To get the social icon SVG's color to change when hovering, You would need to remove the inline fill color from the SVG itself. You can then style the SVG using CSS. Remove the inline style by opening the SVG in a text editor. This will give you the HTML for the SVG like the example below.

    Example: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>

    You can see the inline fill color at the bottom of the code. Remove this and then style the SVG in CSS.

    I hope this is helpful. Happy Coding!

    Marked as helpful

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