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

Responsive design of landing page.

Holow 100

@HollowZll


Design comparison


SolutionDesign

Solution retrospective


Trying to learn doing this css challenges in less than a day. As of this challenge the only thing I couldn't do as intended are the sc icons(meaning I couldn't change them with css to white from the black that were original)

Community feedback

Lorena 130

@elorenn

Posted

Try doing the following for the social icons:

/*  this will turn them white and give you the proper pointing-hand-cursor */
.icon {
    filter: brightness(5);
    cursor: pointer;
} 


/* this will turn them a bright pink on hover and when selected with keyboard */
.icon:hover, .icon:focus, .icon:active {
    filter: brightness(2) hue-rotate(55deg) saturate(6);
}

Marked as helpful

0

Lorena 130

@elorenn

Posted

@elorenn

The code in my original suggestion gives you a pink closest to the pink shown in the icons in the provided design images. However, the following code gives a pink closer to the pink you have on your button in hover state:

filter: brightness(2) hue-rotate(35deg) saturate(3);

0
Holow 100

@HollowZll

Posted

Thanks Lorena, appreciate the help! @elorenn

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