<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gift Decor</title>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
  </head>
  <body
    style="
      margin: 0;
      padding: 0;
      min-width: 100%;
      background-color: rgb(36, 3, 54);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
    "
  >
<center>
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td,
        p,
        a,
        h1,
        h2,
        h3 {
          font-family: Arial, Helvetica, sans-serif !important;
        }
      </style>
    <![endif]-->

    <!-- Email Container -->
    <table
      role="presentation"
      cellspacing="0"
      cellpadding="0"
      border="0"
      width="100%"
      style="max-width: 600px; margin: 0 auto; background-color: #ffffff"
    >
      <!-- Promotional Banner -->
      <tr>
        <td
          bgcolor="#FFD700"
          style="padding: 10px; text-align: center; color: #000000"
        >
          Get <strong>20% off</strong> now with code
          <strong>MightySave20</strong>!
        </td>
      </tr>

      <!-- Logo Section -->
      <tr>
        <td bgcolor="#663399" style="padding: 10px; text-align: center">
          <img
            src="acme_white.png"
            alt="Home Decor"
            style="color: #ffffff; max-width: 100px"
          />
        </td>
      </tr>

      <!-- Navigation Menu -->
      <tr>
        <td bgcolor="#000000" style="padding: 10px 0">
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td align="center" style="font-size: 14px">
                <a
                  href="#"
                  style="color: #ffffff; text-decoration: none; padding: 0 15px"
                  >Gifts</a
                >
                <a
                  href="#"
                  style="color: #ffffff; text-decoration: none; padding: 0 15px"
                  >Latest Arrivals</a
                >
                <a
                  href="#"
                  style="color: #ffffff; text-decoration: none; padding: 0 15px"
                  >Best Sellers</a
                >
                <a
                  href="#"
                  style="color: #ffffff; text-decoration: none; padding: 0 15px"
                  >Gift Ideas</a
                >
                <a
                  href="#"
                  style="color: #ffffff; text-decoration: none; padding: 0 15px"
                  >Discounts</a
                >
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Main Image -->
      <tr>
        <td style="padding: 0">
          <img
            src="happy-mug-ai.webp"
            alt="Mighty Happy Mug"
            width="600"
            style="width: 100%; max-width: 600px; height: auto; display: block"
          />
        </td>
      </tr>

      <!-- Heading -->
      <tr>
        <td bgcolor="#000000" style="padding: 40px 20px; text-align: center">
          <h1
            style="margin: 0; color: #ffffff; font-size: 56px; line-height: 1.2"
          >
            Mighty gifts for<br />your loved one
          </h1>
        </td>
      </tr>

      <!-- Text and Promo Code -->
      <tr>
        <td bgcolor="#000000" style="padding: 0 50px 40px; text-align: center">
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <!-- Left Text -->
              <td
                width="47%"
                style="
                  color: #ffffff;
                  font-size: 16px;
                  text-align: left;
                  padding-right: 15px;
                  line-height: 1.5;
                "
              >
                This is a season for enjoyment and meaningful gift.
              </td>

              <!-- Centered Vertical Line -->
              <td width="6%" style="vertical-align: middle">
                <div
                  style="
                    width: 1px;
                    background-color: #333333;
                    height: 40px;
                    margin: 0 auto;
                  "
                ></div>
              </td>

              <!-- Right Text with Promo Code -->
              <td
                width="47%"
                style="
                  color: #ffffff;
                  font-size: 16px;
                  text-align: left;
                  padding-left: 15px;
                "
              >
                Use this code — <br />
                <span
                  style="
                    color: #ff69b4;
                    font-weight: bold;
                    font-size: 20px;
                    line-height: 1.5;
                  "
                  >MightySave2025100</span
                >
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Mighty Ghost Mug Product Section -->
      <tr>
        <td style="padding: 0">
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <!-- Product Image -->
              <td width="50%" style="padding: 0">
                <img
                  src="cupcake-ai-gen.webp"
                  alt="Mighty Ghost Mug"
                  width="300"
                  style="
                    width: 100%;
                    max-width: 300px;
                    height: auto;
                    display: block;
                  "
                />
              </td>

              <!-- Product Description -->
              <td width="50%" bgcolor="#663399" style="padding: 30px">
                <h2 style="margin: 0 0 15px 0; color: #ffffff; font-size: 24px">
                  Mighty Ghost Mug
                </h2>
                <p
                  style="
                    margin: 0;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 1.4;
                    opacity: 0.8;
                  "
                >
                  No Halloween is complete without a bold black cat! It can hold
                  a generous amount of hot cocoa
                </p>
                <div style="margin-top: 20px">
                  <a
                    href="#"
                    style="
                      background: #ffd700;
                      color: #000000;
                      text-decoration: none;
                      padding: 12px 16px;
                      border-radius: 4px;
                      font-size: 15px;
                      display: inline-block;
                    "
                    >Explore Category</a
                  >
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Mighty Chocolate Product Section -->
      <tr>
        <td style="padding: 0">
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <!-- Product Description -->
              <td width="50%" bgcolor="#000000" style="padding: 30px">
                <h2 style="margin: 0 0 15px 0; color: #ffffff; font-size: 24px">
                  Mighty Chocolate
                </h2>
                <p
                  style="
                    margin: 0;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 1.4;
                    opacity: 0.8;
                  "
                >
                  Kids adore chocolates, and when it's crafted just for them,
                  they enjoy it even more!
                </p>
                <div style="margin-top: 20px">
                  <a
                    href="#"
                    style="
                      background: #ffd700;
                      color: #000000;
                      text-decoration: none;
                      padding: 12px 16px;
                      border-radius: 4px;
                      font-size: 15px;
                      display: inline-block;
                    "
                    >Place Custom Order</a
                  >
                </div>
              </td>

              <!-- Product Image -->
              <td width="50%" style="padding: 0">
                <img
                  src="cupcake-ai-gen.webp"
                  alt="Mighty Ghost Mug"
                  width="300"
                  style="
                    width: 100%;
                    max-width: 300px;
                    height: auto;
                    display: block;
                  "
                />
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Mighty Candles Product Section -->
      <tr>
        <td style="padding: 0">
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <!-- Product Image -->
              <td width="50%" style="padding: 0">
                <img
                  src="candle-decor-ai.webp"
                  alt="Candles"
                  width="300"
                  style="
                    width: 100%;
                    max-width: 300px;
                    height: auto;
                    display: block;
                  "
                />
              </td>

              <!-- Product Description -->
              <td width="50%" bgcolor="#663399" style="padding: 30px">
                <h2 style="margin: 0 0 15px 0; color: #ffffff; font-size: 24px">
                  Mighty Candles
                </h2>
                <p
                  style="
                    margin: 0;
                    color: #ffffff;
                    font-size: 16px;
                    line-height: 1.4;
                    opacity: 0.8;
                  "
                >
                  Adorable candles serve as a stunning centerpiece for New
                  Year's Eve.
                </p>
                <div style="margin-top: 20px">
                  <a
                    href="#"
                    style="
                      background: #ffd700;
                      color: #000000;
                      text-decoration: none;
                      padding: 12px 16px;
                      border-radius: 4px;
                      font-size: 15px;
                      display: inline-block;
                    "
                    >Explore Scents</a
                  >
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Company Logos Section -->
      <tr>
        <td style="padding: 40px 0px; background-color: #000000">
          <div style="text-align: center">
            <img
              src="acme_white.png"
              alt="acme"
              style="height: 30px; margin: 0 15px; vertical-align: middle"
            />
            <img
              src="acme_white.png"
              alt="acme"
              style="height: 30px; margin: 0 15px; vertical-align: middle"
            />
            <img
              src="acme_white.png"
              alt="acme"
              style="height: 30px; margin: 0 15px; vertical-align: middle"
            />
            <img
              src="acme_white.png"
              alt="acme"
              style="height: 30px; margin: 0 15px; vertical-align: middle"
            />
            <img
              src="acme_white.png"
              alt="acme"
              style="height: 30px; margin: 0 15px; vertical-align: middle"
            />
          </div>
          <div
            style="height: 1px; background-color: #333333; margin: 40px 0"
          ></div>
        </td>
      </tr>

      <!-- Why Choose Us Section -->
      <tr>
        <td
          style="
            padding: 0 20px 60px;
            background-color: #000000;
            text-align: center;
          "
        >
          <h2 style="color: #ffffff; font-size: 36px; margin: 0 0 40px">
            Why choose us?
          </h2>

          <!-- Review Card -->
          <div
            style="
              background-color: #ffffff;
              padding: 30px;
              max-width: 400px;
              margin: 0 auto;
            "
          >
            <!-- Star Rating -->
            <div style="margin-bottom: 20px">
              <img
                src="pink-star.svg"
                alt="★"
                style="height: 20px; margin: 0 2px"
              />
              <img
                src="pink-star.svg"
                alt="★"
                style="height: 20px; margin: 0 2px"
              />
              <img
                src="pink-star.svg"
                alt="★"
                style="height: 20px; margin: 0 2px"
              />
              <img
                src="pink-star.svg"
                alt="★"
                style="height: 20px; margin: 0 2px"
              />
              <img
                src="pink-star.svg"
                alt="★"
                style="height: 20px; margin: 0 2px"
              />
            </div>

            <h3 style="font-size: 24px; margin: 0 0 15px">
              The perfect gift ever!
            </h3>

            <p
              style="
                font-size: 16px;
                line-height: 1.5;
                color: #666666;
                margin: 0 0 20px;
              "
            >
              Adorable! I'm thrilled with the quality of this product. I
              absolutely love it. I wish I hadn't ordered it during the hot
              weather, as it did melt slightly, but it's hardly noticeable.
            </p>

            <p style="font-size: 16px; font-weight: bold; margin: 0">
              John Doe, Designer
            </p>
          </div>

          <!-- Trustpilot Rating -->
          <div style="margin-top: 30px">
            <span
              style="color: #ffffff; font-size: 14px; vertical-align: middle"
              >Excellent</span
            >
            <img
              src="green-star.svg"
              alt="★"
              style="height: 18px; vertical-align: middle; margin-left: 5px"
            />
            <img
              src="green-star.svg"
              alt="★"
              style="height: 18px; vertical-align: middle"
            />
            <img
              src="green-star.svg"
              alt="★"
              style="height: 18px; vertical-align: middle"
            />
            <img
              src="green-star.svg"
              alt="★"
              style="height: 18px; vertical-align: middle"
            />
            <img
              src="green-star.svg"
              alt="★"
              style="height: 18px; vertical-align: middle"
            />
            <span
              style="
                color: #ffffff;
                font-size: 14px;
                margin-left: 10px;
                vertical-align: middle;
              "
            >
              420 reviews on Mypilot
            </span>
          </div>
        </td>
      </tr>

      <tr>
        <td style="height: 1px; background-color: #333333; margin: 40px 0"></td>
      </tr>

      <!-- Social Media Section -->
      <tr>
        <td
          style="
            padding: 40px 20px;
            background-color: #000000;
            text-align: center;
          "
        >
          <!-- Witch Hat Image -->
          <img
            src="magic-hat-ai.png"
            alt="Magic Hat"
            style="width: 120px; margin-bottom: 20px"
          />

          <!-- Follow Text -->
          <h2 style="color: #ffffff; font-size: 32px; margin: 0 0 10px">
            Follow us @acme_gift
          </h2>
          <p style="color: #ffffff; font-size: 16px; margin: 0 0 30px">
            Followed by 99K amazing people
          </p>

          <!-- Image Grid -->
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <td style="padding: 0 10px">
                <img
                  src="candle-decor-ai.webp"
                  alt="Gift Box"
                  style="width: 100%; max-width: 180px; height: auto"
                />
              </td>
              <td style="padding: 0 10px">
                <img
                  src="cupcake-ai-gen.webp"
                  alt="Romantic Gift"
                  style="width: 100%; max-width: 180px; height: auto"
                />
              </td>
              <td style="padding: 0 10px">
                <img
                  src="candle-decor-ai.webp"
                  alt="Candle Gift"
                  style="width: 100%; max-width: 180px; height: auto"
                />
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <!-- Logo -->
      <tr>
        <td
          style="
            padding: 0 20px 20px;
            background-color: #000000;
            text-align: center;
          "
        >
          <img src="acme_white.png" alt="Acme" style="width: 150px" />
        </td>
      </tr>

      <!-- Footer Links -->
      <tr>
        <td
          style="
            padding: 0 20px 20px;
            background-color: #000000;
            text-align: center;
          "
        >
          <p style="margin: 0 0 20px">
            <a
              href="#"
              style="color: #ffffff; text-decoration: none; padding: 0 10px"
              >Support</a
            >
            <a
              href="#"
              style="color: #ffffff; text-decoration: none; padding: 0 10px"
            >
              Returns</a
            >
            <a
              href="#"
              style="color: #ffffff; text-decoration: none; padding: 0 10px"
              >FAQs</a
            >
            <a
              href="#"
              style="color: #ffffff; text-decoration: none; padding: 0 10px"
              >Privacy Policy</a
            >
          </p>

          <!-- Social Icons -->
          <p style="margin: 0 0 30px">
            <a href="#" style="display: inline-block; margin: 0 10px">
              <img
                src="https://img.icons8.com/?size=100&id=32292&format=png&color=ffffff"
                alt="Instagram"
                width="24"
                height="24"
                style="display: block"
              />
            </a>
            <a href="#" style="display: inline-block; margin: 0 10px">
              <img
                src="https://img.icons8.com/?size=100&id=437&format=png&color=ffffff"
                alt="Twitter icon"
                width="24"
                height="24"
              />
            </a>
            <a href="#" style="display: inline-block; margin: 0 10px">
              <img
                src="https://img.icons8.com/?size=100&id=37325&format=png&color=ffffff"
                alt="YouTube"
                width="24"
                height="24"
                style="display: block"
              />
            </a>
          </p>

          <div
            style="height: 1px; background-color: #333333; margin: 40px 0"
          ></div>

          <!-- Address and Footer Links Container -->
          <table
            role="presentation"
            width="100%"
            border="0"
            cellspacing="0"
            cellpadding="0"
            style="padding: 0 40px"
          >
            <tr>
              <td width="45%" align="left" style="vertical-align: top">
                <p
                  style="
                    color: #ffffff;
                    font-size: 14px;
                    margin: 0;
                    line-height: 1.6;
                  "
                >
                  4909 Xyzabc Dr.<br />
                  Mydeson, California 92938, USA
                </p>
              </td>
              <td width="10%" style="vertical-align: middle">
                <div
                  style="
                    width: 1px;
                    height: 40px;
                    background-color: #333333;
                    margin: 0 auto;
                  "
                ></div>
              </td>
              <td width="45%" align="left" style="vertical-align: middle">
                <p style="margin: 0">
                  <a
                    href="#"
                    style="
                      color: #ffffff;

                      font-size: 14px;
                      padding: 0 10px;
                    "
                    >Manage Preferences</a
                  >
                  <a
                    href="#"
                    style="
                      color: #ffffff;

                      font-size: 14px;
                      padding: 0 10px;
                    "
                    >Unsubscribe</a
                  >
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>
