thirds.ai
Sign inCreate a template
Menu

The HTML behind it

Before and after 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 white square ad with a grey Before panel beside a blue After panel and a button under them
before-after-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:#ffffff">
<div data-thirds="text" data-thirds-id="headline" data-thirds-name="Headline" style="left:60px;top:60px;width:960px;height:130px;font-size:56px;color:#0b0b0b;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="before-frame" data-thirds-name="Before frame" style="left:60px;top:230px;width:460px;height:560px;background:#e5e7eb;border-radius:20px;overflow:hidden"></div>
<img data-thirds="image" data-thirds-id="before-image" data-thirds-name="Before image" style="left:60px;top:230px;width:460px;height:560px;object-fit:cover;object-position:50% 50%;border-radius:20px;" src="{{ before_image | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjAgNTYwIj48cmVjdCB3aWR0aD0iNDYwIiBoZWlnaHQ9IjU2MCIgZmlsbD0iI2U1ZTdlYiIvPjxyZWN0IHg9IjQwIiB5PSI2MCIgd2lkdGg9IjM4MCIgaGVpZ2h0PSI0MCIgcng9IjYiIGZpbGw9IiM5Y2EzYWYiLz48cmVjdCB4PSI0MCIgeT0iMTIwIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE4IiByeD0iNiIgZmlsbD0iI2I4YmVjOCIvPjxyZWN0IHg9IjQwIiB5PSIxNTAiIHdpZHRoPSIzNDAiIGhlaWdodD0iMTgiIHJ4PSI2IiBmaWxsPSIjYjhiZWM4Ii8+PHJlY3QgeD0iNDAiIHk9IjE4MCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxOCIgcng9IjYiIGZpbGw9IiNiOGJlYzgiLz48cmVjdCB4PSI0MCIgeT0iMjQwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjI2MCIgcng9IjYiIGZpbGw9IiNkMWQ1ZGIiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM5Y2EzYWYiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTcwIDQ3MCA3MC0xMjAgNjAgODAgNzAtMTYwIDYwIDEwMCA2MC02MCIvPjwvc3ZnPgo=') }}" alt="Before">
<div data-thirds="box" data-thirds-id="after-frame" data-thirds-name="After frame" style="left:560px;top:230px;width:460px;height:560px;background:#0a46ff;border-radius:20px;overflow:hidden"></div>
<img data-thirds="image" data-thirds-id="after-image" data-thirds-name="After image" style="left:560px;top:230px;width:460px;height:560px;object-fit:cover;object-position:50% 50%;border-radius:20px;" src="{{ after_image | default('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjAgNTYwIj48cmVjdCB3aWR0aD0iNDYwIiBoZWlnaHQ9IjU2MCIgZmlsbD0iIzBhNDZmZiIvPjxyZWN0IHg9IjQwIiB5PSI2MCIgd2lkdGg9IjM4MCIgaGVpZ2h0PSI0MCIgcng9IjgiIGZpbGw9IiNmZmZmZmYiLz48cmVjdCB4PSI0MCIgeT0iMTIwIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE4IiByeD0iOSIgZmlsbD0iIzlmYjhmZiIvPjxyZWN0IHg9IjQwIiB5PSIxNTAiIHdpZHRoPSIzNDAiIGhlaWdodD0iMTgiIHJ4PSI5IiBmaWxsPSIjOWZiOGZmIi8+PHJlY3QgeD0iNDAiIHk9IjE4MCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxOCIgcng9IjkiIGZpbGw9IiM5ZmI4ZmYiLz48cmVjdCB4PSI0MCIgeT0iMjQwIiB3aWR0aD0iMzgwIiBoZWlnaHQ9IjI2MCIgcng9IjE2IiBmaWxsPSIjZmZmZmZmIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMGE0NmZmIiBzdHJva2Utd2lkdGg9IjEyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im03MCA0NjAgODAtOTAgNzAgNDAgODAtMTIwIDkwLTQwIi8+PGNpcmNsZSBjeD0iMzkwIiBjeT0iMjUwIiByPSIzNCIgZmlsbD0iI2ZmZDYwYSIvPjwvc3ZnPgo=') }}" alt="After">
<div data-thirds="box" data-thirds-id="before-label-box" data-thirds-name="Before label box" style="left:84px;top:254px;width:150px;height:48px;background:#111827;border-radius:24px"></div>
<div data-thirds="text" data-thirds-id="before-label" data-thirds-name="Before label" style="left:84px;top:266px;width:150px;height:26px;font-size:20px;color:#ffffff;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;text-align:center;">Before</div>
<div data-thirds="box" data-thirds-id="after-label-box" data-thirds-name="After label box" style="left:584px;top:254px;width:150px;height:48px;background:#ffd60a;border-radius:24px"></div>
<div data-thirds="text" data-thirds-id="after-label" data-thirds-name="After label" style="left:584px;top:266px;width:150px;height:26px;font-size:20px;color:#0b0b0b;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;text-align:center;">After</div>
<div data-thirds="text" data-thirds-id="before-caption" data-thirds-name="Before caption" style="left:60px;top:820px;width:460px;height:60px;font-size:24px;color:#4b5563;font-weight:400;line-height:1.2;text-align:center;">{{ before_caption }}</div>
<div data-thirds="text" data-thirds-id="after-caption" data-thirds-name="After caption" style="left:560px;top:820px;width:460px;height:60px;font-size:24px;color:#0b0b0b;font-weight:700;line-height:1.2;text-align:center;">{{ after_caption }}</div>
<div data-thirds="box" data-thirds-id="action-button" data-thirds-name="Action button" style="left:290px;top:940px;width:500px;height:76px;background:#0a46ff;border-radius:38px"></div>
<div data-thirds="text" data-thirds-id="action" data-thirds-name="Action" style="left:290px;top:962px;width:500px;height:36px;font-size:26px;color:#ffffff;font-weight:700;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": "Your weekly report, before and after Orbit",
  "before_caption": "Six spreadsheets and a late night",
  "after_caption": "One page, ready every Monday",
  "action": "See how it works"
}