حوّل صورك وأفكارك إلى مواقع قابلة للتعديل

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Brew &amp; Co</title>
<style>
  * { box-sizing: border-box; margin: 0; }
  body { font-family: system-ui, sans-serif; color: #2b2118; background: #fbf6ef; }
  nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; }
  .logo { font-weight: 800; font-size: 22px; }
  .links { display: flex; gap: 28px; font-size: 15px; }
  .btn { background: #2b2118; color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 14px; border: 0; }
  .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: 48px; }
  h1 { font-size: 46px; line-height: 1.1; }
  .hero p { margin: 16px 0 24px; color: #6b5a49; line-height: 1.6; }
  .art { height: 260px; border-radius: 28px; background: linear-gradient(135deg, #f4b183, #c26a3d); display: grid; place-items: center; font-size: 84px; }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 48px 48px; }
  .card { background: #fff; border-radius: 18px; padding: 20px; box-shadow: 0 6px 18px rgba(43,33,24,.08); }
  .card b { display: block; margin-bottom: 6px; }
  .card span { color: #6b5a49; font-size: 14px; }
</style>
</head>
<body>
  <nav>
    <div class="logo">Brew &amp; Co</div>
    <div class="links"><span>Menu</span><span>Story</span><span>Visit</span></div>
    <button class="btn">Order now</button>
  </nav>
  <section class="hero">
    <div>
      <h1>Small-batch coffee, roasted daily.</h1>
      <p>Single-origin beans from partner farms, ground fresh and delivered to your door every week.</p>
      <button class="btn">Shop beans</button>
    </div>
    <div class="art" aria-hidden="true">☕</div>
  </section>
  <section class="cards">
    <div class="card"><b>Espresso</b><span>Rich, dark and balanced.</span></div>
    <div class="card"><b>Filter</b><span>Bright, clean and fruity.</span></div>
    <div class="card"><b>Cold brew</b><span>Smooth and low acidity.</span></div>
  </section>
</body>
</html>