Restaurant Menu HTML Template

Feature menu categories with prices, descriptions, and a hero banner for your restaurant.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Olive &amp; Thyme Menu</title>
  <style>
    body { font-family: 'Cormorant Garamond', serif; background: #fbf7f2; color: #362c24; margin: 0; }
    header { text-align: center; padding: 4rem 1.5rem 2rem; }
    header h1 { font-size: 3.4rem; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
    header p { letter-spacing: 0.25em; font-size: 0.95rem; color: #8b6f52; }
    main { max-width: 860px; margin: 0 auto 4rem; padding: 0 1.5rem; }
    section { margin-top: 3rem; }
    h2 { text-transform: uppercase; letter-spacing: 0.3em; font-size: 1rem; color: #8b6f52; margin-bottom: 1rem; }
    .item { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(54, 44, 36, 0.1); padding: 1rem 0; }
    .item h3 { margin: 0; font-size: 1.4rem; }
    .item p { margin: 0.3rem 0 0; color: #5a4c3e; font-size: 0.95rem; }
    .price { font-weight: 600; letter-spacing: 0.2em; }
  </style>
</head>
<body>
  <header>
    <p>EST. 2010 · AUSTIN, TX</p>
    <h1>OLIVE &amp; THYME</h1>
    <p>weekday dinners · weekend brunch</p>
  </header>

  <main>
    <section>
      <h2>Starters</h2>
      <div class="item">
        <div>
          <h3>Charred peach burrata</h3>
          <p>Prosciutto, basil oil, toasted baguette</p>
        </div>
        <span class="price">$14</span>
      </div>
      <div class="item">
        <div>
          <h3>Smoked carrot tartare</h3>
          <p>Capers, shallot, citrus aioli, puffed quinoa</p>
        </div>
        <span class="price">$12</span>
      </div>
    </section>

    <section>
      <h2>Mains</h2>
      <div class="item">
        <div>
          <h3>Coastal saffron risotto</h3>
          <p>Seared scallops, preserved lemon, pea tendrils</p>
        </div>
        <span class="price">$28</span>
      </div>
      <div class="item">
        <div>
          <h3>Wood grilled lamb chops</h3>
          <p>Herb gremolata, fingerling potatoes, charred broccolini</p>
        </div>
        <span class="price">$34</span>
      </div>
    </section>

    <section>
      <h2>Sweets</h2>
      <div class="item">
        <div>
          <h3>Olive oil citrus cake</h3>
          <p>Meyer lemon curd, mascarpone whip</p>
        </div>
        <span class="price">$10</span>
      </div>
      <div class="item">
        <div>
          <h3>Dark chocolate affogato</h3>
          <p>Burnt caramel gelato, espresso, cocoa nib</p>
        </div>
        <span class="price">$9</span>
      </div>
    </section>
  </main>
</body>
</html>

← Back to all templates