54, North Road
+1 888 455 6677
mail@example.com
Description |
Amount |
|---|---|
| Apple iPhone 8 64 GB | 759,00 |
| Apple iPhone 7 Plus 128 GB | 1023,00 |
| Apple iPhone 6s Plus 16GB | 595,00 |
| Apple iPhone 6s Plus 64 GB | 1052,00 |
|
Total Amount: Late Fees: Payable Amount: Balance Due: |
2569,00 700,00 159,00 5010,00 |
Total: |
2365,00 |
Date : 28 June 2017
Signature
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 main">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" alt="Invoce Template" src="http://prepbootstrap.com/Content/images/template/productslider/product_004.jpg" />
</div>
<div class="col-md-8 text-right">
<h4 style="color: #F81D2D;"><strong>Company Name</strong></h4>
<p>54, North Road</p>
<p>+1 888 455 6677</p>
<p>mail@example.com</p>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12 text-center">
<h2>INVOICE</h2>
<h5>00000846382</h5>
</div>
</div>
<br />
<div>
<table class="table">
<thead>
<tr>
<th><h5>Description</h5></th>
<th><h5>Amount</h5></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9">Apple iPhone 8 64 GB</td>
<td class="col-md-3"><i class="fa fa-usd" aria-hidden="true"></i> 759,00 </td>
</tr>
<tr>
<td class="col-md-9">Apple iPhone 7 Plus 128 GB</td>
<td class="col-md-3"><i class="fa fa-usd" aria-hidden="true"></i> 1023,00 </td>
</tr>
<tr>
<td class="col-md-9">Apple iPhone 6s Plus 16GB</td>
<td class="col-md-3"><i class="fa fa-usd" aria-hidden="true"></i> 595,00 </td>
</tr>
<tr>
<td class="col-md-9">Apple iPhone 6s Plus 64 GB</td>
<td class="col-md-3"><i class="fa fa-usd" aria-hidden="true"></i> 1052,00 </td>
</tr>
<tr>
<td class="text-right">
<p>
<strong>Total Amount: </strong>
</p>
<p>
<strong>Late Fees: </strong>
</p>
<p>
<strong>Payable Amount: </strong>
</p>
<p>
<strong>Balance Due: </strong>
</p>
</td>
<td>
<p>
<strong><i class="fa fa-usd" aria-hidden="true"></i> 2569,00 </strong>
</p>
<p>
<strong><i class="fa fa-usd" aria-hidden="true"></i> 700,00</strong>
</p>
<p>
<strong><i class="fa fa-usd" aria-hidden="true"></i> 159,00 </strong>
</p>
<p>
<strong><i class="fa fa-usd" aria-hidden="true"></i> 5010,00 </strong>
</p>
</td>
</tr>
<tr style="color: #F81D2D;">
<td class="text-right"><h4><strong>Total:</strong></h4></td>
<td class="text-left"><h4><strong><i class="fa fa-usd" aria-hidden="true"></i> 2365,00 </strong></h4></td>
</tr>
</tbody>
</table>
</div>
<div>
<div class="col-md-12">
<p><b>Date :</b> 28 June 2017</p>
<br />
<p><b>Signature</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.main {
background: #ffffff;
border-bottom: 15px solid #F81D2D;
border-top: 15px solid #1E1F23;
margin-top: 30px;
margin-bottom: 30px;
padding: 40px 30px !important;
position: relative;
box-shadow: 0 1px 21px #808080;
font-size:10px;
}
.main thead {
background: #1E1F23;
color: #fff;
}
</style>