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

used Js, sass, css grids, flexbox

Collins 480

@emiomacollins

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


it was nice making this. I would appreciate any feedback thanks.

Community feedback

@pikapikamart

Posted

Hey, great work on this one. The layout in both desktop and mobile view is good and that custom scrollbar really suits well. Layout resizes well when going in mobile view.

My only suggestion would be that.

I think it will be better if you set the padding in the .block selector, not relative to the viewport's height. Since right now, if I inspect your layout in dev tools, since your padding is relative to the height, hence vh. It scales a lot, making your layout seems getting squished in vertical axis. It would be better that the padding are fixed paddings, using rem, px or some sort. Also to make the main selector using min-height: 100vh instead of min-height: 70vh.

Overall, your work is really good and the hovers states as well^^

0

Collins 480

@emiomacollins

Posted

@pikamart thank you, I made the changes for the section padding, I really don't know what I was thinking :) , because on landscape mode in phones the sections actually are squished cus the vh is small. thanks for the tip. Also, I purposely set the desktop hero section to be 70vh. I just personally thought it looked better.

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