Toast HTML — 4th of July — Open + Family Meals

Paste this into Toast (Custom HTML block)

Click Copy, then paste into Toast Marketing.
TOAST HTML

<!DOCTYPE html>
<!-- ALADDIN email — generated by bin/build.py from campaigns/<slug>/campaign.toml. DO NOT edit deploy/ by hand. -->
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aladdin — 4th of July</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Catamaran:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
  :root{
    /* Phoenix-orange brand family — no blue, distinct warm shades */
    --phoenix:#ED3902;   /* Orange Red — primary CTA / tab */
    --terracotta:#F8730E;/* Pumpkin — panel A */
    --amber:#F8730E;     /* Pumpkin — starburst accent */
    --saffron:#FCBD15;   /* Moon Yellow — panel C / starburst */
    --copper:#ED3902;
    --cream:#FBF3E6; --charcoal:#201C19;
  }
  *{ box-sizing:border-box; }
  body{ margin:0; background:#ece0cf; font-family:'Catamaran',Arial,sans-serif; color:var(--charcoal); }
  .email{ width:600px; max-width:100%; margin:24px auto; background:var(--cream); border-radius:18px; overflow:hidden; box-shadow:0 24px 60px rgba(70,30,8,.28); }
  .anton{ font-family:'Anton',Impact,sans-serif; font-weight:400; letter-spacing:.5px; text-transform:uppercase; }

  .tab{ text-align:center; padding:16px 0 0; background:var(--cream); }
  .tab span{ display:inline-block; background:var(--copper); color:#fff; font-family:'Anton',sans-serif; font-size:18px; letter-spacing:1.5px; text-transform:uppercase; padding:11px 30px; border-radius:0 0 22px 22px; }

  .pill{ display:inline-flex; align-items:center; gap:9px; background:var(--phoenix); color:#fff; font-family:'Anton',sans-serif; font-size:16px; letter-spacing:1px; text-transform:uppercase; padding:12px 26px; border-radius:40px; text-decoration:none; box-shadow:0 5px 0 rgba(0,0,0,.2); transition:transform .12s,box-shadow .12s; }
  .pill:hover{ transform:translateY(-2px); box-shadow:0 7px 0 rgba(0,0,0,.2); }
  .pill.turq{ background:var(--terracotta); } .pill.charcoal{ background:var(--charcoal); } .pill .sq{ width:32px; height:13px; }

  /* two-tone hero: photo top + color panel bottom */
  .duo{ position:relative; }
  .duo .ph{ position:relative; }
  .duo .ph img{ display:block; width:100%; height:360px; object-fit:cover; }
  .duo .ph img.full{ height:auto; }
  .duo .scrim{ position:absolute; inset:0 0 auto 0; height:120px; background:linear-gradient(180deg,rgba(0,0,0,.35),transparent); }
  .duo .brand{ position:absolute; top:18px; left:24px; font-family:'Anton',sans-serif; font-size:30px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.45); }
  .duo .order{ position:absolute; top:20px; right:22px; }
  .panel{ padding:40px 40px 42px; text-align:center; }
  .panel.turq{ background:var(--terracotta); } .panel.pistachio{ background:var(--saffron); }
  .panel .kicker{ font-size:24px; font-weight:800; margin:0 0 2px; color:#7a2e00; }
  .panel h2{ font-size:56px; line-height:.9; margin:4px 0 14px; color:var(--charcoal); }
  .panel p{ font-size:19px; line-height:1.45; max-width:430px; margin:0 auto 22px; font-weight:700; color:#5a2a0e; }

  /* starburst straddling the seam */
  .sticker{ position:absolute; width:130px; height:130px; display:flex; align-items:center; justify-content:center; text-align:center; transform:rotate(-12deg); z-index:5; }
  .sticker .label{ position:relative; z-index:2; font-family:'Anton',sans-serif; font-size:17px; line-height:1.05; text-transform:uppercase; color:var(--charcoal); padding:0 18px; }
  .sticker svg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.28)); }

  /* TOP-3 item row */
  .top3{ background:var(--cream); padding:42px 30px 46px; text-align:center; }
  .top3 .kick{ font-size:26px; font-weight:700; margin:0; }
  .top3 h3{ font-size:48px; line-height:.9; margin:4px 0 26px; }
  .row{ display:flex; gap:14px; justify-content:center; }
  .item{ flex:1; }
  .item img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.16); }
  .item .nm{ font-family:'Anton',sans-serif; font-size:18px; margin-top:12px; line-height:1; }
  .item .pr{ font-weight:800; font-size:14px; color:#8a7355; margin-top:4px; }
  .top3 .cta{ margin-top:30px; }

  .reward-lock{ position:absolute; left:24px; bottom:18px; z-index:4; }
  .reward-lock .l1{ font-family:'Anton',sans-serif; font-size:15px; color:#fff; line-height:.9; text-shadow:0 1px 4px rgba(0,0,0,.5); }
  .reward-lock .l2{ font-family:'Anton',sans-serif; font-size:30px; color:#fff; line-height:.85; text-shadow:0 2px 6px rgba(0,0,0,.5); }
  .reward-lock .tag{ display:inline-block; background:var(--charcoal); color:#fff; font-family:'Anton',sans-serif; font-size:11px; letter-spacing:2px; padding:3px 8px; margin-top:6px; }

  .footer{ background:var(--cream); padding:34px 30px 30px; text-align:center; }
  .footer .nav{ font-family:'Anton',sans-serif; font-size:16px; letter-spacing:1px; text-transform:uppercase; margin-bottom:22px; }
  .footer .nav a{ color:var(--charcoal); text-decoration:none; margin:0 14px; }
  .footer .big{ font-family:'Anton',sans-serif; font-size:62px; color:var(--charcoal); line-height:1; margin:4px 0 16px; }
  .footer .social a{ display:inline-block; width:34px; height:34px; line-height:34px; margin:0 6px; border-radius:50%; background:var(--charcoal); color:#fff; font:bold 15px Arial; text-decoration:none; }
  .footer .appline{ font-weight:800; font-size:14px; letter-spacing:1px; margin:22px 0 10px; text-transform:uppercase; color:#7a6650; }
  .badge{ display:inline-block; background:var(--charcoal); color:#fff; border-radius:9px; padding:8px 14px; margin:0 5px; text-decoration:none; text-align:left; }
  .badge .s{ display:block; font-size:9px; letter-spacing:1px; opacity:.8; text-transform:uppercase; }
  .badge .b{ display:block; font-family:'Anton',sans-serif; font-size:16px; line-height:1; margin-top:2px; }
  .legal{ font-size:12.5px; line-height:1.7; color:#9c8a72; margin-top:22px; } .legal a{ color:#9c8a72; }
  @media (max-width:620px){ .duo .ph img{ height:280px; } .duo .ph img.full{ height:auto; } .panel h2{ font-size:40px; } .top3 h3{ font-size:36px; } .item .nm{ font-size:14px; } .footer .big{ font-size:46px; } }
</style>
</head>
<body>
<!-- PREHEADER (inbox preview, hidden in body) -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#FBF3E6;">
  Aladdin Montrose is open July 4th — order online for family meals & cookout sides.&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
</div>
<div class="email" data-label="Aladdin 4th of July Email">

  <!-- PILL-TAB -->
  <div class="tab"><span>Happy 4th of July</span></div>

  <!-- SECTION A — hero -->
  <div class="duo">


    <div class="ph">
      <img class="full" alt="Happy 4th of July from Aladdin Mediterranean — Montrose, Houston" src="https://aladdin-email.pages.dev/assets/hero-july4-geo.jpg">
    </div>

    <div class="panel turq">
      <p class="kicker">Skip the Cooking</p>
      <h2 class="anton">We&rsquo;re Open<br>July 4th</h2>
      <p>Aladdin Montrose is open this Fourth of July. Order online for <b>family meals</b> to feed the crew — or grab the perfect Mediterranean <b>sides</b> for your cookout.</p>
      <a class="pill charcoal" href="https://order.toasttab.com/online/locations/f369dbe5-2054-4bd4-9682-9d59c52ccd2c/?utm_source=toast&utm_medium=email&utm_campaign=july-4th&utm_content=a_cta">Order Online
        <svg class="sq" viewBox="0 0 40 16"><path d="M2 11 C 10 2, 16 14, 24 7 S 33 6, 37 8" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M31 3 l7 5 -7 5" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </div>
  </div>

  <!-- SECTION B — TOP 3 item row -->
  <div class="top3">
    <p class="kick">Mediterranean Sides for Your</p>
    <h3 class="anton">Cookout</h3>
    <div class="row">
      <div class="item"><img src="https://aladdin-email.pages.dev/assets/d2-pomhummus.jpg" alt="Classic hummus"><div class="nm">Classic<br>Hummus</div></div>
      <div class="item"><img src="https://aladdin-email.pages.dev/assets/d2-tabouli.jpg" alt="Tabouli salad"><div class="nm">Tabouli<br>Salad</div></div>
      <div class="item"><img src="https://aladdin-email.pages.dev/assets/d2-rice.jpg" alt="Saffron rice"><div class="nm">Saffron<br>Rice</div></div>
    </div>
    <div class="cta">
      <a class="pill" style="background:#ED3902;" href="https://order.toasttab.com/online/locations/f369dbe5-2054-4bd4-9682-9d59c52ccd2c/?utm_source=toast&utm_medium=email&utm_campaign=july-4th&utm_content=b_cta">Add Sides to Your Order
        <svg class="sq" viewBox="0 0 40 16"><path d="M2 11 C 10 2, 16 14, 24 7 S 33 6, 37 8" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M31 3 l7 5 -7 5" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </div>
  </div>

  <!-- SECTION C — reward two-tone -->
  <div class="duo">
    <div class="ph">
      <div class="scrim"></div>
      <img alt="Aladdin Mediterranean family meal feast platter" src="https://aladdin-email.pages.dev/assets/hero-catering.jpg">
      <div class="reward-lock">
        <div class="l1">FAMILY</div><div class="l2">MEALS</div><span class="tag">FEEDS 6+</span>
      </div>
    </div>
    <div class="sticker" style="left:26px; top:300px;">
      <svg viewBox="0 0 100 100"><polygon fill="#1B2A52" points="50,2 60,22 82,16 78,39 98,50 78,61 82,84 60,78 50,98 40,78 18,84 22,61 2,50 22,39 18,16 40,22"/></svg>
      <span class="label" style="color:#fff;">Feeds<br>6+</span>
    </div>
    <div class="panel pistachio">
      <p class="kicker">Feed the Whole Crew</p>
      <h2 class="anton">Family<br>Meals</h2>
      <p>Big Mediterranean platters made to share — kabobs, rice, dips, salads &amp; warm pita. Order online and your Fourth of July dinner is handled.</p>
      <a class="pill charcoal" href="https://order.toasttab.com/online/locations/f369dbe5-2054-4bd4-9682-9d59c52ccd2c/?utm_source=toast&utm_medium=email&utm_campaign=july-4th&utm_content=c_cta">Order Family Meals
        <svg class="sq" viewBox="0 0 40 16"><path d="M2 11 C 10 2, 16 14, 24 7 S 33 6, 37 8" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round"/><path d="M31 3 l7 5 -7 5" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="footer">
    <div class="nav"><a href="https://aladdinshouston.com/aladdin-montrose/?utm_source=toast&utm_medium=email&utm_campaign=july-4th&utm_content=footer_locations">Locations</a><a href="https://order.toasttab.com/online/locations/f369dbe5-2054-4bd4-9682-9d59c52ccd2c/?utm_source=toast&utm_medium=email&utm_campaign=july-4th&utm_content=footer_order">Order Now</a><a href="https://aladdinshouston.com/catering-online-order/?utm_source=toast&utm_medium=email&utm_campaign=july-4th&utm_content=footer_catering">Catering</a></div>
    <div class="big">ALADDIN</div>
    <div class="social"><a href="https://www.instagram.com/aladdinmediterranean">IG</a><a href="https://www.facebook.com/aladdinmediterranean">f</a></div>
    <div class="legal">
      ★★★★★ 4.6 from 2,894 Houston customers<br>
      You&rsquo;re receiving this because you ordered from Aladdin Mediterranean Cuisine.<br>
      Aladdin Mediterranean Cuisine · 912 Westheimer Rd, Houston, TX 77006<br>
      <a href="https://www.aladdinshouston.com/unsubscribe">Unsubscribe</a> &nbsp;·&nbsp; <a href="https://www.aladdinshouston.com/privacy-policy">Privacy Policy</a>
    </div>
  </div>

</div>
</body>
</html>