<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Invoice</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="invoice.css"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bree+Serif"> </head> <body> <a class="printme" target="_blank" href="https://pdf.pdfbucket.io/demos/invoice/invoice">Convert me</a> <div class="container"> <div class="row"> <div class="col-xs-6"> <h1> <a href="https://kommit.co/"> Kommit </a> </h1> </div> <div class="col-xs-6 text-right"> <h1>INVOICE</h1> <h3>Invoice #001</h3> </div> <hr> <div class="row"> <div class="col-xs-5"> <div class="panel panel-default"> <div class="panel-heading"> <h4>From: <a href="#">Your Name</a></h4> </div> <div class="panel-body"> <p> Address <br> details <br> more <br> </p> </div> </div> </div> <div class="col-xs-5 col-xs-offset-2 text-right"> <div class="panel panel-default"> <div class="panel-heading"> <h4>To: <a href="#">Client Name</a></h4> </div> <div class="panel-body"> <p> Address <br> details <br> more <br> </p> </div> </div> </div> </div> <!-- / end client details section --> <table class="table table-bordered"> <thead> <tr style="background-color:black"> <th><h4>Service</h4></th> <th><h4>Description</h4></th> <th><h4>Hrs/Qty</h4></th> <th><h4>Rate/Price</h4></th> <th><h4>Sub Total</h4></th> </tr> </thead> <tbody> <tr> <td>Article</td> <td><a href="#">Title of your article here</a></td> <td class="text-right">20</td> <td class="text-right">$200.00</td> <td class="text-right">$4000.00</td> </tr> <tr> <td>Template Design</td> <td><a href="#">Details of project here</a></td> <td class="text-right">10</td> <td class="text-right">75.00</td> <td class="text-right">$750.00</td> </tr> <tr> <td>Development</td> <td><a href="#">WordPress Blogging theme</a></td> <td class="text-right">5</td> <td class="text-right">50.00</td> <td class="text-right">$250.00</td> </tr> <tr> <td>Transport</td> <td><a href="#">Transport</a></td> <td class="text-right">4</td> <td class="text-right">100.00</td> <td class="text-right">$400.00</td> </tr> <tr> <td>Other</td> <td><a href="#">Delivery Costs</a></td> <td class="text-right">5</td> <td class="text-right">50.00</td> <td class="text-right">$250.00</td> </tr> </tbody> </table> <div class="row text-right"> <div class="col-xs-2 col-xs-offset-8"> <p> <strong> Sub Total : <br> TAX : <br> Total : <br> </strong> </p> </div> <div class="col-xs-2"> <strong> $5650.00 <br> N/A <br> $5650.00 <br> </strong> </div> </div> <div class="row"> <div class="col-xs-5"> <div class="panel panel-info"> <div class="panel-heading"> <h4>Bank details</h4> </div> <div class="panel-body"> <p>Your Name</p> <p>Bank Name</p> <p>SWIFT : -------</p> <p>Account Number : 12345678</p> <p>IBAN : ------</p> </div> </div> </div> <div class="col-xs-7"> <div class="span7"> <div class="panel panel-info"> <div class="panel-heading"> <h4>Contact Details</h4> </div> <div class="panel-body"> <p> Email : you@example.com <br><br> Mobile : +92123456789 <br> <br> Twitter : <a href="https://twitter.com/">Twitter</a> | SitePoint : <a href="https://kommit.co/">https://kommit.co/</a> </p> <h4>payment should be mabe by Bank Transfer</h4> </div> </div> </div> </div> </div> </div> <!-- /row --> </div> <!-- /container --> </body> </html>