Skip to content
Submitted over 3 years ago

Responsive Landing Page with Flexbox and Sass

sass/scss
Mark Cates•110
@mscates
A solution to the Equalizer landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I started out using css grid for the middle section, but I couldn't quite get it to work. I finally used relative and absolute positioning with percentage values for the widths and the responsiveness was much easier . I am sure grid probably can do this easier, but I am not experienced enough yet to understand it. I used background position for the color dots backgrounds, but couldn't get it quite in the correct spot. not sure what the trick is there. I loved this exercise though. It was so much fun.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi

    Here's a few improvement suggestions

    • the logo is the most important content on the whole page and youve currently hidden it from search engines and screenreaders. That alt cannot be left empty
    • the app image is arguably really important content too, but the image description is empty
    • could some other images in this be background images perhaps? Just an idea
    • the email address in the footer needs to be a mail to link
    • the social media icons are never just icons, you'd expect to click them, right? So they need to be interactive elements (anchor tags) that also have a label available to the accessibility api (eg. Sr only text)

    Good luck with it

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