Submitted almost 3 years ago

Equalizer landing page

accessibility, bem, lighthouse, semantic-ui

Jax Teller•670

@piushbhandari

A solution to the Equalizer landing page challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾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

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