Paste anything — we do the rest
Subject
Template
Content
Files & Images
Instructions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Spring Celebration at School</title>
</head>
<body style="margin:0;background:#ccfbf1;font-family:sans-serif">
<table width="600" align="center" cellpadding="0" cellspacing="0"
style="margin:32px auto;border-radius:16px;overflow:hidden">
<!-- Header -->
<tr><td style="background:#1c1917;padding:16px 20px">
<p style="color:#d6d3d1;font-size:9px;font-weight:700;text-transform:
uppercase;letter-spacing:.25em;margin:0 0 6px">Your brand header</p>
<p style="color:#fff;font-size:22px;font-weight:600;
font-family:Georgia,serif;margin:0;line-height:1.2">
Spring Celebration at School
</p>
</td></tr>
<!-- Body -->
<tr><td style="background:rgba(35,148,136,.31);padding:20px">
<p style="font-size:13px;color:#1c1917;line-height:1.65;margin:0 0 16px">
<strong>Dear Colleagues,</strong><br />
this is an email. A very fancy one.<br />
Our customers think it looks:
</p>
<img src="header-mockup.jpg" width="560"
style="width:100%;height:180px;object-fit:cover;object-position:0% 30%;
border-radius:12px;display:block;margin:0 0 16px" />
<p style="font-size:13px;font-weight:600;color:#1c1917;margin:0 0 10px">
The boss says:
</p>
<table cellpadding="0" cellspacing="0" style="margin:0 0 16px">
<tr>
<td style="width:44px;vertical-align:middle">
<img src="chris-klein.jpg" width="44" height="44"
style="border-radius:50%;display:block;
outline:2px solid #fff;object-fit:cover" />
</td>
<td style="padding-left:12px;vertical-align:middle">
<div style="height:7px;border-radius:99px;background:rgba(255,255,255,.7);
width:240px;margin-bottom:6px"></div>
<div style="height:7px;border-radius:99px;background:rgba(255,255,255,.7);
width:280px;margin-bottom:6px"></div>
<div style="height:7px;border-radius:99px;background:rgba(255,255,255,.7);
width:210px"></div>
</td>
</tr>
</table>
<hr style="border:none;border-top:1px solid rgba(255,255,255,.3);margin:0 0 16px" />
<p style="font-size:13px;font-weight:600;color:#1c1917;margin:0 0 10px">
A completely irrelevant chart:
</p>
<div style="background:rgba(255,255,255,.3);border-radius:12px;
padding:10px 12px;margin:0 0 16px;display:flex;
align-items:flex-end;gap:5px;height:80px">
<div style="flex:1;border-radius:3px;background:#5eead4;height:40%"></div>
<div style="flex:1;border-radius:3px;background:#2dd4bf;height:70%"></div>
<div style="flex:1;border-radius:3px;background:#14b8a6;height:50%"></div>
<div style="flex:1;border-radius:3px;background:#0d9488;height:95%"></div>
<div style="flex:1;border-radius:3px;background:#14b8a6;height:62%"></div>
<div style="flex:1;border-radius:3px;background:#2dd4bf;height:80%"></div>
<div style="flex:1;border-radius:3px;background:#5eead4;height:42%"></div>
</div>
<hr style="border:none;border-top:1px solid rgba(255,255,255,.3);margin:0 0 16px" />
<p style="font-size:13px;font-weight:600;color:#1c1917;margin:0 0 12px">
Marketing has extreeemly important news:
</p>
<div style="text-align:center;padding:8px 0 12px">
<a href="#"
style="display:inline-block;background:#1c1917;color:#fff;
border-radius:99px;padding:8px 22px;font-size:12px;
font-weight:600;text-decoration:none">Subscribe</a>
<p style="font-size:9px;color:#78716c;margin:6px 0 0">
You can unsubscribe at any time.
</p>
</div>
</td></tr>
<!-- Footer -->
<tr><td style="background:rgba(35,148,136,.31);
border-top:1px solid rgba(255,255,255,.2);
padding:12px 20px">
<p style="font-size:10px;color:#57534e;margin:0">
Branded footer · contact info · links
</p>
</td></tr>
</table>
</body></html>