Responsive section Coming Soon (html, stylus, js)

Community feedback

• 

  frost3dWave•190

  @frost3dWavePosted 14 days ago

  Hi, great job on this project. The only thing I noticed which might be unnatural, is the wave animations near the footer. Right now they seem to abruptly cut themselves once 100% is reached & start new at 0%

  @-o-keyframes Wave {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-25%);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  

  It's fine if that's what you intended, but I think it would feel more "wavey" or more natural if it didn't cut itself like that..

  You could maybe do it like this,

  @-o-keyframes Wave {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-50%);
    }
  }
  

  I think this would look more pleasing to to watch too, as it ensures the start & end position are the same & the halfway point is the previous complete position...

  Marked as helpful

  2

  ---

  

  Natali 👻 Grimm•1,130

  @Grimm-NPosted 14 days ago

  @frost3dWave Wow! It looks perfect now. Thank you!

  1

  

  frost3dWave•190

  @frost3dWavePosted 14 days ago

  @Grimm-N glad I could help!

  0
• 

  KapteynUniverse•2,070

  @KapteynUniversePosted 14 days ago

  Hey Natali, great job.

  Adding a valid-invalid border, background color or something to input before submitting the form might be nice too.

  I added the pattern so it works with your validation logic. Also autofocus, autocomplete and label for better accesibility.

  <label for="email" class="sr-only">Your email address...</label>
  <input id="email" class="form__input" type="email" placeholder="Your email address..." required pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$" autofocus autocomplete="email">
  

  input:not(:placeholder-shown):valid {
    border: 2px solid blue;
  }
  
  input:not(:placeholder-shown):invalid{
    border: 2px solid red;
  }
  

  I wasn't sure about label because you have placeholder but according to W3C (under 4.10.7.2.12 The placeholder attribute) the placeholder attribute should not be used as an alternative to a label.

  I was wondering where you had gone :D

  Marked as helpful

  1

  ---

  

  Natali 👻 Grimm•1,130

  @Grimm-NPosted 14 days ago

  @KapteynUniverse Yeah, I’m as shocked as you are—I was busy with something for six whole days! But I’m here, I didn’t disappear, haha. 😂

  So you’re saying that I can use a label instead of placeholder? It’s just that this layout doesn’t have one… That’s why I went with a placeholder instead. Hmm, but to put it in the center of the input field, I’d need to position it, right?

  0

  

  KapteynUniverse•2,070

  @KapteynUniversePosted 14 days ago

  @Grimm-N No, you don't need to position the label as placeholder. I mean you can :D but that is too much work. Instead of that use both of them and make the label visually hidden but screen readers can see it. But whether or not every input always should have a label connected to them for better accesibility, i think.

  Marked as helpful

  1

  

  Natali 👻 Grimm•1,130

  @Grimm-NPosted 14 days ago

  @KapteynUniverse I got it now and I'm absolutely agree with u! Thanks 😁

  1
• 

  Natali 👻 Grimm•1,130

  @Grimm-NPosted 14 days ago

  Sigh, and here I am, stepping on the same rake again – animation, damn it! Why did the worst frame have to show up again? 😂

  1