HTML_EmailEditor/index.html at main · kanaant/HTML_EmailEditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!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>MaquiFit — Make Wellness a Daily Ritual</title>
</head>

<body style="margin: 0; padding: 0; font-family: Georgia, 'Times New Roman', serif; background-color: #f8f5f0; color: #2d2d2d;">
  <!-- Preheader (hidden) -->
  <div style="display:none; font-size:1px; color:#f8f5f0; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
    Rose Hip made simple — plus 25% off your 2nd item + free shipping over $60.
  </div>

  <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f8f5f0;">
    <tr>
      <td align="center" style="padding: 24px 16px;">

        <table cellpadding="0" cellspacing="0" border="0" width="600" style="max-width: 600px; background-color: #ffffff; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">

          <!-- Header -->
          <tr>
            <td style="padding: 32px 24px; background-color: #ffffff;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                  <td align="left" valign="middle">
                    <img src="https://maquifit.ca/seasonal/images/logo.webp" alt="MaquiFit" width="140" style="width: 140px; max-width: 140px; display: block;">
                  </td>
                  <td align="right" valign="middle">
                    <p style="margin: 0; font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 2px;">JANUARY 2026</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Intro -->
          <tr>
            <td style="padding: 40px 32px 10px 32px;">
              <h1 style="margin: 0 0 8px 0; font-size: 28px; color: #1a472a; font-weight: normal; line-height: 1.3;">
                Make Wellness a Daily Ritual 🌞
              </h1>
              <p style="margin: 0; font-size: 16px; color: #b8860b; font-style: italic;">
                Small, mindful choices — repeated daily — create real change.
              </p>
            </td>
          </tr>

          <!-- Main Copy -->
           <tr>
            <td>
                 <img src="https://maquifit.ca/wp-content/uploads/rosehip-MFNL1.webp"
                   alt="Rose Hip Powder"
                   width="536"
                   style="width: 100%; max-width: 536px; display: block; border-radius: 12px; margin: 12px 0 14px 0; padding: 18px 32px 0 32px;">
            </td>
           </tr>
          <tr>

            <td style="padding: 18px 32px 0 32px;">
              <p style="margin: 0 0 16px 0; font-size: 17px; line-height: 1.7; color: #4b5563;">
                Hello,
              </p>

              <p style="margin: 0 0 16px 0; font-size: 17px; line-height: 1.7; color: #4b5563;">
                Wellness isn’t built overnight — it’s created through small, mindful choices made every day.
              </p>

              <!-- UPDATED paragraph with tea / yogurt / cereal + daily -->
              <p style="margin: 0 0 16px 0; font-size: 17px; line-height: 1.7; color: #4b5563;">
                <strong>Rose Hip</strong> is easy to integrate into your routine — stir it into a warm tea, blend it into a smoothie,
                sprinkle it into your yogurt, or add it on top of your cereal. Taken daily, these small moments become a simple ritual you can truly enjoy.
              </p>
            </td>
          </tr>

          <!-- Quote Block -->
          <tr>
            <td style="padding: 18px 32px 8px 32px;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-left: 4px solid #b8860b; background-color: #fdfbf7;">
                <tr>
                  <td style="padding: 18px 20px;">
                    <p style="margin: 0; font-size: 19px; font-style: italic; color: #1a472a; line-height: 1.5;">
                      “Take care of your body. It’s the only place you have to live.” — Jim Rohn
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Offer Card -->
          <tr>
            <td style="padding: 18px 24px 28px 24px;">
              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: linear-gradient(180deg, #2d0050 0%, #11001c 100%); border: 2px solid #b8860b; border-radius: 12px; overflow: hidden;">
                <tr>
                  <td style="padding: 26px; text-align: center;">
                    <p style="margin: 0 0 4px 0; font-size: 13px; color: #b8860b; text-transform: uppercase; letter-spacing: 2px;">
                      Limited-time perks
                    </p>
                    <h3 style="margin: 0 0 12px 0; font-size: 26px; color: #ffd700; font-weight: normal;">
                      Rose Hip Ritual ✨
                    </h3>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: rgba(0,0,0,0.3); border-radius: 8px; margin-bottom: 18px;">
                      <tr>
                        <td style="padding: 18px; text-align: left;">
                          <p style="margin: 0 0 10px 0; font-size: 15px; color: #f3f4f6;">
                            ✓ <strong style="color: #ffd700;">FREE shipping</strong> on orders of <strong>$60+</strong>
                          </p>
                          <p style="margin: 0 0 10px 0; font-size: 15px; color: #f3f4f6;">
                            ✓ <strong style="color: #ffd700;">25% OFF</strong> your <strong>2nd item</strong>
                          </p>
                          <p style="margin: 0; font-size: 15px; color: #f3f4f6;">
                            ✓ Stock up and build your daily ritual 💜
                          </p>
                        </td>
                      </tr>
                    </table>

                    <a href="https://maquifit.ca/shop/maquicacao-fr-supplements/poudre-de-rose-musquee-200g/"
                       style="display: inline-block; background: #b8860b; color: #ffffff; font-weight: 700; text-transform: uppercase; padding: 16px 30px; border-radius: 50px; text-decoration: none; font-size: 15px; font-family: Helvetica, Arial, sans-serif;">
                      Shop Rose Hip →
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Product Image (Bottom) -->
          <tr>
            <td style="padding: 0 32px 28px 32px;">
              <p style="margin: 0 0 12px 0; font-size: 16px; line-height: 1.6; color: #4b5563;">
                🌿 <strong>Your next step:</strong> keep it simple, keep it consistent — and let your daily habits do the work.
              </p>
              <p style="margin: 0; font-size: 15px; line-height: 1.7; color: #6b7280;">
                P.S. Your future self will thank you for the habits you build today 💜
              </p>
            </td>
          </tr>

          <!-- Closing -->
          <tr>
            <td style="padding: 0 32px 32px 32px;">
              <p style="margin: 0; font-size: 18px; color: #4b0082; font-style: italic;">
                Gratefully,<br>
                <span style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: #6b7280; font-style: normal;">The MaquiFit Team</span>
              </p>
            </td>
          </tr>

          <!-- Footer -->
          <tr>
            <td style="padding: 24px 32px; text-align: center;">
              <p style="margin: 0 0 8px 0; font-size: 14px; color: #6b7280; font-family: Helvetica, Arial, sans-serif;">
                <a href="https://maquifit.ca" style="color: #4b0082; text-decoration: none;">www.maquifit.ca</a>
                &nbsp;&nbsp;•&nbsp;&nbsp;
                <a href="https://instagram.com/maquifit" style="color: #4b0082; text-decoration: none;">@maquifit</a>
              </p>

            </td>
          </tr>

        </table>

      </td>
    </tr>
  </table>
</body>
</html>