뉴스레터 가입

<div class="signup">
  <h3>Get product updates</h3>
  <p>One email a week. Unsubscribe anytime.</p>
  <div class="form" id="form">
    <div class="input"><span id="typed"></span><i class="caret"></i></div>
    <button id="submit">Subscribe</button>
  </div>
  <div class="success" id="success"><span class="check">&check;</span> You're subscribed</div>
</div>

.signup{width:min(90%,520px);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.5vmin,10px);
  text-align:center}
.signup h3{margin:0;font-size:clamp(11px,2.6vmin,18px);font-weight:800}
.signup p{margin:0;font-size:clamp(7px,1.4vmin,11px);color:var(--muted)}
.form{display:flex;gap:clamp(4px,1vmin,8px);width:100%;margin-top:clamp(4px,1vmin,6px)}
.input{flex:1;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:clamp(6px,1.5vmin,10px) clamp(8px,1.8vmin,12px);font-size:clamp(7px,1.4vmin,11px);color:var(--fg);
  display:flex;align-items:center}
.caret{width:1px;height:1em;background:var(--muted);margin-left:2px;animation:blink 1s step-end infinite}
.form button{font-size:clamp(7px,1.4vmin,11px);font-weight:700;padding:0 1.3em;border-radius:8px;border:none;
  background:var(--accent);color:#fff}
.success{display:none;align-items:center;gap:6px;font-size:clamp(8px,1.6vmin,12px);font-weight:700;
  color:var(--accent-3);margin-top:clamp(4px,1vmin,6px)}
.success.show{display:flex}
.form.hide{display:none}
.check{width:clamp(14px,2.8vmin,20px);height:clamp(14px,2.8vmin,20px);border-radius:50%;background:var(--accent-3);
  color:#fff;display:grid;place-items:center;font-size:.7em}
@keyframes blink{50%{opacity:0}}

const EMAIL = 'you@example.com';
const typed = document.getElementById('typed');
const form = document.getElementById('form');
const success = document.getElementById('success');
function reset() {
  form.classList.remove('hide');
  success.classList.remove('show');
  typed.textContent = '';
}
function run() {
  reset();
  let i = 0;
  const type = setInterval(function () {
    typed.textContent = EMAIL.slice(0, i);
    i++;
    if (i > EMAIL.length) {
      clearInterval(type);
      setTimeout(function () {
        form.classList.add('hide');
        success.classList.add('show');
      }, 400);
    }
  }, 90);
}
run();
setInterval(run, 4600);