We use cookies
We use cookies to enhance your experience and analyse site usage.
Business proposal with cover section, scope of work, pricing table, and terms.
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; color: #1e293b; }
.cover { background: linear-gradient(135deg, #1e3a5f, #2563eb); color: white; padding: 72px 56px; }
.cover .tag { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 16px; }
.cover h1 { font-size: 38px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; }
.cover .meta { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.8; }
.body { padding: 48px 56px; }
.section { margin-bottom: 40px; }
.section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #dbeafe; color: #1e3a5f; }
p { font-size: 14px; line-height: 1.8; color: #475569; margin-bottom: 12px; }
ul { font-size: 14px; color: #475569; line-height: 2; padding-left: 20px; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
th { background: #1e3a5f; color: white; padding: 12px 16px; text-align: left; font-size: 13px; }
td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
tr:nth-child(even) td { background: #f8fafc; }
.total-row td { font-weight: 700; border-top: 2px solid #e2e8f0; }
.price { font-weight: 600; color: #2563eb; }
.terms-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; font-size: 13px; color: #64748b; line-height: 1.8; }
.sig { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sig-block .line { border-top: 1px solid #94a3b8; padding-top: 8px; margin-top: 40px; font-size: 13px; color: #64748b; }
</style>
</head>
<body>
<div class="cover">
<div class="tag">Business Proposal</div>
<h1>{{proposal_title}}</h1>
<div class="meta">Prepared for: {{client_name}}<br>By: {{company_name}}<br>Date: {{proposal_date}} · Valid until: {{valid_until}}</div>
</div>
<div class="body">
<div class="section">
<h2>Overview</h2>
<p>{{overview}}</p>
</div>
<div class="section">
<h2>Scope of Work</h2>
<ul>{{scope_items}}</ul>
</div>
<div class="section">
<h2>Pricing</h2>
<table>
<thead><tr><th>Item</th><th>Description</th><th>Price</th></tr></thead>
<tbody>
{{pricing_rows}}
<tr class="total-row"><td colspan="2" align="right">Total</td><td class="price">{{total}}</td></tr>
</tbody>
</table>
</div>
<div class="section">
<h2>Terms & Conditions</h2>
<div class="terms-box">{{terms}}</div>
</div>
<div class="sig">
<div class="sig-block"><div class="line">{{client_name}} (Client)<br>Date: _______________</div></div>
<div class="sig-block"><div class="line">{{company_name}} (Provider)<br>Date: _______________</div></div>
</div>
</div>
</body>
</html>Sign in to open this template in the playground, or copy the HTML and use it with the API.
curl -X POST https://api.htmlpdf.dev/api/pdf \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!DOCTYPE html>\n<html>\n<head>\n<style>\n * { box-sizing: border-box; margin: 0; p...",
"format": "A4"
}' \
--output proposal.pdf