Skip to content

Instantly share code, notes, and snippets.

@yohanesgultom yohanesgultom/! HTML
Created Mar 28, 2019

Embed
What would you like to do?
Useful HTML templates
Useful HTML templates
<!-- Simple invoice template compatible with DomPDF https://github.com/dompdf/dompdf -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice</title>
<style type="text/css">
body {
padding: 2em;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
h1 {
font-size: 45px;
line-height: 45px;
color: #333;
}
table{
color: #111;
}
table.items {
border-spacing: 0px;
border: 1px solid lightgray;
}
table.items td {
padding: 5px;
}
tfoot tr td{
font-weight: bold;
}
.gray {
background-color: lightgray;
}
.action {
text-align: right;
}
button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td>
<h1>Company Name</h1>
<div>
<div>Jakarta, Indonesia</div>
<div>Phone +6281234567890</div>
</div>
</td>
</tr>
</table>
<br/>
<table width="100%">
<tr>
<td>
<h3>Billed to</h3>
<div>
<div>Name: Yohanes Gultom</div>
<div>Phone: +6281234567890</div>
<div>Email: yohanes.gultom@gmail.com</div>
</div>
</td>
<td align="right">
<div>
<div>Invoice #00001</div>
<div>Created at: March, 23 2019, 10:16 PM</div>
</div>
</td>
</tr>
</table>
<br/>
<table class="items" width="100%">
<thead style="background-color: lightgray;">
<tr>
<th width="80%">Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum 1</td>
<td align="right">$ 3,500.00</td>
</tr>
<tr>
<td>Lorem ipsum 2</td>
<td align="right">$ 3,500.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right">Total</td>
<td align="right">$ 7,000.00</td>
</tr>
</tfoot>
</table>
<br>
<table>
<tr>
<td>
<h4>Terms and Conditions</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mauris nec molestie tincidunt. Sed lobortis metus eu fermentum vestibulum. Duis ex lectus, accumsan quis lacus sit amet, tempor facilisis nibh. Quisque at sollicitudin felis, ut pharetra risus. Suspendisse egestas ante eu ex ullamcorper, sed molestie eros pulvinar. Donec eleifend varius libero, at molestie risus gravida ut. Sed in tellus eu felis congue hendrerit ac eu quam.</div>
</td>
</tr>
</table>
<br>
<div class="action">
<button onclick="location.href='#'">Download PDF</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.