Aurora — Animated Split-Screen Login

<div class="container-fluid"><div class="row min-vh-100">
  <div class="col-lg-6 au-left d-none d-lg-flex flex-column justify-content-between p-5">
    <div class="fw-bold fs-4"><i class="bi bi-stars me-1"></i>ConvertAtlas</div>
    <div><p class="au-quote">"60+ tools, 435 snippets and 18 templates — ConvertAtlas became our team’s daily driver."</p><div class="d-flex align-items-center gap-2 mt-3"><div class="rounded-circle bg-white bg-opacity-25 d-grid" style="width:42px;height:42px;place-items:center">AL</div><div><div class="fw-semibold small">Ava Lindberg</div><div class="small opacity-75">Head of Product, Lumen Labs</div></div></div></div>
    <div class="small opacity-75">© 2026 ConvertAtlas · convertatlas.org</div>
  </div>
  <div class="col-lg-6 d-flex align-items-center justify-content-center p-4">
    <div class="au-form">
      <h3 class="fw-bold mb-1">Welcome back</h3>
      <p class="text-secondary mb-4">Sign in to your ConvertAtlas account</p>
      <label class="form-label small fw-semibold">Email</label>
      <input type="email" class="form-control mb-3" placeholder="you@company.com">
      <div class="d-flex justify-content-between"><label class="form-label small fw-semibold">Password</label><a href="#" class="small text-decoration-none">Forgot?</a></div>
      <input type="password" class="form-control mb-3" placeholder="••••••••">
      <div class="form-check mb-3"><input class="form-check-input" type="checkbox" id="rm"><label class="form-check-label small" for="rm">Keep me signed in</label></div>
      <button class="btn btn-au text-white w-100 mb-3">Sign in</button>
      <p class="text-center small text-secondary mb-0">No account? <a href="#" class="text-decoration-none fw-semibold">Request access</a></p>
    </div>
  </div>
</div></div>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>

body{min-height:100vh;margin:0;font-family:system-ui,-apple-system,sans-serif}
.au-left{background:linear-gradient(-45deg,#6a11cb,#2575fc,#06b6d4,#7c3aed);background-size:400% 400%;animation:au 12s ease infinite;color:#fff;position:relative;overflow:hidden}
@keyframes au{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.au-left::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.08);top:-120px;right:-120px}
.au-quote{font-size:1.35rem;font-weight:600;line-height:1.5}
.au-form{max-width:380px;width:100%}
.form-control{padding:.7rem .9rem;border-radius:12px}
.form-control:focus{border-color:#7c3aed;box-shadow:0 0 0 .2rem rgba(124,58,237,.15)}
.btn-au{background:linear-gradient(90deg,#6a11cb,#2575fc);border:0;border-radius:12px;padding:.7rem;font-weight:600}
.btn-au:hover{filter:brightness(1.08)}