`tmp/shots-html/02-listing-contact.html`

46 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">●●● &nbsp;5G&nbsp; ▮▮▮</span></div>
  
  <div class="nav"><span class="back">‹</span>Listing</div>
  <div class="body">
    <div style="font-size:58px;font-weight:800;color:#1a2b22">Villa Pacífica — Tamarindo</div>
    <div style="color:#6b756e;font-size:40px;margin-top:14px">Guanacaste · tourism hotel</div>
    <div style="color:#b8860b;font-size:42px;margin-top:16px">★ 4.9</div>
    <div style="margin-top:28px;line-height:1.35;color:#33413a;font-size:40px">Steps from the sand in Tamarindo. Ocean-view terrace, private pool, and sunset every night. Sleeps 6.</div>
    <div style="margin-top:36px;background:#eef5f1;border-radius:28px;padding:44px">
      <div style="font-size:56px;font-weight:800;color:#0a7d55">$189 <span style="color:#6b756e;font-weight:400;font-size:40px">/ night</span></div>
      <div style="color:#33413a;font-size:38px;margin-top:14px">+ $40 cleaning</div>
      <div style="color:#6b756e;font-size:38px;margin-top:18px">Up to 6 guests · Instant book · Free cancellation</div>
    </div>
    <div style="color:#6b756e;font-size:38px;margin-top:24px">📍 Playa Tamarindo, Santa Cruz</div>
    <div style="font-size:56px;font-weight:900;letter-spacing:2px;text-align:center;margin:56px 0 32px;color:#1a2b22">BEST WAY TO CONTACT</div>
    <div style="display:flex;flex-wrap:wrap;gap:28px;justify-content:center">
      <div style="width:47%;min-height:180px;background:#25D366;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#fff"><div style="font-size:64px">💬</div><div style="font-weight:800;font-size:44px;margin-top:12px">WhatsApp</div></div><div style="width:47%;min-height:180px;background:#0a7d55;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#fff"><div style="font-size:64px">📞</div><div style="font-weight:800;font-size:44px;margin-top:12px">Call</div></div><div style="width:47%;min-height:180px;background:#2b6cb0;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#fff"><div style="font-size:64px">✉️</div><div style="font-weight:800;font-size:44px;margin-top:12px">Email</div></div><div style="width:47%;min-height:180px;background:#7a3cff;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#fff"><div style="font-size:64px">📨</div><div style="font-weight:800;font-size:44px;margin-top:12px">Message</div></div>
    </div>
  </div>
  <div style="position:absolute;bottom:0;left:0;right:0;padding:44px 48px 90px"><div style="background:#0a7d55;height:150px;border-radius:30px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:50px;font-weight:700">Book now</div></div>
</body></html>