Business proposal HTML template

A multi-page business proposal template: cover page, goals, timeline, pricing table and signature lines. Convert it to a polished PDF.

Convert this to PDF → Download .html

Paper: A4 · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@proposal.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o proposal.pdf

Or ask your AI agent: "Make me a proposal PDF using the html-pdf.com proposal template." · Guides · API reference

Tips

The cover is its own page via break-after: page.
Phases and the signature block never split across pages.
Add footer_html with page numbers for longer proposals.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Proposal: Website redesign for Acme Inc.</title>
<style>
  @page { size: A4; margin: 20mm 18mm; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 12px; line-height: 1.6; margin: 0; }
  .cover { height: 245mm; display: flex; flex-direction: column; justify-content: space-between; break-after: page; }
  .kicker { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #888; }
  .cover h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; margin: 12px 0; max-width: 140mm; }
  .cover .for { font-size: 16px; color: #555; }
  .meta { display: flex; gap: 40px; border-top: 1px solid #111; padding-top: 12px; }
  h2 { font-size: 16px; margin: 26px 0 8px; break-after: avoid; }
  .phase { display: grid; grid-template-columns: 30mm 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; break-inside: avoid; }
  table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  th, td { text-align: left; padding: 8px 0; border-bottom: 1px solid #eee; }
  th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #888; }
  .r { text-align: right; }
  .total td { border-top: 1px solid #111; border-bottom: 0; font-weight: 700; font-size: 14px; }
  .sign { display: flex; gap: 30mm; margin-top: 24mm; break-inside: avoid; }
  .sign div { flex: 1; border-top: 1px solid #111; padding-top: 6px; color: #555; font-size: 11px; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 20mm 18mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); box-sizing: border-box; }
  }
</style>
</head>
<body>
  <section class="cover">
    <div class="kicker">Proposal · P-2026-017</div>
    <div>
      <h1>Website redesign &amp; new pricing page</h1>
      <div class="for">Prepared for Acme Inc. by Your Studio</div>
    </div>
    <div class="meta"><div><div class="kicker">Date</div>October 10, 2026</div><div><div class="kicker">Valid until</div>November 10, 2026</div><div><div class="kicker">Contact</div>hello@yourstudio.example</div></div>
  </section>

  <h2>Goals</h2>
  <p>Make the website easier to understand for new visitors, increase trial signups from the pricing page, and give the marketing team a site they can update without developers.</p>

  <h2>Approach</h2>
  <div class="phase"><strong>Week 1–2</strong><div><strong>Discovery.</strong> Interviews with sales and five customers, analytics review, content audit.</div></div>
  <div class="phase"><strong>Week 3–4</strong><div><strong>Design.</strong> Wireframes, visual design for home, pricing and two landing templates.</div></div>
  <div class="phase"><strong>Week 5–7</strong><div><strong>Build.</strong> Implementation on your CMS, responsive and accessible, with analytics events.</div></div>
  <div class="phase"><strong>Week 8</strong><div><strong>Launch &amp; measure.</strong> Go-live, A/B test on pricing, handover session.</div></div>

  <h2>Investment</h2>
  <table>
    <thead><tr><th>Item</th><th class="r">Price</th></tr></thead>
    <tr><td>Discovery &amp; research</td><td class="r">$3,000</td></tr>
    <tr><td>Design (4 templates)</td><td class="r">$6,500</td></tr>
    <tr><td>Development &amp; CMS setup</td><td class="r">$9,000</td></tr>
    <tr><td>Launch support (30 days)</td><td class="r">$1,500</td></tr>
    <tr class="total"><td>Total</td><td class="r">$20,000</td></tr>
  </table>
  <p class="muted">50% on signature, 50% on launch. Prices exclude VAT.</p>

  <div class="sign"><div>For Acme Inc.</div><div>For Your Studio</div></div>
</body>
</html>

More templates

Invoice · Receipt · Certificate · Report · Resume · Packing slip · Shipping label · Event ticket · Quote · Purchase order · Timesheet · all templates