Bloom — Creative App Login

<main class="bl-wrap"><div class="bl-card">
  <div class="bl-head"><div class="bl-blob bl-b1" aria-hidden="true"></div><div class="bl-blob bl-b2" aria-hidden="true"></div>
    <a class="bl-brand" href="#">🌸 Bloom</a><h1 class="bl-h1">Hey, welcome back!</h1><p class="bl-sub">Log in and pick up where you left off.</p></div>
  <div class="bl-body">
    <form data-auth novalidate>
      <div class="bl-field"><label for="bl-email">Email</label><input id="bl-email" type="email" autocomplete="email" placeholder="you@email.com" required></div>
      <div class="bl-field"><label for="bl-pw">Password</label><div class="bl-pw"><input id="bl-pw" type="password" autocomplete="current-password" placeholder="Your password" required><button type="button" class="bl-toggle" data-pw-toggle="bl-pw" aria-pressed="false" aria-label="Toggle password">Show</button></div></div>
      <div class="bl-row"><label class="bl-check"><input type="checkbox"> Remember me</label><a href="#" class="bl-link">Forgot?</a></div>
      <button type="submit" class="bl-btn">Log in ✨</button>
    </form>
    <div class="bl-div"><span>or</span></div>
    <div class="bl-ssos"><button type="button">Google</button><button type="button">Facebook</button></div>
    <p class="bl-foot-t">New to Bloom? <a href="#" class="bl-link">Join free</a></p>
    <footer class="bl-foot"><span class="x-by">Built with <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
  </div>
</div></main>

*{box-sizing:border-box}
.bl-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 20px;background:#fff5f7;color:#3d1f2a;font-family:'Inter',system-ui,sans-serif}
.bl-card{width:100%;max-width:400px;background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(244,63,94,.18)}
.bl-head{position:relative;padding:34px 30px 28px;background:linear-gradient(135deg,#f43f5e,#fb923c);color:#fff;overflow:hidden}
.bl-blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.18)}
.bl-b1{width:140px;height:140px;top:-50px;right:-30px}.bl-b2{width:90px;height:90px;bottom:-30px;left:30%}
.bl-brand{position:relative;font-family:'Sora',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none}
.bl-h1{position:relative;font-family:'Sora',sans-serif;font-weight:800;font-size:1.7rem;margin:18px 0 5px}
.bl-sub{position:relative;color:rgba(255,255,255,.92);font-size:.94rem;margin:0}
.bl-body{padding:28px 30px 26px}
.bl-field{margin-bottom:15px}
.bl-field label{display:block;font-size:.84rem;font-weight:700;margin-bottom:6px;color:#7a4453}
.bl-field input{width:100%;padding:14px 16px;border:2px solid #ffd9e0;border-radius:14px;font:inherit;font-size:.98rem;color:#3d1f2a;background:#fff7f9}
.bl-field input::placeholder{color:#c89aa6}
.bl-field input:focus{outline:none;border-color:#f43f5e;box-shadow:0 0 0 4px rgba(244,63,94,.16);background:#fff}
.bl-field input[aria-invalid=true]{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.bl-pw{position:relative}
.bl-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#b06478;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;padding:6px 8px}
.bl-toggle:hover{color:#f43f5e}.bl-toggle:focus-visible{outline:2px solid #f43f5e;outline-offset:1px;border-radius:6px}
.bl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 20px;font-size:.86rem}
.bl-check{display:flex;align-items:center;gap:7px;color:#7a4453;cursor:pointer}.bl-check input{width:15px;height:15px;accent-color:#f43f5e}
.bl-link{color:#f43f5e;font-weight:700;text-decoration:none}.bl-link:hover{text-decoration:underline}
.bl-btn{width:100%;padding:14px;border:0;border-radius:14px;background:linear-gradient(135deg,#f43f5e,#fb923c);color:#fff;font:inherit;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bl-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(244,63,94,.36)}.bl-btn:focus-visible{outline:3px solid #fda4af;outline-offset:2px}
.bl-div{display:flex;align-items:center;gap:12px;margin:20px 0;color:#c89aa6;font-size:.82rem}
.bl-div::before,.bl-div::after{content:'';flex:1;height:1px;background:#ffe1e7}
.bl-ssos{display:flex;gap:10px}
.bl-ssos button{flex:1;padding:12px;border:2px solid #ffd9e0;border-radius:13px;background:#fff;color:#7a4453;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.bl-ssos button:hover{border-color:#f43f5e;background:#fff7f9}.bl-ssos button:focus-visible{outline:2px solid #f43f5e;outline-offset:2px}
.bl-foot-t{text-align:center;font-size:.88rem;color:#7a4453;margin:20px 0 0}
.bl-foot{text-align:center;margin-top:20px;padding-top:18px;border-top:1px solid #ffe1e7}
.x-by{font-size:.8rem;color:#b06478}.x-by a{color:#f43f5e;text-decoration:none;font-weight:700}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.bl-btn{transition:none}}

(function(){document.querySelectorAll('[data-pw-toggle]').forEach(function(b){b.addEventListener('click',function(){var inp=document.getElementById(b.getAttribute('data-pw-toggle'));if(!inp)return;var show=inp.type==='password';inp.type=show?'text':'password';b.setAttribute('aria-pressed',show?'true':'false');b.textContent=show?'Hide':'Show';});});var f=document.querySelector('form[data-auth]');if(f){f.addEventListener('submit',function(e){e.preventDefault();var ok=true;f.querySelectorAll('input[required]').forEach(function(i){if(!i.value||!i.checkValidity()){ok=false;i.setAttribute('aria-invalid','true');}else{i.removeAttribute('aria-invalid');}});if(!ok)return;var btn=f.querySelector('[type=submit]');if(btn){btn.textContent='Signing in…';setTimeout(function(){btn.textContent='✓ Signed in';},700);}});}})();