<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Shopping Deals Emailer | Email template</title>
    <meta
      name="description"
      content="Highlight your best deals and offers with this stylish email template."
    />
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: "Segoe UI", Arial, sans-serif !important;
        }
      </style>
    <![endif]-->
  </head>
  <body style="margin: 0; padding: 0; background-color: #bbfea8">
	<center>
    <table
      cellpadding="0"
      cellspacing="0"
      border="0"
      width="100%"
      style="max-width: 600px; margin: 0 auto; background-color: #bbfea8"
    >
      <tr>
        <td align="center">
          <!-- Email Content Container -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            bgcolor="#1e1e1e"
            style="padding: 20px"
          >
            <!-- Logo Section -->
            <tr>
              <td align="center" style="padding: 0 20px 40px">
                <img
                  src="acme_white.png"
                  alt="Acme"
                  style="display: block; width: 120px; max-width: 100%"
                />
              </td>
            </tr>

            <!-- Main Content Section -->
            <tr>
              <td>
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <!-- Left Content (Text) -->
                    <td
                      width="40%"
                      style="padding: 20px; vertical-align: middle"
                    >
                      <h1
                        style="
                          font-family: Arial, sans-serif;
                          color: #ffffff;
                          font-size: 24px;
                          margin: 0;
                          padding: 0;
                        "
                      >
                        CYBER MONDAY
                      </h1>
                      <div
                        style="
                          font-family: Arial, sans-serif;
                          color: #7cff64;
                          font-size: 110px;
                          font-weight: bold;
                          line-height: 1;
                        "
                      >
                        40%
                      </div>
                      <div
                        style="
                          font-family: Arial, sans-serif;
                          color: #ffffff;
                          font-size: 110px;
                          font-weight: bold;
                          margin-top: -20px;
                          line-height: 1;
                        "
                      >
                        OFF
                      </div>
                    </td>
                    <!-- Right Content (Image) -->
                    <td width="60%" style="vertical-align: top">
                      <img
                        src="shoe-graphic.png"
                        alt="Nike Sports Shoe"
                        style="
                          display: block;
                          width: 100%;
                          max-width: 300px;
                          height: auto;
                        "
                      />
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- CTA Button Section -->
            <tr>
              <td align="center" style="padding: 40px 20px 60px">
                <table cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td
                      align="center"
                      style="background-color: #ffffff; padding: 10px 20px"
                    >
                      <a
                        href="#"
                        style="
                          font-family: Arial, sans-serif;
                          font-size: 14px;
                          color: #1e1e1e;
                          text-decoration: none;
                          display: inline-block;
                        "
                      >
                        SHOP NOW
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Special Offers Section -->
            <tr>
              <td align="center" style="padding: 20px">
                <h2
                  style="
                    font-family: Arial, sans-serif;
                    color: #ffffff;
                    font-size: 32px;
                    margin: 0 0 40px 0;
                    font-weight: 500;
                  "
                >
                  SPECIAL OFFERS
                </h2>
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <!-- First Row -->
                    <td width="50%" style="padding: 5px">
                      <div
                        style="
                          background-color: #2a2a2a;
                          border-radius: 12px;
                          padding: 20px;
                        "
                      >
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #7cff64;
                            font-size: 18px;
                            margin: 0 0 10px 0;
                          "
                        >
                          15% OFF
                        </p>

                        <img
                          src="shoe-graphic.png"
                          alt="Nike K-5000"
                          style="
                            display: block;
                            width: 180px;
                            margin: -20px auto 0;
                          "
                        />
                        <h3
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 20px;
                            margin: 10px 0 5px 0;
                          "
                        >
                          Nike K-5000
                        </h3>
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 18px;
                            margin: 0;
                          "
                        >
                          $80
                        </p>
                      </div>
                    </td>
                    <td width="50%" style="padding: 5px">
                      <div
                        style="
                          background-color: #2a2a2a;
                          border-radius: 12px;
                          padding: 20px;
                        "
                      >
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #7cff64;
                            font-size: 18px;
                            margin: 0 0 10px 0;
                          "
                        >
                          25% OFF
                        </p>
                        <img
                          src="shoe-graphic.png"
                          alt="Puma"
                          style="
                            display: block;
                            width: 180px;
                            margin: -20px auto 0;
                          "
                        />
                        <h3
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 20px;
                            margin: 10px 0 5px 0;
                          "
                        >
                          Puma
                        </h3>
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 18px;
                            margin: 0;
                          "
                        >
                          $35
                        </p>
                      </div>
                    </td>
                  </tr>
                  <!-- Second Row -->
                  <tr>
                    <td width="50%" style="padding: 5px">
                      <div
                        style="
                          background-color: #2a2a2a;
                          border-radius: 12px;
                          padding: 20px;
                        "
                      >
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #7cff64;
                            font-size: 18px;
                            margin: 0 0 10px 0;
                          "
                        >
                          20% OFF
                        </p>
                        <img
                          src="shoe-graphic.png"
                          alt="Adidas"
                          style="
                            display: block;
                            width: 180px;
                            margin: -20px auto 0;
                          "
                        />
                        <h3
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 20px;
                            margin: 10px 0 5px 0;
                          "
                        >
                          Adidas
                        </h3>
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 18px;
                            margin: 0;
                          "
                        >
                          $70
                        </p>
                      </div>
                    </td>
                    <td width="50%" style="padding: 5px">
                      <div
                        style="
                          background-color: #2a2a2a;
                          border-radius: 12px;
                          padding: 20px;
                        "
                      >
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #7cff64;
                            font-size: 18px;
                            margin: 0 0 10px 0;
                          "
                        >
                          30% OFF
                        </p>
                        <img
                          src="shoe-graphic.png"
                          alt="Nikeeee"
                          style="
                            display: block;
                            width: 180px;
                            margin: -20px auto 0;
                          "
                        />
                        <h3
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 20px;
                            margin: 10px 0 5px 0;
                          "
                        >
                          Nikeeee
                        </h3>
                        <p
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 18px;
                            margin: 0;
                          "
                        >
                          $85
                        </p>
                      </div>
                    </td>
                  </tr>
                </table>
                <!-- View More Button -->
                <div style="margin-top: 40px">
                  <a
                    href="#"
                    style="
                      font-family: Arial, sans-serif;
                      color: #ffffff;
                      font-size: 14px;
                      text-decoration: none;
                      border: 1px solid #ffffff;
                      padding: 10px 20px;
                      display: inline-block;
                    "
                    >VIEW MORE</a
                  >
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- Shop By Label Section -->
      <tr>
        <td
          align="center"
          style="padding: 40px 20px; background-color: #e8f4e8"
        >
          <h2
            style="
              font-family: Arial, sans-serif;
              color: #1e1e1e;
              font-size: 32px;
              margin: 0 0 40px 0;
              font-weight: 500;
            "
          >
            SHOP BY LABEL
          </h2>
          <!-- First Row - 3 Equal Columns -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="table-layout: fixed"
          >
            <tr>
              <td style="padding: 5px">
                <div
                  style="
                    background-color: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                  "
                >
                  <img
                    src="acme.png"
                    alt="acme logo"
                    style="display: block; width: 100%"
                  />
                </div>
              </td>
              <td style="padding: 5px">
                <div
                  style="
                    background-color: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                  "
                >
                  <img
                    src="acme.png"
                    alt="acme logo"
                    style="display: block; width: 100%"
                  />
                </div>
              </td>
              <td style="padding: 5px">
                <div
                  style="
                    background-color: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                  "
                >
                  <img
                    src="acme.png"
                    alt="acme logo"
                    style="display: block; width: 100%"
                  />
                </div>
              </td>
            </tr>
          </table>

          <!-- Second Row - 2 Equal Columns -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="table-layout: fixed"
          >
            <tr>
              <td style="padding: 5px; width: 50%">
                <div
                  style="
                    background-color: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                  "
                >
                  <img
                    src="acme.png"
                    alt="acme logo"
                    style="display: block; width: 100%"
                  />
                </div>
              </td>
              <td style="padding: 5px; width: 50%">
                <div
                  style="
                    background-color: #ffffff;
                    padding: 20px;
                    border-radius: 8px;
                  "
                >
                  <img
                    src="acme.png"
                    alt="acme logo"
                    style="display: block; width: 100%"
                  />
                </div>
              </td>
            </tr>
          </table>

          <!-- View More Button -->
          <div style="margin-top: 40px">
            <a
              href="#"
              style="
                font-family: Arial, sans-serif;
                color: #1e1e1e;
                font-size: 14px;
                text-decoration: none;
                border: 2px solid #1e1e1e;
                padding: 10px 20px;
                display: inline-block;
                text-transform: uppercase;
                background-color: transparent;
                border-radius: 4px;
              "
            >
              View More
            </a>
          </div>
        </td>
      </tr>
      <!-- Shop By Categories Section -->
      <tr>
        <td
          align="center"
          style="padding: 60px 20px; background-color: #ffffff"
        >
          <h2
            style="
              font-family: Arial, sans-serif;
              color: #1e1e1e;
              font-size: 36px;
              margin: 0 0 40px 0;
              text-transform: uppercase;
              letter-spacing: 1px;
              font-weight: 500;
            "
          >
            Shop By Categories
          </h2>

          <!-- Categories Grid -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="max-width: 600px"
          >
            <tr>
              <!-- Three equal columns for categories -->
              <td width="33.33%" style="padding: 5px">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td style="background-color: #f5f5f5; border-radius: 8px">
                      <h3
                        style="
                          font-family: Arial, sans-serif;
                          color: #666666;
                          font-size: 20px;
                          margin: 0 0 60px 0;
                          text-align: left;
                          padding: 20px 20px 0;
                        "
                      >
                        RUNNING
                      </h3>
                      <img
                        src="shoe-ai-gen.png"
                        alt="Running Shoe"
                        style="
                          display: block;
                          width: 100%;
                          max-width: 160px;
                          height: auto;
                          margin: 0 auto;
                          transform: rotate(-15deg) translate(10px, 0);
                        "
                      />
                    </td>
                  </tr>
                </table>
              </td>

              <td width="33.33%" style="padding: 5px">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td style="background-color: #f5f5f5; border-radius: 8px">
                      <h3
                        style="
                          font-family: Arial, sans-serif;
                          color: #666666;
                          font-size: 20px;
                          margin: 0 0 60px 0;
                          text-align: left;
                          padding: 20px 20px 0;
                        "
                      >
                        LIFESTYLE
                      </h3>
                      <img
                        src="shoe-ai-gen.png"
                        alt="Lifestyle Shoe"
                        style="
                          display: block;
                          width: 100%;
                          max-width: 160px;
                          height: auto;
                          margin: 0 auto;
                          transform: rotate(-15deg) translate(10px, 0);
                        "
                      />
                    </td>
                  </tr>
                </table>
              </td>

              <td width="33.33%" style="padding: 5px">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td style="background-color: #f5f5f5; border-radius: 8px">
                      <h3
                        style="
                          font-family: Arial, sans-serif;
                          color: #666666;
                          font-size: 20px;
                          margin: 0 0 60px 0;
                          text-align: left;
                          font-weight: bold;
                          padding: 20px 20px 0;
                        "
                      >
                        TRAINER
                      </h3>
                      <img
                        src="shoe-ai-gen.png"
                        alt="Trainer Shoe"
                        style="
                          display: block;
                          width: 100%;
                          max-width: 160px;
                          height: auto;
                          margin: 0 auto;
                          transform: rotate(-15deg) translate(10px, 0);
                        "
                      />
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>

          <!-- View All Button -->
          <div style="margin-top: 40px">
            <table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td
                  align="center"
                  style="background-color: #1e1e1e; padding: 12px 24px"
                >
                  <a
                    href="#"
                    style="
                      font-family: Arial, sans-serif;
                      color: #ffffff;
                      font-size: 14px;
                      text-decoration: none;
                      text-transform: uppercase;
                      display: inline-block;
                    "
                  >
                    View All
                  </a>
                </td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
      <!-- Recent Posts Section -->
      <tr>
        <td
          align="center"
          style="padding: 60px 20px; background-color: #1e1e1e"
        >
          <!-- Section Title -->
          <h2
            style="
              font-family: Arial, sans-serif;
              color: #ffffff;
              font-size: 32px;
              margin: 0 0 40px 0;
              text-transform: uppercase;
              letter-spacing: 1px;
              font-weight: 500;
            "
          >
            Recent Posts
          </h2>

          <!-- Posts Container -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="max-width: 600px"
          >
            <tr>
              <!-- Left Post -->
              <td
                width="50%"
                align="left"
                style="padding: 5px; vertical-align: top"
              >
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td
                      style="
                        background-color: #27272c;
                        border-radius: 8px;
                        padding: 15px;
                      "
                    >
                      <!-- Post Image -->
                      <img
                        src="shoe-ai-gen.png"
                        alt="Upcoming Release Sneakers"
                        style="
                          display: block;
                          width: 100%;
                          max-width: 100%;
                          height: auto;
                          border-radius: 4px;
                        "
                      />

                      <!-- Post Title -->
                      <h3
                        style="
                          font-family: Arial, sans-serif;
                          color: #ffffff;
                          font-size: 24px;
                          margin: 20px 0 10px 0;
                          line-height: 1.2;
                        "
                      >
                        Upcoming Release Sneak Peek
                      </h3>

                      <!-- Post Description -->
                      <p
                        style="
                          font-family: Arial, sans-serif;
                          color: #a0a0a0;
                          font-size: 14px;
                          line-height: 1.4;
                          margin: 0 0 20px 0;
                        "
                      >
                        Be among the first to see next year's essential
                        sneakers! We're offering you an exclusive look at the
                        new styles...
                      </p>

                      <!-- Read More Button -->
                      <div
                        style="
                          border: 1px solid #ffffff;
                          padding: 12px 25px;
                          text-align: center;
                          display: inline-block; /* Changed to inline-block */
                        "
                      >
                        <a
                          href="#"
                          style="
                            font-family: Arial, sans-serif;
                            color: #ffffff;
                            font-size: 14px;
                            text-decoration: none;
                            text-transform: uppercase;
                            display: inline-block;
                          "
                        >
                          Read More
                        </a>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>

              <!-- Right Post -->
              <td
                width="50%"
                align="left"
                style="padding: 5px; vertical-align: top"
              >
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tr>
                    <td
                      style="
                        background-color: #27272c;
                        border-radius: 8px;
                        padding: 15px;
                      "
                    >
                      <!-- Post Image -->
                      <img
                        src="shoe-ai-gen.png"
                        alt="Most Wanted Sneakers"
                        style="
                          display: block;
                          width: 100%;
                          max-width: 100%;
                          height: auto;
                          border-radius: 4px;
                        "
                      />

                      <!-- Post Title -->
                      <h3
                        style="
                          font-family: Arial, sans-serif;
                          color: #ffffff;
                          font-size: 24px;
                          margin: 20px 0 10px 0;
                          line-height: 1.2;
                        "
                      >
                        This Week's Most Wanted Picks
                      </h3>

                      <!-- Post Description -->
                      <p
                        style="
                          font-family: Arial, sans-serif;
                          color: #a0a0a0;
                          font-size: 14px;
                          line-height: 1.4;
                          margin: 0 0 20px 0;
                        "
                      >
                        Discover the styles our community loves this December.
                        Including user reviews and tips...
                      </p>

                      <!-- Read More Button -->
                      <a
                        href="#"
                        style="
                          display: inline-block;
                          border: 1px solid #ffffff;
                          padding: 12px 25px;
                          font-family: Arial, sans-serif;
                          color: #ffffff;
                          font-size: 14px;
                          text-decoration: none;
                          text-transform: uppercase;
                        "
                      >
                        Read More
                      </a>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- Discover Section -->
      <tr>
        <td
          align="center"
          style="padding: 60px 20px; background-color: #e4f0e8"
        >
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="max-width: 600px"
          >
            <tr>
              <!-- Left Image Column -->
              <td
                width="20%"
                align="left"
                style="vertical-align: top; padding-right: 2px"
              >
                <img
                  src="shoe-ai-gen.png"
                  alt="Sports Shoe"
                  style="
                    display: block;
                    width: 100%;
                    max-width: 120px;
                    height: auto;
                    transform: scaleX(-1) rotate(-25deg);
                  "
                />
              </td>

              <!-- Center Content Column -->
              <td width="60%" align="center" style="vertical-align: top">
                <h2
                  style="
                    font-family: Arial, sans-serif;
                    color: #1e1e1e;
                    font-size: 52px;
                    line-height: 1.2;
                    margin: 0 0 15px 0;
                    text-transform: uppercase;
                    font-weight: 500;
                  "
                >
                  Uncover<br />The Right<br />Footwear
                </h2>

                <p
                  style="
                    font-family: Arial, sans-serif;
                    color: #666666;
                    font-size: 16px;
                    line-height: 1.4;
                    margin: 0 0 20px 0;
                  "
                >
                  Numerous athletes have revealed their<br />preferred shoes for
                  running,<br />weightlifting, or basketball.
                </p>

                <p
                  style="
                    font-family: Arial, sans-serif;
                    color: #666666;
                    font-size: 16px;
                    line-height: 1.4;
                    margin: 0 0 25px 0;
                  "
                >
                  Explore their top picks & find perfect fit.
                </p>

                <table cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td
                      align="center"
                      style="background-color: #1e1e1e; padding: 12px 30px"
                    >
                      <a
                        href="#"
                        style="
                          font-family: Arial, sans-serif;
                          color: #ffffff;
                          font-size: 14px;
                          text-decoration: none;
                          text-transform: uppercase;
                          display: inline-block;
                        "
                      >
                        View Collection
                      </a>
                    </td>
                  </tr>
                </table>
              </td>

              <!-- Right Image Column -->
              <td
                width="20%"
                align="right"
                style="vertical-align: top; padding-left: 2px"
              >
                <img
                  src="shoe-ai-gen.png"
                  alt="Sports Shoe"
                  style="
                    display: block;
                    width: 100%;
                    max-width: 120px;
                    height: auto;
                    transform: rotate(-25deg);
                  "
                />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <!-- Footer Section -->
      <tr>
        <td
          align="center"
          style="padding: 60px 20px; background-color: #1e1e1e"
        >
          <!-- Logo -->
          <img
            src="acme_white.png"
            alt="Acme"
            style="
              display: block;
              width: 200px;
              max-width: 100%;
              margin-bottom: 30px;
            "
          />

          <!-- Navigation Links -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            style="margin-bottom: 30px"
          >
            <tr>
              <td>
                <a
                  href="#"
                  style="
                    font-family: Arial, sans-serif;
                    color: #a6a6a6;
                    font-size: 20px;
                    text-decoration: none;
                    padding: 0 15px;
                    text-decoration: underline;
                  "
                  >VIEW ALL</a
                >
              </td>
              <td>
                <a
                  href="#"
                  style="
                    font-family: Arial, sans-serif;
                    color: #a6a6a6;
                    font-size: 20px;
                    text-decoration: none;
                    padding: 0 15px;
                    text-decoration: underline;
                  "
                  >NEW ARRIVALS</a
                >
              </td>
              <td>
                <a
                  href="#"
                  style="
                    font-family: Arial, sans-serif;
                    color: #a6a6a6;
                    font-size: 20px;
                    text-decoration: none;
                    padding: 0 15px;
                    text-decoration: underline;
                  "
                  >OFFERS</a
                >
              </td>
              <td>
                <a
                  href="#"
                  style="
                    font-family: Arial, sans-serif;
                    color: #a6a6a6;
                    font-size: 20px;
                    text-decoration: none;
                    padding: 0 15px;
                    text-decoration: underline;
                  "
                  >BRANDS</a
                >
              </td>
            </tr>
          </table>

          <!-- Social Media Icons -->
          <table
            cellpadding="0"
            cellspacing="0"
            border="0"
            style="margin-bottom: 30px"
          >
            <tr>
              <td style="padding: 0 10px">
                <a href="#" style="text-decoration: none">
                  <img
                    src="https://img.icons8.com/?size=100&id=32292&format=png&color=ffffff"
                    alt="Instagram"
                    width="24"
                    height="24"
                    style="display: block"
                  />
                </a>
              </td>
              <td style="padding: 0 10px">
                <a href="#" style="text-decoration: none">
                  <img
                    src="https://img.icons8.com/?size=100&id=37325&format=png&color=ffffff"
                    alt="YouTube"
                    width="24"
                    height="24"
                    style="display: block"
                  />
                </a>
              </td>
            </tr>
          </table>

          <!-- Footer Text -->
          <p
            style="
              font-family: Arial, sans-serif;
              color: #a6a6a6;
              font-size: 14px;
              line-height: 1.6;
              margin: 0;
              text-align: center;
            "
          >
            Would you like to modify your email preferences? You can update your
            preferences
            <a href="#" style="color: #a6a6a6; text-decoration: underline"
              >here</a
            >
            or unsubscribe
            <a href="#" style="color: #a6a6a6; text-decoration: underline"
              >here</a
            >. View our privacy policy
            <a href="#" style="color: #a6a6a6; text-decoration: underline"
              >here</a
            >.
          </p>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>
