Skip to content
Submitted over 3 years ago

Ping Coming Soon page using HTML CSS and JavaScript validation

Ameya Deokule•355
@ameyadeokule
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a problem with arranging the error message below the input element and have completed it to the best of my abilities. If someone can suggest a better solution it would be helpful. Any feedback is always appreciated and I will work on it.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey great job on this one. Functions properly and the layout resizes well when i'm going in mobile state. The desktop layout is good as well.

    For that error message, I see that you are transitioning its display property. But it pushes down the elements below it a bit right? So instead of transitioning the display you can just transition the visibility property. So when making the error message hidden, all you have to add is visibility: hidden. Then if a user submits a wrong, transition it to visibility: visible . This way, you can avoid the effect of pushing the element below it.

    Overall, your layout is awesome and you did a good job in here^^

    1
    Ameya Deokule•355
    @ameyadeokulePosted over 3 years ago

    @pikamart Thanks for taking the time and reviewing my code. I'll work on the suggestions and make the web page better. I appreciate the feedback, thanks again

    0

Please log in to post a comment

Log in with GitHub

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