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

Room Homepage using Sass, BEM and JS (GSAP) Animations

ZaraAg 145

@zaraag92

Desktop design screenshot for the Room homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


In this project, I used GSAP animation first time, also tried to made it pixel perfect).

I got my inspiration of using GSAP from @ApplePieGiraffe. For slides I used swiper.js.

Feel free to mention if there are some issues. Any feedback is appreciated and welcome. Thanks and happy coding.

Community feedback

Carlos 1,110

@Carlos-A-P

Posted

This honestly looks great! Awesome job with the animations! and like you mentioned on mine, just gotta fix the responsiveness a little more since the images don't resize. I also found that when pressing the previous button from the first slide to go to the third slide, the text slide shows up blank. Good luck coding!

1

ZaraAg 145

@zaraag92

Posted

@Carlos-A-P Thanks for your feedback, I'm trying to fix that problem. Thanks,

0
ZaraAg 145

@zaraag92

Posted

I dont know how to change the screenshot.

0

Siege 520

@idesmar

Posted

@ZaraAg92 Go to your profile and select this project. Below the Design Comparison, there's a button to Generate Screenshot.

Edit: I see that your page starts with that screen so I'm guessing generating a new screenshot would just give you the same one.

Great work by the way! Love the animation!

Marked as helpful

1
ZaraAg 145

@zaraag92

Posted

@idesmar Thanks so much for your comment. Yes, this animation is something new for me and really liked it and learned a lot.

Yes, it's intro page, so I think it's the problem.

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