157 lines
4.6 KiB
HTML
157 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Invoice</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
|
|
rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<div style="font-size: 30px; font-weight: bold;">Invoice</div>
|
|
<div style="text-align: right;">
|
|
<div>#123456</div>
|
|
<div>11, January 2021</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
|
|
<div>
|
|
<div style="font-weight: bold;">Billed To</div>
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 20px">John Doe</div>
|
|
<div style="margin-top: 0.5rem; display: flex; flex-direction: column; gap: .5rem;">
|
|
<div>
|
|
<div>Address</div>
|
|
<div>111/238 Flinders St.</div>
|
|
<div>Melbourne, VIC 3000</div>
|
|
</div>
|
|
<div>
|
|
<div>ABN</div>
|
|
<div>12 345 678 901</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: right;">
|
|
<div style="font-weight: bold;">Payee</div>
|
|
<div>
|
|
<div style="font-weight: 600; font-size: 20px;">Zhiwen Zheng</div>
|
|
<div style="margin-top: 0.5rem; display: flex; flex-direction: column; gap: .5rem;">
|
|
<div>
|
|
<div>Address</div>
|
|
<div>123/456 Collins St.</div>
|
|
<div>Melbourne, VIC 3000</div>
|
|
</div>
|
|
<div>
|
|
<div>ABN</div>
|
|
<div>12 345 678 901</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="display: flex; margin-top: 1.5rem; gap: 1rem; text-align: center;">
|
|
<div style="flex: 1;">
|
|
<div style="font-weight: bold;">Billing period</div>
|
|
<div>11, January 2021 - 11, February 2021</div>
|
|
</div>
|
|
<div style="border-left: 1px #ccc; border-left-style: solid; padding-left: 1rem;"></div>
|
|
<div style="flex: 1;">
|
|
<div style="font-weight: bold;">Due date</div>
|
|
<div>11, February 2021</div>
|
|
</div>
|
|
<div style="border-left: 1px #ccc; border-left-style: solid; padding-left: 1rem;"></div>
|
|
<div style="flex: 1;">
|
|
<div style="font-weight: bold;">Amount due</div>
|
|
<div>$100.00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table style="width: 100%; margin-top: 2rem;">
|
|
<thead style="border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;">
|
|
<tr>
|
|
<th style="text-align: left; padding: .5rem 0;">Item</th>
|
|
<th style="text-align: right;">Rate</th>
|
|
<th style="text-align: right;">Unit</th>
|
|
<th style="text-align: right;">Amount</th>
|
|
<th style="text-align: right;">Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="border-bottom: 1px solid #ccc;">
|
|
<td style="padding: .5rem 0;">Service 1</td>
|
|
<td style="text-align: right;">$50.00</td>
|
|
<td style="text-align: right;">Per hour</td>
|
|
<td style="text-align: right;">20</td>
|
|
<td style="text-align: right;">$100.00</td>
|
|
</tr>
|
|
<tr style="border-bottom: 2px solid #ccc;">
|
|
<td style="text-align: right; padding: .5rem 0; font-weight: 600;" colspan="4">Subtotal</td>
|
|
<td style="text-align: right; font-weight: 600;">$100.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style="margin-top: 2rem; display: flex; flex-direction: column; gap: .5rem;">
|
|
<div style="font-weight: bold; font-size: 18px;">Instructions of payment</div>
|
|
<div>Please raise a bank transfer to the following account.</div>
|
|
<div>
|
|
<div style="font-weight: 600;">Bank</div>
|
|
<div>Commonwealth Bank of Australia</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: 600;">BSB</div>
|
|
<div>123-456</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: 600;">Account</div>
|
|
<div>1234 5678 9012</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight: 600;">Account name</div>
|
|
<div>Zhiwen Zheng</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 2rem; font-size: 14px; color: #666;">
|
|
<p>If you have any questions about this invoice, please contact us at <a
|
|
href="mailto:astrian@fastmail.com">astrian@fastmail.com</a>.</p>
|
|
<p>Thank you for your business.</p>
|
|
</div>
|
|
|
|
</body>
|
|
<style>
|
|
body {
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 1rem;
|
|
border: 0;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
</style>
|
|
|
|
</html> |