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

Responsive design with HTML SCSS and JS

#sass/scss
Alucard 870

@Alucard2169

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had fun building this project, i wanted to do this for a really long time, cause it looked cool 😋.

I hope you like it.

feedback will be appreciated.

Community feedback

P

@christopher-adolphe

Posted

Hi @Alucard2169 👋

You did a great job on the overall for this challenge. 👍 I really like the subtle hover effect on the navigation links 👌. Here are a few things that I have noticed and that you might want to check in order to improve your solution.

  • It might be a good thing to have a skip to content link that redirects the user directly to main content is ever they are using assistive technology to visit this landing page.
  • In the vr section, the left and right paddings are not necessary for desktop as they offset the content while in the design, the content of this section is aligned with the next one.
  • In the creation section, I'm not sure if is a good option to use the images a background image as they seem to be part of the content rather than just decorative.
  • On tablet, the <header> is quite huge, maybe you should consider reducing the height and as for the main content, I think that there is ample space to display the creation section in a 2 column layout.

I hope this helps.

Keep it up.

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