Equalizer Landing Page - HTML and CSS

Community feedback

• 

  Clara Wen•320

  @clarafuwenPosted over 2 years ago

  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!

  1

  ---

  

  Joao Antonio Mendonca•70

  @mendoncajoaoPosted over 2 years ago

  @clarafuwen

  Thank you for your feedback! I checked your live site solution and your background looks good... I will study the source to learn a bit more.

  I have used this calculator to get the filter parameters right:

  CodePen Home CSS filter generator to convert from black to target hex color

  Also, CSS tricks have a page on CSS filters that explain some tricks to change the hue colors: Ways to change svg fill colors with css filters

  If you want to get really technical and maybe even go crazy, check this discussion on stackoverflow: Crazy maths ahead: Watch out!

  1

  

  Clara Wen•320

  @clarafuwenPosted over 2 years ago

  @mendoncajoao Thank you so much for the link. For the "unmatched" background picture sizes, I've jumped into conclusion too soon...since I saw there were couple of completed projects with perfectly matched background. So must be my setup, and I'll probably try to redo the background too.

  1
• 

  Bradley Smith•230

  @bradleyhopPosted over 2 years ago

  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!

  1

  ---

  

  Joao Antonio Mendonca•70

  @mendoncajoaoPosted over 2 years ago

  @bradleyhop I am re-doing the whole thing from scratch and the mobile version, except for the background, is looking a whole lot more like the design files. Hopefully I will get a 99% match on this new version. :)

  I´ve studied some of the background positioning and sizing properties but they are still a bit of a mess. I should be uploading the new files on thursday (probably).

  I looked at your solution and it looks great. I will look at the source in more details tomorrow and see what I can learn from your background sizing and positioning.

  Thanks!

  1

  

  Bradley Smith•230

  @bradleyhopPosted over 2 years ago

  @mendoncajoao Ya, I restarted once on this project; I've seen other people say the restarted a few times. I think you're well on your way! Good luck on your second take; I'll give it peep when you're finished. --happy coding!

  1