Permalink
Switch branches/tags
Nothing to show
Find file Copy path
17831c1 Jul 21, 2016
204 lines (183 sloc) 4.97 KB
<html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<title>Lob.com Invoice Letter Template</title>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 8.5in;
height: 11in;
margin: 0;
padding: 0;
background-color: white;
font-family: 'Open Sans';
font-weight: 400;
}
.page-content {
position: relative;
width: 8.125in;
height: 10.625in;
left: 0.1875in;
top: 0.1875in;
}
#return-address-window {
position: absolute;
left: .625in;
top: .5in;
width: 3.25in;
height: .875in;
}
#return-logo {
position: absolute;
left: .07in;
top: .02in;
width: 2.05in;
height: .3in;
}
#heading {
position: relative;
top: .6in;
left: 4.6in;
width: 3in;
text-transform: uppercase;
font-weight: 700;
font-size: .25in;
text-align: right;
}
#subheading {
padding-top: .2in;
font-size: .14in;
text-transform: none;
}
#footer {
font-size: .1in;
text-align: center;
margin-top: 2in;
}
#table {
display: table;
margin: auto;
margin-top: 2in;
width: 7.2in;
border-top: 1px solid black;
border-right: 1px solid black;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
}
.top {
font-weight: 700;
font-size: .135in;
background-color: lightgray;
}
.bottom {
font-size: .12in;
}
.hidden {
visibility: hidden;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<!-- all text should be within page-content -->
<div class="page-content">
<div id="heading">
Invoice
<div id="subheading">
Invoice #: 23<br>
Customer ID: DUSXJUS<br>
Date: July 8, 2015
</div>
</div>
<div id="table">
<div class="row">
<span class="cell top">Item #</span>
<span class="cell top">Description</span>
<span class="cell top">Quantity</span>
<span class="cell top">Unit Price</span>
<span class="cell top">Total</span>
</div>
<div class="row">
<span class="cell bottom">3781732</span>
<span class="cell bottom">Product Name Here</span>
<span class="cell bottom">3</span>
<span class="cell bottom">$1.00</span>
<span class="cell bottom">$3.00</span>
</div>
<div class="row">
<span class="cell bottom">2938298</span>
<span class="cell bottom">Product Name Goes Here</span>
<span class="cell bottom">10</span>
<span class="cell bottom">$0.50</span>
<span class="cell bottom">$5.00</span>
</div>
<div class="row">
<span class="cell bottom">1379173</span>
<span class="cell bottom">Product Name Right Here</span>
<span class="cell bottom">1</span>
<span class="cell bottom">$3.00</span>
<span class="cell bottom">$3.00</span>
</div>
<div class="row">
<span class="cell bottom">2392893</span>
<span class="cell bottom">Product Name Written Here</span>
<span class="cell bottom">1</span>
<span class="cell bottom">$1.00</span>
<span class="cell bottom">$1.00</span>
</div>
<div class="row">
<span class="cell bottom">2938298</span>
<span class="cell bottom">Product Name Goes Here</span>
<span class="cell bottom">10</span>
<span class="cell bottom">$0.50</span>
<span class="cell bottom">$5.00</span>
</div>
<div class="row">
<span class="cell bottom">1379173</span>
<span class="cell bottom">Product Name Right Here</span>
<span class="cell bottom">1</span>
<span class="cell bottom">$3.00</span>
<span class="cell bottom">$3.00</span>
</div>
<div class="row">
<span class="cell bottom">2392893</span>
<span class="cell bottom">Product Name Written Here</span>
<span class="cell bottom">1</span>
<span class="cell bottom">$1.00</span>
<span class="cell bottom">$1.00</span>
</div>
<div class="row">
<span class="cell hidden"></span>
<span class="cell hidden"></span>
<span class="cell hidden"></span>
<span class="cell top text-right">TOTAL:</span>
<span class="cell top">$21.00</span>
</div>
</div>
<div id="footer">
Your total payment is due in 30 days.<br>Please make checks payable to "Crafty Inc".<br><br>
If you have any questions about this invoice, please contact support@crafty.com.
</div>
</div>
<div id="return-address-window">
<div id="return-logo">
<!-- your logo here! -->
<img src="https://s3-us-west-2.amazonaws.com/lob-assets/crafty-logo.png" style="height: 100%">
</div>
</div>
</body>
</html>