Skip to content
Submitted over 3 years ago

Equalizer landing page using CSS Grid and Media Queries

DSoluk•120
@dsoluk
A solution to the Equalizer landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi all; I was unable to figure out how to isolate the social media link icons for the hover part of the challenge, so any hints would be appreciated!!

I found that I had to do lots of re-work on this as I went from mobile first to desktop then tablet and uncovering better and more detailed methods (I'm a newbie). So many aspects to think of when going through all the elements. Thoughts?

Thanks!!

Code

Please log in to post a comment

Log in

Community feedback

  • Bradley Smith•230
    @bradleyhop

    Since the social media icons are SVG format, I had trouble, too. I found this stackoverflow question: look at the pure CSS answer using the CSS "filter". There's even a link below that answer to help generate the color options you need using the CSS filter method.

    https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css

    Also, consider wrapping your buttons and social media icons in anchor tags so that the pointer cursor appears when hovering per the design spec.

    General consensus on people that have completed this challenge is that this project is probably not actually a newbie level even though it's just HTML and CSS. Arranging responsively four different sections in the body is like whoa. Good job pushing through and completing it!

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