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.
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