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

Landing page with animation, sounds, and some other effects ✨

Bonreyβ€’ 1,130

@Bonrey

Desktop design screenshot for the Manage landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my first big project, and I put a lot of time in on it. I only used HTML, CSS (with the preprocessor SASS) and Vanilla JS. Well, here is a brief outline of the site's functionality. You can read about it in more detail here.

  • Testimonials' slider that is automatically moving. You can hover a mouse pointer on it to stop it. Also, you can choose which testimonial to read by clicking one of the dots below the slider;
  • The input field in the footer will shake and change its border on the invalid input;
  • Button sounds and animation;
  • Different mobile and desktop designs.

So, that's it. As always, any feedback is very welcome! πŸ™‚

Community feedback

Akshay Meshramβ€’ 390

@akshay63

Posted

Hi @BONREY. The site is looking great. The sounds of each button and the animations are amazing. I just want to say that when we view the site in the mobile version, the navigational menus are aligned in an inconsistent manner. But otherwise, all your work is Great! CongralutionsπŸ‘ŒπŸ‘Œ

1

Bonreyβ€’ 1,130

@Bonrey

Posted

Thank you for your feedback! I'll definitely fix that little bug πŸ˜‰

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