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

Equalizer landing page

P
Jax Tellerโ€ข 670

@piushbhandari

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


How did you guys do the middle section with the phone and textbox? i feel like i took a super convoluted approach lol i.e used flex in desktop with some margins, then i set the phone img to absolute positioning in medium sized screens, and then finally removed the absolute positioning and did flex-direction: column on mobile.

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Jax, congratulations for your new awesome solution!

I liked a lots the custom features you've added here, like the intro animations, this is really great.

To manage the section with the phone and text box, I've used z-index and transform: translateX() to manage the distance between these two elements and some media query to keep the spaces.

.card {
    z-index: 0;
    transform: translate(-74px, 120px);
}

If you want to see my solution, here is the link: https://www.frontendmentor.io/solutions/equalizer-landing-page-pure-css-and-custom-hover-states-app-section-8AyB3NZFzj

Congrats this solution is just great.

Marked as helpful

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