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

Semantic HTML with SASS

#accessibility#bem#lighthouse#sass/scss
P

@daniloparrajr

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The background positions are challenging to get exactly close to the design. Hope someone can learn from my code or if anyone has suggestions please feel free to comment :)

Community feedback

@sergioreynoso

Posted

Great work!

I use this Firefox plugin to make sure everything is as close to the design as possible: https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect-pro/

It lets you use an exported png/jpg of the design and overlay it over your markup, and this way it's much easier to line things up. Good luck!

2

P

@daniloparrajr

Posted

@sergioreynoso thank you for the recommendation! I'm already using PerfectPixel addon on chrome which does the same.

1

@Eric-Ferole

Posted

Well done ! Close to perfection. nothing to say. I use Chrome dev tool to position elements that require absolute positioning.

I'll follow you. Keep up !

1

P

@daniloparrajr

Posted

@Eric-Ferole Thank you!

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