Skip to content
Submitted over 3 years ago

Loopstudios landing page using SCSS and webpack [GRID + FLEX]

bem, sass/scss, webpack, accessibility
Aadvik•1,250
@Aadv1k
A solution to the Loopstudios landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Would love to get any input on the mid-section with the tricky overlay. I tried several "hacks" such as background-image, flex with relative positioning and some other solution, but I ended up just going with the position absolute.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Shashree Samuel•8,860
    @shashreesamuel

    Hey Aadv1k good job completing this y. Keep up the good work

    Your solution looks great however in comparison however I have some suggestions

    • in comparison with the design the header section of your website is a bit misaligned.

    • The section with the cars that states "The leaders in VR" needs some margin from the top. You can achieve this using the margin-top property.

    • The section with the creations needs some margin from the top in addition the imagesi itself needs to be scaled up a little bit. You can achieve this using transform: scale()

    • Your footer social icons just needs some margin from the right using the margin-right property.

    In terms of your accessibility issues simply wrap all your content between <main> tags to get rid of all the issues

    In terms of your accessibility issues, this article should help below

    https://www.geeksforgeeks.org/minification-of-css-files/

    I hope it helps

    Cheers Happy coding 👍

    Marked as helpful
  • Aadvik•1,250
    @Aadv1k

    Alright WOW there are a lot of accessibility issues with this one! don't know why it is marking minified css generated by the sass compiler as a "error", the sass compiler would have told at compile time.

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