← back to Costa Rica App
tmp/shots-html/01-directory.html
74 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="banner"><h1>All of Costa Rica,<br>in your pocket</h1><p>Stays, tours & local services across all 84 cantones</p></div>
<div class="body" style="padding-top:36px">
<div style="display:flex;gap:24px;align-items:center">
<div class="search">Search stays, tours, services…</div>
<div style="width:110px;height:110px;background:#fff;border:2px solid #e2e5e0;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:48px">👥</div>
<div style="height:110px;background:#0a7d55;color:#fff;border-radius:22px;display:flex;align-items:center;padding:0 40px;font-size:42px;font-weight:600">Trips</div>
</div>
<div class="chips">
<div class="chip on">All</div><div class="chip">Stays</div><div class="chip">Tours</div><div class="chip">Eat</div><div class="chip">Beauty</div>
</div>
<div class="card">
<div class="star">★ 4.9</div>
<div class="name">Villa Pacífica — Tamarindo</div>
<div class="meta">Guanacaste · tourism hotel</div>
<div class="price">$189<span class="per"> / night</span></div>
</div>
<div class="card">
<div class="star">★ 4.8</div>
<div class="name">Arenal Volcano Sunrise Hike</div>
<div class="meta">La Fortuna · tourism tour</div>
<div class="price">$65<span class="per"> / person</span></div>
</div>
<div class="card">
<div class="star">★ 4.9</div>
<div class="name">Nosara Beachfront Casa</div>
<div class="meta">Guanacaste · tourism hotel</div>
<div class="price">$240<span class="per"> / night</span></div>
</div>
<div class="card">
<div class="star">★ 4.7</div>
<div class="name">Soda Típica Manuel Antonio</div>
<div class="meta">Puntarenas · tourism restaurant</div>
<div class="price">$18<span class="per"> / person</span></div>
</div>
<div class="card">
<div class="star">★ 4.9</div>
<div class="name">Monteverde Cloud Forest Zipline</div>
<div class="meta">Puntarenas · tourism tour</div>
<div class="price">$79<span class="per"> / person</span></div>
</div>
</div>
</body></html>