Responsive landing page with button animations and email form validity

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Yes, it's possible using :invalid selector and general sibling selector. First add this:

  <p class="input-hint">Please provide a valid email address</p>
  

  under or after <span class="subscribe button">Subscribe</span>.

  Then in your css file, add this:

  .input-hint {
      color: red;
      display: none;
  }
  footer input:invalid ~ .input-hint {
      display: block;
  }
  

  That should do the trick. Happy coding!

  Marked as helpful

  1

  ---

  

  Alex•70

  @acutrPosted almost 2 years ago

  @amalkarim Worked like a charm and learned a new thing with the general sibling selector. Thanks!

  0