<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>First 30 Days with a New Tenant: Free Landlord Checklist</title> <meta name="description" content="A 2-page PDF checklist for the first 30 days with a new tenant, emailed immediately after sign-up."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;600;800&display=swap" rel="stylesheet"> <style> :root{ --navy:#1B2A4A; /* text + structure */ --navy-soft:#3A4866; /* secondary text (8.9:1 on paper) */ --paper:#FAF7F0; /* background */ --line:#D9D4C7; --mustard:#E3A82B; /* ACCENT: reserved for the button only (navy on mustard ≈ 7.6:1) */ --mustard-dark:#C98F14; --error:#A3261B; /* 6.6:1 on paper */ --font:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--navy); font-family:var(--font);font-size:18px;line-height:1.5; } main{max-width:560px;margin:0 auto;padding:28px 20px 32px} /* Small CSS-only visual: a checked box, drawn in navy */ .mark{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:15px;font-weight:600;color:var(--navy-soft);letter-spacing:.02em;text-transform:uppercase} .box{width:22px;height:22px;border:2.5px solid var(--navy);border-radius:4px;position:relative;flex:none} .box::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--navy);border-width:0 3px 3px 0;transform:rotate(45deg)} h1{font-size:30px;line-height:1.15;font-weight:800;margin:0 0 12px;letter-spacing:-.01em} .deal{margin:0 0 20px;color:var(--navy)} .deal strong{font-weight:700} label{display:block;font-weight:600;margin:0 0 6px} input[type=email]{ width:100%;min-height:52px;padding:12px 14px;font:inherit;color:var(--navy); background:#fff;border:2px solid var(--navy-soft);border-radius:8px; } input[type=email]:focus{outline:3px solid var(--navy);outline-offset:2px;border-color:var(--navy)} input[aria-invalid=true]{border-color:var(--error)} .error{color:var(--error);font-size:16px;margin:6px 0 0;min-height:0} .error:empty{display:none} button{ width:100%;min-height:52px;margin-top:12px;padding:12px 16px; font:inherit;font-weight:800;color:var(--navy);background:var(--mustard); border:0;border-radius:8px;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:10px; } button:hover{background:var(--mustard-dark)} button:focus-visible{outline:3px solid var(--navy);outline-offset:3px} button[disabled]{cursor:progress;opacity:.85} .spinner{width:18px;height:18px;border:3px solid var(--navy);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;display:none} button[aria-busy=true] .spinner{display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .privacy{font-size:15px;color:var(--navy-soft);margin:10px 0 0} .inside{border-top:1px solid var(--line);margin-top:28px;padding-top:20px} .inside h2{font-size:18px;margin:0 0 10px} .inside ul{margin:0;padding:0;list-style:none} .inside li{position:relative;padding-left:30px;margin:0 0 10px} .inside li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:12px;border:2px solid var(--navy);border-radius:2px} /* Done state */ .done h1{font-size:28px} .filebox{ margin:20px 0;padding:18px;border:2px dashed var(--navy-soft);border-radius:8px; font-size:16px;color:var(--navy-soft);text-align:center; } .filebox a{color:var(--navy);font-weight:700;display:inline-block;min-height:44px;line-height:44px} footer{max-width:560px;margin:0 auto;padding:0 20px 28px;font-size:15px} footer a{color:var(--navy-soft);display:inline-block;min-height:44px;line-height:44px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} [hidden]{display:none!important} @media (min-width:600px){ h1{font-size:36px} main{padding-top:56px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .spinner{border-right-color:var(--navy);opacity:.5} } </style> </head> <body> <main> <!-- STATE 1 + 2: form / sending --> <section id="state-form" aria-labelledby="h-offer"> <p class="mark"><span class="box" aria-hidden="true"></span>Free checklist for landlords</p> <h1 id="h-offer">Just handed over the keys? Get your first 30 days on one checklist.</h1> <p class="deal">Give us your email and we'll send you a <strong>2-page PDF checklist for the first 30 days with a new tenant</strong>, right away.</p> <!-- Replace action="#" with your email provider's form endpoint (e.g. your ESP's subscribe URL) and set method/field names it expects. --> <form id="signup" action="#" method="post" novalidate> <label for="email">Your email address</label> <input id="email" name="email" type="email" autocomplete="email" inputmode="email" required aria-describedby="email-error privacy" spellcheck="false"> <p id="email-error" class="error" role="alert"></p> <button id="submit" type="submit" aria-busy="false"> <span class="spinner" aria-hidden="true"></span> <span id="btn-label">Send me the checklist</span> </button> <p id="privacy" class="privacy">We only use your email to send you the checklist. We never sell or share it.</p> </form> <p id="status" class="sr-only" aria-live="polite"></p> <div class="inside"> <h2>What you get</h2> <ul> <li>A 2-page checklist in PDF</li> <li>Covers your first 30 days with a new tenant</li> <li>Emailed to you right after you sign up</li> </ul> </div> </section> <!-- STATE 3: done --> <section id="state-done" class="done" hidden aria-labelledby="h-done"> <p class="mark"><span class="box" aria-hidden="true"></span>You're all set</p> <h1 id="h-done" tabindex="-1">Check your inbox: your checklist is on its way.</h1> <p>We've just emailed the 2-page PDF checklist to <strong id="sent-to">your address</strong>. If you don't see it in a few minutes, check your spam or promotions folder.</p> <div class="filebox"> Add real: file link<br> <a href="#">Download the checklist (PDF)</a> </div> </section> </main> <footer> <a href="#">Privacy policy</a> </footer> <script> (function(){ var form = document.getElementById('signup'); var input = document.getElementById('email'); var err = document.getElementById('email-error'); var btn = document.getElementById('submit'); var label = document.getElementById('btn-label'); var status = document.getElementById('status'); var formState = document.getElementById('state-form'); var doneState = document.getElementById('state-done'); function message(){ if (input.validity.valueMissing) return 'Please enter your email address so we can send the checklist.'; if (input.validity.typeMismatch) return "That doesn't look like a full email address. Check for a typo, like name@example.com."; return ''; } function showError(msg){ err.textContent = msg; input.setAttribute('aria-invalid', msg ? 'true' : 'false'); } input.addEventListener('input', function(){ if (err.textContent) showError(message()); }); form.addEventListener('submit', function(e){ e.preventDefault(); input.value = input.value.trim(); var msg = message(); if (msg){ showError(msg); input.focus(); return; } showError(''); // STATE 2: sending btn.disabled = true; btn.setAttribute('aria-busy','true'); input.readOnly = true; label.textContent = 'Sending your checklist…'; status.textContent = 'Sending your checklist.'; // PREVIEW ONLY: submission is simulated here. // In production, replace this timeout with a fetch() to your email provider's endpoint // (the same one set in the form's action) and call showDone() on success. setTimeout(showDone, 1200); }); function showDone(){ // STATE 3: done document.getElementById('sent-to').textContent = input.value; formState.hidden = true; doneState.hidden = false; document.getElementById('h-done').focus(); } })(); </script> </body> </html>