The HTML behind it

Countdown offer 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.

A black story image with a huge yellow number of days left, the offer, and a yellow button

<!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 1920px; 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:1920px;background:#0a0a0a">
<div data-thirds="box" data-thirds-id="top-band" data-thirds-name="Top band" style="left:0px;top:0px;width:1080px;height:200px;background:#ffe600"></div>
<div data-thirds="text" data-thirds-id="brand" data-thirds-name="Brand" style="left:80px;top:80px;width:920px;height:50px;font-size:34px;color:#0a0a0a;font-weight:800;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ brand }}</div>
<div data-thirds="text" data-thirds-id="days-label" data-thirds-name="Days label" style="left:80px;top:330px;width:920px;height:50px;font-size:34px;color:#ffe600;font-weight:700;line-height:1.2;letter-spacing:1.3px;text-transform:uppercase;">{{ days_label }}</div>
<div data-thirds="text" data-thirds-id="days" data-thirds-name="Days" style="left:60px;top:340px;width:960px;height:640px;font-size:512px;color:#ffe600;font-weight:800;line-height:1.1;text-align:center;" data-thirds-fit="shrink" data-thirds-min-font="200" data-thirds-max-font="512">{{ days }}</div>
<div data-thirds="text" data-thirds-id="days-unit" data-thirds-name="Days unit" style="left:80px;top:950px;width:920px;height:80px;font-size:64px;color:#ffffff;font-weight:800;line-height:1.2;text-align:center;letter-spacing:6px;text-transform:uppercase;">{{ days_unit }}</div>
<div data-thirds="box" data-thirds-id="offer-rule" data-thirds-name="Offer rule" style="left:80px;top:1110px;width:920px;height:4px;background:#ffe600"></div>
<div data-thirds="text" data-thirds-id="offer" data-thirds-name="Offer" style="left:80px;top:1160px;width:920px;height:260px;font-size:76px;color:#ffffff;font-weight:800;line-height:1.05;letter-spacing:-2px;" data-thirds-fit="shrink" data-thirds-min-font="36" data-thirds-max-font="76">{{ offer }}</div>
<div data-thirds="text" data-thirds-id="ends-line" data-thirds-name="Ends line" style="left:80px;top:1460px;width:920px;height:60px;font-size:34px;color:#c9c9c9;font-weight:400;line-height:1.2;">{{ ends_line }}</div>
<div data-thirds="box" data-thirds-id="action-button" data-thirds-name="Action button" style="left:80px;top:1640px;width:920px;height:120px;background:#ffe600;border-radius:60px"></div>
<div data-thirds="text" data-thirds-id="action" data-thirds-name="Action" style="left:80px;top:1676px;width:920px;height:50px;font-size:40px;color:#0a0a0a;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.

{
  "brand": "Summit Outdoor",
  "days_label": "Only",
  "days": "3",
  "days_unit": "days left",
  "offer": "30% off every tent and pack",
  "ends_line": "Sale ends Sunday 13 September at midnight",
  "action": "Shop the sale"
}