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

Scoot multi-page | HTML SCSS and JS

Connor Zβ€’ 5,115

@zuolizhu

Desktop design screenshot for the Scoot multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedbacks are super welcome!

I really love the nice and clean design of this challenging!

However, as an OCD developer, the design on the wide screen makes me crazy (when the screen width is over 1440px). I’m trying to keep things staying in the middle, so the icons, texts won’t falls apart. But those lines and arrows will be too far from their content. Any suggestions on that would be appreciated!

Thanks!

Community feedback

Diarrahβ€’ 3,418

@Diarrah

Posted

In all my projects I make the max-width 1900px & then just center the total body with margin: 0 auto. I don't like the 2560px view-width either lol

2

Connor Zβ€’ 5,115

@zuolizhu

Posted

@Diarrah That sounds a good approach!

0
P
Matt Studdertβ€’ 13,611

@mattstuddert

Posted

Hey Connor, awesome work on this challenge. Your solution matches up to the design really well and scales down to mobile beautifully! πŸ™Œ

I know what you mean about this design being tricky to make work for screens larger than 1440px. I guess one way around it would be to add a line onto the ends of the arrows that stretches to the edge of the screen. This could be coded as an add-on for larger screens.

Keep up the great work. Your solutions are looking amazing!

2

Connor Zβ€’ 5,115

@zuolizhu

Posted

Hey Matt, thanks for the suggestion!πŸ™Œ

0
Tedβ€’ 0

@Turbospeedzter

Posted

Great design. I love the arrows. Must have been difficult.

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