The HTML behind it
Service proposal 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: 794px 1123px; margin: 0; } body { font-family: Arial, sans-serif; } [data-thirds="table"] th,[data-thirds="table"] td { padding: 12px; } </style>
</head>
<body>
<div data-thirds="canvas" data-thirds-kind="pdf" style="width:794px;height:1123px;background:white">
<div data-thirds="text" style="left:56px;top:54px;width:600px;height:22px;font-size:12px;color:#0a46ff;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">{{ business_name }}</div>
<div data-thirds="text" style="left:56px;top:133px;width:680px;height:135px;font-size:52px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ headline }}</div>
<div data-thirds="text" style="left:56px;top:295px;width:600px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Prepared for</div>
<div data-thirds="text" style="left:56px;top:324px;width:680px;height:47px;font-size:27px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ client_name }}</div>
<div data-thirds="box" style="left:56px;top:416px;width:682px;height:3px;background:#0a46ff"></div>
<div data-thirds="text" style="left:56px;top:454px;width:600px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">The work</div>
<div data-thirds="text" style="left:56px;top:487px;width:680px;height:184px;font-size:23px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ scope }}</div>
<div data-thirds="box" style="left:56px;top:728px;width:682px;height:208px;background:#eaf0ff"></div>
<div data-thirds="text" style="left:80px;top:758px;width:280px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Investment</div>
<div data-thirds="text" style="left:80px;top:802px;width:286px;height:75px;font-size:42px;color:#0a46ff;font-weight:700;line-height:1.25">{{ price }}</div>
<div data-thirds="text" style="left:406px;top:758px;width:270px;height:22px;font-size:12px;color:#575f6d;font-weight:700;line-height:1.25;letter-spacing:1.3px;text-transform:uppercase">Timeline</div>
<div data-thirds="text" style="left:406px;top:810px;width:300px;height:64px;font-size:25px;color:#0b0b0b;font-weight:700;line-height:1.25">{{ timeline }}</div>
<div data-thirds="text" style="left:56px;top:982px;width:680px;height:55px;font-size:17px;color:#0b0b0b;font-weight:400;line-height:1.25">{{ next_step }}</div>
<div data-thirds="box" style="left:56px;top:1044px;width:682px;height:1px;background:#dde1e8"></div>
<div data-thirds="text" style="left:56px;top:1061px;width:682px;height:22px;font-size:12px;color:#575f6d;font-weight:400;line-height:1.25">{{ business_name }}</div>
</div>
</body>
</html>
Sample data
The values that made the picture.
Change any of them, and the same HTML makes a new file.
{
"business_name": "Northline Studio",
"headline": "A better website for your next chapter",
"client_name": "Fieldnote Labs",
"scope": "A clear message, a fresh design, and a website your team can keep up to date. Includes five key pages and a shared set of design tools.",
"price": "$8,500",
"timeline": "6 weeks",
"next_step": "Approve the proposal to book your first workshop."
}