Skip to content
Submitted over 1 year ago

Responsive design of landing page.

Holow•100
@HollowZll
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

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
    @elorennPosted over 1 year ago

    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
    @elorennPosted over 1 year ago

    @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
    @HollowZllPosted over 1 year ago

    Thanks Lorena, appreciate the help! @elorenn

    0

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