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 solution with SCSS && GSAP / ScrollTrigger animations

#accessibility#bem#gsap#parcel#sass/scss

@GrzywN

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey!

I'm really happy with the result :)

I turned my spaghetti JavaScript code into cleaner and more maintainable OOP import/export module based code. Animations are made using GSAP and ScrollTrigger plugin. If you know SOLID principles or some design patterns and you think I could have done something better - let me know, since it's my first OOP JS project after all. I'll probably code the next one in TypeScript.

The solution isn't pixel perfect, but it's not that bad. I spent some time working on it, but I thought it wasn't worth it, especially improving "partners" section was hard. (I didn't want to make a modifier class for every image and then compare it to the design, since this section is broken in Figma).

Feel free to test out things and check out my code. I might have missed something, like I always do. Any helpful feedback is appreciated!

Community feedback

CyrusKabir 1,885

@CyrusKabir

Posted

Hello, you did a clean and good work on this challenge but your landing page have a horizontal scroll on mobile and I test it with both dev tools and my mobile and still I don't know how to fix it

Marked as helpful

1

@GrzywN

Posted

@CyrusKabir Alright I've just put really simple solution and it worked:

body, header, main, footer {
overflow-x: hidden;
max-width: 100vw;
}
1
CyrusKabir 1,885

@CyrusKabir

Posted

@GrzywN Yes this snippet work but main issue still exist. when we have overflow on any direction it's better to find that element which cause overflow and remove it or fix it you can read this article for debugging overflow issue on site : debugging overflow

0

@GrzywN

Posted

@CyrusKabir yeah ik

0
Anna Leigh 5,135

@brasspetals

Posted

Hi, Karol! 👋 Great job on this challenge! The GSAP animations fun, and I can confirm that the prefers-reduced-motion query does work. Your HTML semantics are solid, and overall it responds great. 👍

The only thing I noticed is that the logos from 400 - 900px get very stretched and pixelated. I suggest removing flex: 1 from .partners__logo and then adding justify-content: center to .partners. You could then play around with your existing gap property on .partners to get the spacing how you want. At the very least this will prevent the logos from getting HUGE on large mobile and tablet screens.

Again, nice job on this one!

Marked as helpful

1

@GrzywN

Posted

@brasspetals Hi, thanks a lot! I couldn't find a right way to make partners section for medium sized screens. I'll try to improve it, at least a little bit. 👍

Edit: Wow, I did what you've suggested and it's clean. I don't believe that I didn't come up with this simple idea 😅 Once again, thanks a lot! 😁

0
P
Fluffy Kas 7,735

@FluffyKas

Posted

Hiyo, everything here looks really very neat! I tried to look for a prefers-reduced-motion query but couldn't find it. Is there any? I might just be completely blind tbh! >.<

1

@GrzywN

Posted

@FluffyKas It's in the Animations.mjs file, line 11. tbh I don't even know, if it even works 😅

1
P
Fluffy Kas 7,735

@FluffyKas

Posted

@GrzywN Ahaha, thanks for specifying the line, never would've found it >.<

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