Equalizer Landing Page - HTML and CSS

Hey! Just wanted to thank you because I had trouble finding the correct configurations of CSS filter to change the social icon color on hover. Then I saw your code and it solved everything. But I still don't know how it actually works. Do you mind share some resources on how to set CSS filter to a target hue?

For the background, I treated those background/pattern images just as regular images and positioned them according to the X, Y coordinates that Figma provides and let the screen decide how/when to render them. It worked well overall. I had the same feeling that image sizes are not matched as when looked closely, all the background patterns are more compressed than the original. Just some thought. I probably will try to set background images as background and see how it goes. Hope you get a 100% match on your redo!

I think this is a difficult challenge with the backgrounds being one of the more irritating aspects to it haha. The image sizes supplied with this challenge don't match the design, so that makes it even harder. Anyway, look into the CSS property background-position and set the image to those provided using media-queries to link in the correct image for the device side. Don't forget to set the background-color on the same element as the background image (the image has transparency). See for more info:

https://www.w3schools.com/cssref/pr_background-position.asp

It also looks like the font for the buttons are incorrect. There seems to be some horizontal overflow, too.

It looks great overall. Elements respond to device size, positioning is good, etc. Happy coding!