All comments

• 

  Ecem Gokdogan• 9,380

  @ecemgo

  Submitted over 1 year ago

  

  Responsive Page with Email Validation & Typing Animation

  1

  395

  

  Mert Evirgen• 140

  @waldvoid

  Posted over 1 year ago

  Hi Ecem,

  • You may try giving an invalid e-mail error with event listener - blur when user enters an invalid e-mail and loses focus from the input field instead of showing error while writing the e-mail.
  • I like the transition on e-mail field but wished for a transition back when I lose focus from input area.
  • E-mail input does not have label, you can use aria-label attribute on your html to provide more accessibility for screen readers.
  • <img src="images/icon-arrow.svg" alt="arrow"> -->> button alt text can be more informative. Like "Subscribe to e-mail feed".

  Great work!

  Marked as helpful

  3

  This comment has received 1 replyShow
• 

  MetalRick• 70

  @MetalRick84

  Submitted over 1 year ago

  Why is the image-container higher than the image itself?

  I could solve this with height: 301px but I want to know why. You can see it when hovering the card-image (gap at the bottom of the image). Or with devtools :)

  

  Why gap at bottom of image (see when hover)?

  2

  100

  

  Mert Evirgen• 140

  @waldvoid

  Posted over 1 year ago

  Hi MetalRick,

  If you are using a box for an image try using code below to align your image properly in your image container. Otherwise if you leave it like inline element have to exactly fit your image to your box.

  card-image-container {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Or you may use other methods with the same idea.

  0

  This comment has received 1 replyShow