← back to Costa Rica App
tmp/shots-html/05-invite.html
57 lines
<!doctype html><html><head><meta charset="utf-8">
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{width:1320px;height:2868px;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#f6f7f5;color:#1a2b22}
.status{height:120px;background:#0a7d55;display:flex;align-items:flex-end;justify-content:space-between;padding:0 60px 14px;color:#fff;font-weight:600;font-size:40px}
.status .right{display:flex;gap:18px;align-items:center;font-size:34px}
.nav{background:#0a7d55;color:#fff;height:150px;display:flex;align-items:center;padding:0 48px;font-size:56px;font-weight:800;letter-spacing:.3px}
.nav .back{font-size:64px;font-weight:400;margin-right:28px}
.banner{background:#0a7d55;color:#fff;text-align:center;padding:70px 48px 84px}
.banner h1{font-size:78px;font-weight:900;line-height:1.05;letter-spacing:.5px}
.banner p{font-size:44px;opacity:.92;margin-top:26px;font-weight:500;line-height:1.3}
.body{padding:44px 48px}
.search{background:#fff;border:2px solid #e2e5e0;border-radius:22px;height:110px;display:flex;align-items:center;padding:0 40px;color:#9aa39c;font-size:42px;flex:1}
.chips{display:flex;gap:22px;margin:36px 0 12px;flex-wrap:wrap}
.chip{border:3px solid #0a7d55;color:#0a7d55;border-radius:44px;padding:22px 44px;font-size:40px;font-weight:600;background:#fff}
.chip.on{background:#0a7d55;color:#fff}
.card{background:#fff;border:2px solid #e8ebe6;border-radius:28px;padding:40px;margin-top:30px;position:relative}
.card .name{font-size:52px;font-weight:800;color:#1a2b22}
.card .meta{color:#6b756e;font-size:38px;margin-top:12px}
.card .price{color:#0a7d55;font-size:50px;font-weight:800;margin-top:26px}
.card .price .per{color:#6b756e;font-weight:400;font-size:38px}
.card .star{position:absolute;top:40px;right:44px;color:#b8860b;font-size:44px;font-weight:700}
.badge{font-weight:800;text-transform:capitalize;font-size:42px}
</style></head><body>
<div class="status"><span>9:41</span><span class="right">●●● 5G ▮▮▮</span></div>
<div class="nav"><span class="back">‹</span>Invite friends</div>
<div class="body" style="padding-top:20px">
<div style="background:#fff;border-bottom:2px solid #e8ebe6;border-radius:24px;padding:44px;margin-bottom:36px">
<div style="font-size:56px;font-weight:800;color:#1a2b22">Bring your friends</div>
<div style="color:#6b756e;font-size:40px;margin-top:16px;line-height:1.3">See who's already here and invite the rest over WhatsApp. Your contacts are only used for you.</div>
<div style="background:#0a7d55;height:130px;border-radius:26px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:46px;font-weight:700;margin-top:36px">Import my contacts</div>
<div style="color:#0a7d55;font-weight:600;font-size:42px;margin-top:28px">Imported 214 · 12 already here 🎉</div>
</div>
<div style="display:flex;align-items:center;background:#fff;border:2px solid #e8ebe6;border-radius:24px;padding:36px;margin-bottom:24px">
<div style="flex:1"><div style="font-weight:600;color:#1a2b22;font-size:46px">Ana Jiménez</div><div style="color:#6b756e;font-size:36px;margin-top:8px">+506 8712 4490</div></div>
<div style="color:#0a7d55;font-weight:700;font-size:44px">● On app</div>
</div>
<div style="display:flex;align-items:center;background:#fff;border:2px solid #e8ebe6;border-radius:24px;padding:36px;margin-bottom:24px">
<div style="flex:1"><div style="font-weight:600;color:#1a2b22;font-size:46px">Marco Solís</div><div style="color:#6b756e;font-size:36px;margin-top:8px">+506 8834 0021</div></div>
<div style="background:#0a7d55;color:#fff;font-weight:700;font-size:42px;padding:24px 44px;border-radius:20px">Invite</div>
</div>
<div style="display:flex;align-items:center;background:#fff;border:2px solid #e8ebe6;border-radius:24px;padding:36px;margin-bottom:24px">
<div style="flex:1"><div style="font-weight:600;color:#1a2b22;font-size:46px">Laura Vargas</div><div style="color:#6b756e;font-size:36px;margin-top:8px">+506 7099 6633</div></div>
<div style="color:#0a7d55;font-weight:700;font-size:44px">● On app</div>
</div>
<div style="display:flex;align-items:center;background:#fff;border:2px solid #e8ebe6;border-radius:24px;padding:36px;margin-bottom:24px">
<div style="flex:1"><div style="font-weight:600;color:#1a2b22;font-size:46px">Diego Rojas</div><div style="color:#6b756e;font-size:36px;margin-top:8px">+506 8455 1180</div></div>
<div style="background:#0a7d55;color:#fff;font-weight:700;font-size:42px;padding:24px 44px;border-radius:20px">Invite</div>
</div>
</div>
</body></html>