Template Studio | Create Invoices, Receipts, Certificates & PDF Templates

Templates:

Documents

Recognition

Marketing

Social Media

Insert:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  *{margin:0;padding:0;box-sizing:border-box;}
  body{font-family:'Inter',sans-serif;color:#1a1a1a;background:#fff;padding:40px;max-width:800px;margin:0 auto;}
  .header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;}
  .header img{max-height:60px;}
  .invoice-title{font-size:32px;font-weight:700;color:{{accent_color}};text-transform:uppercase;letter-spacing:2px;}
  .invoice-meta{text-align:right;font-size:13px;color:#555;margin-top:8px;}
  .invoice-meta span{display:block;margin-bottom:2px;}
  .parties{display:flex;justify-content:space-between;margin-bottom:32px;gap:40px;}
  .party{flex:1;}
  .party-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:{{accent_color}};margin-bottom:6px;}
  .party-name{font-weight:600;font-size:15px;margin-bottom:4px;}
  .party-detail{font-size:13px;color:#555;line-height:1.5;}
  table{width:100%;border-collapse:collapse;margin-bottom:24px;}
  thead th{background:{{accent_color}};color:#fff;padding:10px 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;text-align:left;}
  thead th:last-child,thead th:nth-child(2),thead th:nth-child(3){text-align:right;}
  tbody td{padding:10px 14px;font-size:13px;border-bottom:1px solid #eee;}
  tbody td:last-child,tbody td:nth-child(2),tbody td:nth-child(3){text-align:right;}
  .totals{display:flex;justify-content:flex-end;margin-bottom:32px;}
  .totals-table{width:260px;}
  .totals-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:#555;}
  .totals-row.total{border-top:2px solid {{accent_color}};padding-top:10px;margin-top:6px;font-size:16px;font-weight:700;color:#1a1a1a;}
  .footer{border-top:1px solid #eee;padding-top:20px;font-size:12px;color:#888;line-height:1.6;}
</style>
</head>
<body>
  <div class="header">
    <div>
      <img src="{{logo_url}}" alt="Company Logo">
      <div style="margin-top:8px;font-size:13px;color:#555;">{{company_name}}</div>
    </div>
    <div style="text-align:right;">
      <div class="invoice-title">Invoice</div>
      <div class="invoice-meta">
        <span><strong>Invoice #:</strong> {{invoice_number}}</span>
        <span><strong>Date:</strong> {{invoice_date}}</span>
        <span><strong>Due Date:</strong> {{due_date}}</span>
      </div>
    </div>
  </div>

<div class="parties">
    <div class="party">
      <div class="party-label">From</div>
      <div class="party-name">{{company_name}}</div>
      <div class="party-detail">{{company_address}}</div>
    </div>
    <div class="party">
      <div class="party-label">Bill To</div>
      <div class="party-name">{{client_name}}</div>
      <div class="party-detail">{{client_address}}</div>
    </div>
  </div>

<table>
    <thead>
      <tr><th>Description</th><th>Qty</th><th>Rate</th><th>Amount</th></tr>
    </thead>
    <tbody>
      <tr><td>{{item1_description}}</td><td>{{item1_qty}}</td><td>{{item1_rate}}</td><td>{{item1_amount}}</td></tr>
      <tr><td>{{item2_description}}</td><td>{{item2_qty}}</td><td>{{item2_rate}}</td><td>{{item2_amount}}</td></tr>
      <tr><td>{{item3_description}}</td><td>{{item3_qty}}</td><td>{{item3_rate}}</td><td>{{item3_amount}}</td></tr>
    </tbody>
  </table>

<div class="totals">
    <div class="totals-table">
      <div class="totals-row"><span>Subtotal</span><span>{{subtotal}}</span></div>
      <div class="totals-row"><span>Tax ({{tax_rate}})</span><span>{{tax_amount}}</span></div>
      <div class="totals-row total"><span>Total</span><span>{{total}}</span></div>
    </div>
  </div>

<div class="footer">
    <strong>Payment Terms:</strong> {{payment_terms}}<br>
    {{footer_note}}
  </div>
</body>
</html>

Preview

60%