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 (for now desktop version only -- no frameworks)

Abilio de Assisβ€’ 40

@abilioassis

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


I invested a lot of time in solving this challenge.

And the presented solution is the desktop version only.

My knowledge of image manipulation and absolute positioning was very poor. I learned a lot from this challenge.

My doubts are:

  • I converted the .svg images to .png. Is there a problem with that?
  • I've used and abused relative/absolute positioning. I couldn't fit the images into the normal flow of the page. I took the coordinates from the Figma file and positioned the images in the code using x/y coordinates. This is causing me problems when making the mobile version. Any suggestions on how I could make this positioning of the images better?

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hello, Abilio de Assis! πŸ‘‹

Nice effort on this challenge! πŸ‘

Your site currently isn't responsive. The desktop view of the site is usable, but I'm afraid the layout is quite broken in the mobile/tablet views. I would suggest choosing a simpler challenge and focusing on learning responsive design before tackling a larger challenge such as this. Here's a great resource from web.dev to help you get started with responsive web design.

As for positioning those tricky elements that overflow their containers, it's important to make sure to understand absolute positioning and the concept of the offset parent (the element that an absolutely positioned element is positioned relative to) well before attempting to tackle a layout like this. You may have to use media queries to make several adjustments to the layout to ensure that it looks good on all screen sizes. πŸ˜‰

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

0

Abilio de Assisβ€’ 40

@abilioassis

Posted

Thank you @ApplePieGiraffe for your feedback.

I was feeling stuck with this challenge and decided to publish the solution that I managed to do (even without responsiveness).

I needed to receive some help to be able to continue.

Now I will work on the mobile version.

The link you provided will be of great help.

1

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