Submitted 3 months ago

Loopstudios Landing Page - HTML / SCSS / JS

BT738844• 600

@BT453567

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Loopstudios landing page

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I quite like how the VR image and overlay "The leader in interactive VR" looks and is reactive when changing window size.

What challenges did you encounter, and how did you overcome them?

Working with SCSS took some time to get used to, however I can see the benefits for larger projects.

What specific areas of your project would you like help with?

I was not sure about creating a new menu page for the mobile view, with new components, or reusing the components in the desktop.

I went with re-using the components in the desktop view, however if I wanted to animate the menu appearing I presume I would of had to create new components for the mobile menu.

Some guidance of when to reuse components or create new for the mobile menu would be useful along with any other feedback.

Community feedback

alvarozama• 360

@alvarozama

Posted 2 months ago

Very good job! I'm probably going to take inspiration from the way you handled certain things like adding the hover states for some elements. I honestly don't have a whole lot to say since I can't find any obvious flaws with either your code or tho page itself.

Regarding the whole reusing components or creating new ones, I personally went with just creating a whole different menu for desktop layout. I'm also wondering what the best approach is, but I feel like reusing components is better in terms of accessibility, since havind two menus might be confusing for people using screereaders and the like. I jus used two different menus since I found it easier and got lazy ther, hehe.

Please log in to post a comment

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