The HTML behind it
Webinar ad template HTML
This is the whole template. The fields in double braces fill from your data on every render. Copy it into your account and change anything you like.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style data-thirds="base">
html,body{margin:0}
[data-thirds="canvas"]{position:relative;overflow:hidden}
[data-thirds="canvas"] [data-thirds]{position:absolute;box-sizing:border-box;margin:0}
[data-thirds="text"]{white-space:pre-wrap;overflow-wrap:anywhere}
[data-thirds="image"]{display:block}
[data-thirds="table"]{border-collapse:collapse}
[data-thirds="table"] th,[data-thirds="table"] td{padding:4px 6px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule,#dde1e8)}
[data-thirds="table"] th{background:var(--head,transparent)}
[data-thirds="list"]{display:flex;flex-direction:column}
[data-thirds="canvas"] [data-thirds="item"]{position:relative;flex:none}
</style>
<style>@page { size: 1080px 1080px; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="image" data-thirds-page="p1" data-thirds-name="Page 1" style="width:1080px;height:1080px;background:#1e1b4b">
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:70px;top:60px;width:940px;height:36px;font-size:24px;color:#c7d2fe;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="label" data-thirds-name="Label" style="left:70px;top:110px;width:940px;height:36px;font-size:24px;color:#a5b4fc;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ label }}</div>
<div data-thirds="text" data-thirds-id="title" data-thirds-name="Title" style="left:70px;top:170px;width:940px;height:230px;font-size:72px;color:#ffffff;font-weight:800;line-height:1.05;letter-spacing:-2px;" data-thirds-fit="shrink" data-thirds-min-font="34" data-thirds-max-font="72">{{ title }}</div>
<div data-thirds="box" data-thirds-id="date-box" data-thirds-name="Date box" style="left:70px;top:430px;width:940px;height:90px;background:#312e81;border-radius:18px"></div>
<div data-thirds="text" data-thirds-id="date-time" data-thirds-name="Date and time" style="left:100px;top:456px;width:880px;height:40px;font-size:30px;color:#ffffff;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="30">{{ date_time }}</div>
<div data-thirds="box" data-thirds-id="speaker-card-1" data-thirds-name="Speaker card 1" style="left:70px;top:560px;width:450px;height:260px;background:#ffffff;border-radius:22px"></div>
<div data-thirds="box" data-thirds-id="speaker-avatar-1" data-thirds-name="Speaker avatar 1" style="left:100px;top:590px;width:90px;height:90px;background:#6366f1;border-radius:45px"></div>
<div data-thirds="text" data-thirds-id="speaker-initials-1" data-thirds-name="Speaker initials 1" style="left:100px;top:615px;width:90px;height:44px;font-size:34px;color:#ffffff;font-weight:800;line-height:1.2;text-align:center;">{{ speaker_1_initials }}</div>
<div data-thirds="text" data-thirds-id="speaker-name-1" data-thirds-name="Speaker name 1" style="left:100px;top:700px;width:390px;height:44px;font-size:30px;color:#1e1b4b;font-weight:800;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="30">{{ speaker_1_name }}</div>
<div data-thirds="text" data-thirds-id="speaker-role-1" data-thirds-name="Speaker role 1" style="left:100px;top:748px;width:390px;height:50px;font-size:22px;color:#4b5563;font-weight:400;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="14" data-thirds-max-font="22">{{ speaker_1_role }}</div>
<div data-thirds="box" data-thirds-id="speaker-card-2" data-thirds-name="Speaker card 2" style="left:560px;top:560px;width:450px;height:260px;background:#ffffff;border-radius:22px"></div>
<div data-thirds="box" data-thirds-id="speaker-avatar-2" data-thirds-name="Speaker avatar 2" style="left:590px;top:590px;width:90px;height:90px;background:#6366f1;border-radius:45px"></div>
<div data-thirds="text" data-thirds-id="speaker-initials-2" data-thirds-name="Speaker initials 2" style="left:590px;top:615px;width:90px;height:44px;font-size:34px;color:#ffffff;font-weight:800;line-height:1.2;text-align:center;">{{ speaker_2_initials }}</div>
<div data-thirds="text" data-thirds-id="speaker-name-2" data-thirds-name="Speaker name 2" style="left:590px;top:700px;width:390px;height:44px;font-size:30px;color:#1e1b4b;font-weight:800;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="30">{{ speaker_2_name }}</div>
<div data-thirds="text" data-thirds-id="speaker-role-2" data-thirds-name="Speaker role 2" style="left:590px;top:748px;width:390px;height:50px;font-size:22px;color:#4b5563;font-weight:400;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="14" data-thirds-max-font="22">{{ speaker_2_role }}</div>
<div data-thirds="box" data-thirds-id="register-button" data-thirds-name="Register button" style="left:70px;top:900px;width:940px;height:100px;background:#facc15;border-radius:50px"></div>
<div data-thirds="text" data-thirds-id="register" data-thirds-name="Register" style="left:70px;top:930px;width:940px;height:44px;font-size:32px;color:#1e1b4b;font-weight:800;line-height:1.2;text-align:center;">{{ register }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"brand": "Marlow Books",
"label": "Free live webinar",
"title": "Close the month in one afternoon",
"date_time": "Thursday 24 September, 11:00 am to 11:45 am",
"speaker_1_initials": "JO",
"speaker_1_name": "Jess Okafor",
"speaker_1_role": "Head of product, Marlow Books",
"speaker_2_initials": "DK",
"speaker_2_name": "Daniel Kim",
"speaker_2_role": "Owner, Kestrel Bikes",
"register": "Save my seat"
}