Sign-in

Source: Uiverse ↗
Author: John-CFO
Licence: MIT

Loading…

Code

<form class="form">
     <div class="form-title"><span>sign in to your</span></div>
      <div class="title-2"><span>SPACE</span></div>
      <div class="input-container">
        <input class="input-mail" type="email" placeholder="Enter email">
        <span> </span>
      </div>

      <section class="bg-stars">
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
      </section>

      <div class="input-container">
        <input class="input-pwd" type="password" placeholder="Enter password">
      </div>
      <button type="submit" class="submit">
        <span class="sign-text">Sign in</span>
      </button>

      <p class="signup-link">
        No account?
        <a href="" class="up">Sign up!</a>
      </p>
       
   </form>

Prompt

Build "Sign-in", a input animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes. It sits on a dark background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/John-CFO/spicy-horse-10 (John-CFO, MIT).