thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Comparison 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.

Sign in to copyTry it
A dark square ad with a grey old-way column of crosses beside a green column of checks
comparison-ad/template.html
<!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:#101418">
<div data-thirds="text" data-thirds-id="headline" data-thirds-name="Headline" style="left:60px;top:60px;width:960px;height:110px;font-size:56px;color:#ffffff;font-weight:800;line-height:1.05;letter-spacing:-2px;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="28" data-thirds-max-font="56">{{ headline }}</div>
<div data-thirds="box" data-thirds-id="us-column" data-thirds-name="Us column" style="left:560px;top:200px;width:460px;height:720px;background:#19c37d;border-radius:24px"></div>
<div data-thirds="text" data-thirds-id="us-label" data-thirds-name="Us label" style="left:560px;top:224px;width:460px;height:60px;font-size:34px;color:#062b1c;font-weight:800;line-height:1.2;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="34">{{ us_label }}</div>
<div data-thirds="text" data-thirds-id="them-label" data-thirds-name="Them label" style="left:60px;top:224px;width:460px;height:60px;font-size:34px;color:#9ca3af;font-weight:700;line-height:1.2;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="20" data-thirds-max-font="34">{{ them_label }}</div>
<div data-thirds="box" data-thirds-id="row-rule-1" data-thirds-name="Row rule 1" style="left:60px;top:306px;width:960px;height:1px;background:#2a3240"></div>
<img data-thirds="image" data-thirds-id="cross-1" data-thirds-name="Cross 1" style="left:90px;top:332px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiM2YjcyODAiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJtMjEgMjEgMjIgMjJNNDMgMjEgMjEgNDMiLz48L3N2Zz4K" alt="No">
<div data-thirds="text" data-thirds-id="them-1" data-thirds-name="Old way 1" style="left:150px;top:328px;width:360px;height:56px;font-size:24px;color:#c4c9d2;font-weight:400;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ them_1 }}</div>
<img data-thirds="image" data-thirds-id="check-1" data-thirds-name="Check 1" style="left:590px;top:332px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Yes">
<div data-thirds="text" data-thirds-id="us-1" data-thirds-name="Us 1" style="left:650px;top:328px;width:360px;height:56px;font-size:24px;color:#062b1c;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ us_1 }}</div>
<div data-thirds="box" data-thirds-id="row-rule-2" data-thirds-name="Row rule 2" style="left:60px;top:446px;width:960px;height:1px;background:#2a3240"></div>
<img data-thirds="image" data-thirds-id="cross-2" data-thirds-name="Cross 2" style="left:90px;top:472px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiM2YjcyODAiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJtMjEgMjEgMjIgMjJNNDMgMjEgMjEgNDMiLz48L3N2Zz4K" alt="No">
<div data-thirds="text" data-thirds-id="them-2" data-thirds-name="Old way 2" style="left:150px;top:468px;width:360px;height:56px;font-size:24px;color:#c4c9d2;font-weight:400;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ them_2 }}</div>
<img data-thirds="image" data-thirds-id="check-2" data-thirds-name="Check 2" style="left:590px;top:472px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Yes">
<div data-thirds="text" data-thirds-id="us-2" data-thirds-name="Us 2" style="left:650px;top:468px;width:360px;height:56px;font-size:24px;color:#062b1c;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ us_2 }}</div>
<div data-thirds="box" data-thirds-id="row-rule-3" data-thirds-name="Row rule 3" style="left:60px;top:586px;width:960px;height:1px;background:#2a3240"></div>
<img data-thirds="image" data-thirds-id="cross-3" data-thirds-name="Cross 3" style="left:90px;top:612px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiM2YjcyODAiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJtMjEgMjEgMjIgMjJNNDMgMjEgMjEgNDMiLz48L3N2Zz4K" alt="No">
<div data-thirds="text" data-thirds-id="them-3" data-thirds-name="Old way 3" style="left:150px;top:608px;width:360px;height:56px;font-size:24px;color:#c4c9d2;font-weight:400;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ them_3 }}</div>
<img data-thirds="image" data-thirds-id="check-3" data-thirds-name="Check 3" style="left:590px;top:612px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Yes">
<div data-thirds="text" data-thirds-id="us-3" data-thirds-name="Us 3" style="left:650px;top:608px;width:360px;height:56px;font-size:24px;color:#062b1c;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ us_3 }}</div>
<div data-thirds="box" data-thirds-id="row-rule-4" data-thirds-name="Row rule 4" style="left:60px;top:726px;width:960px;height:1px;background:#2a3240"></div>
<img data-thirds="image" data-thirds-id="cross-4" data-thirds-name="Cross 4" style="left:90px;top:752px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiM2YjcyODAiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJtMjEgMjEgMjIgMjJNNDMgMjEgMjEgNDMiLz48L3N2Zz4K" alt="No">
<div data-thirds="text" data-thirds-id="them-4" data-thirds-name="Old way 4" style="left:150px;top:748px;width:360px;height:56px;font-size:24px;color:#c4c9d2;font-weight:400;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ them_4 }}</div>
<img data-thirds="image" data-thirds-id="check-4" data-thirds-name="Check 4" style="left:590px;top:752px;width:44px;height:44px;object-fit:contain;object-position:50% 50%;" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PGNpcmNsZSBjeD0iMzIiIGN5PSIzMiIgcj0iMzAiIGZpbGw9IiMxOWMzN2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJtMTggMzMgMTAgMTAgMTgtMjIiLz48L3N2Zz4K" alt="Yes">
<div data-thirds="text" data-thirds-id="us-4" data-thirds-name="Us 4" style="left:650px;top:748px;width:360px;height:56px;font-size:24px;color:#062b1c;font-weight:700;line-height:1.2;" data-thirds-fit="shrink" data-thirds-min-font="16" data-thirds-max-font="24">{{ us_4 }}</div>
<div data-thirds="box" data-thirds-id="action-button" data-thirds-name="Action button" style="left:60px;top:960px;width:960px;height:76px;background:#ffffff;border-radius:38px"></div>
<div data-thirds="text" data-thirds-id="action" data-thirds-name="Action" style="left:60px;top:982px;width:960px;height:36px;font-size:26px;color:#101418;font-weight:800;line-height:1.2;text-align:center;">{{ action }}</div>
</div>
</body>
</html>

Sample data

The values that made the picture.

Change any of them, and the same HTML makes a new file.

Sample data
{
  "headline": "Two ways to send a quote",
  "us_label": "Quill",
  "them_label": "The old way",
  "us_1": "Quote goes out in five minutes",
  "us_2": "Client signs on their phone",
  "us_3": "Paid on time with one reminder",
  "us_4": "Every quote in one place",
  "them_1": "Copy last month's document",
  "them_2": "Print, sign, scan, email",
  "them_3": "Chase the payment by hand",
  "them_4": "Search old email threads",
  "action": "Send your first quote free"
}