This is a solution to the Equalizer landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Frontend Mentor - Equalizer landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
  • Author

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

• Solution URL: Frontend Mentor solution
• Live Site URL: Github Pages

• Semantic HTML5 markup
• SCSS custom properties
• Flexbox
• SCSS mixins
• Mobile-first workflow
• SCSS - CSS preprocessor

In this project, the correct positioning of background images and correctly aligning the absolute elements were the hardest things for me, but I think that in the end - I managed to do it right. I'm longing for doing some logic with JS, I had a bit too much CSS i guess. Or maybe I should finally try Tailwind.

  background-image: url('../assets/bg-main-mobile.png');
  background-repeat: no-repeat;
  background-position: top -225px right -225px;

  @media screen and (min-width: 650px) {
    background-image: url('../assets/bg-main-tablet.png');
    background-position: top -350px right -225px;
  }

  @media screen and (min-width: 1050px) {
    background-image: url('../assets/bg-main-desktop.png');
  }

• Github - Łukasz Lubaszewski
• Frontend Mentor - @luckyszakul0