Equalizer landing page (for now desktop version only -- no frameworks)
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?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
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
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