Skip to content
Submitted over 4 years ago

Ping coming soon with staggering animations

Abhik•4,820
@abhik-b
A solution to the Ping single column coming soon page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi Frontend Mentors 👋,

I created some staggering animations using setTimeouts , however I personally feel there's a better a way for that. So if anyone knows that please help me out!

Any feedbacks,tips,suggestions will be highly appreciated 🙏

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, hey, Abhik! 👋

    Always nice to see you complete another challenge! 😀 This one looks great! 👍 The animations you added are cool! 😎

    Two very small things I might suggest are adding a max-width to the input element and the button element so that they aren't too wide when the layout first changes from desktop to mobile and perhaps choosing a slightly darker color for the blinking vertical line in the input element and the outline of the button so that they are easier to see against the white background. 😉

    Keep coding (and happy coding, too)! 😁

    And, of course, happy holidays! 🎄

    Marked as helpful
  • Aayush Sood•1,175
    @soodaayush

    You might want to add media queries for the input and button because on bigger screens, the input and button are starched.

    Otherwise you did great!

    Happy coding!

    Marked as helpful
  • Guy Ezra•615
    @ezraguy

    hey @abhik-b, Great work! about the setTimeout on the animations, maybe animation-delay in your CSS is the solution you are looking for.

    Marked as helpful

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