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

mobile first landing page with HTML SCSS JS and Tilt.js library

Vjekoslav 485

@Vj3ko

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


Hi, just finished this project. Had a little problem with responsiveness and finally it looks ok :) if someone can take a look and give some feedback, would be nice. cheers

Community feedback

Dusan 700

@DEmanderbag

Posted

Great work Vjekoni website is almost pixel-perfect, I have a couple of suggestions on your solution.

I've noticed that for background images you were using over and over I would suggest using the class where you would define only once background-repeat: no-repeat; background-size: cover;

Another thing is that for every background image you also create separate @media it would be much easier if all of those desktop images are under one @media query in my opinion

I'm not familiar with the tilt.js library but for the card, with the title "Soccer team VR" looks like that tilt part of the script is not working. You might want to look into that.

On mobile hamburger menu is not closing when you click any list item try using classList.toggle("show") on the link item.

Keep on coding and improving!!

0

Vjekoslav 485

@Vj3ko

Posted

@DEmanderbag tnx for feedback. I listened to your advice and made some changes. Added custom class for bg-repeat and bg-cover and also added one media query for all those images. On hamburger menu i added when the link is clicked, menu closes. Main section and creations section are now wrapped into main tag to make it clearer to see. ( this was suggested by mentor Grace ). I hope now it looks nicer and cleaner. Let me know if i can fix something else

0

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