UNPKG

equation-admin-template

Version:

Booststrap 4 admin template made by equation

166 lines (156 loc) 7.46 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"> <title>Invoice-Print | Equation - Multipurpose Bootstrap Dashboard Template </title> <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/> <!-- BEGIN GLOBAL MANDATORY STYLES --> <link href="assets/css/loader.css" rel="stylesheet" type="text/css" /> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" /> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES --> <link href="assets/css/ecommerce/invoice.css" rel="stylesheet" type="text/css" /> <!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES --> </head> <body> <div class="container"> <div class="row mb-5"> <div class="col-sm-12 col-12"> <h3 class="in-heading">Invoice</h3> </div> </div> <div class="widget-content-area"> <div class="row invoice-top-section"> <div class="col-sm-6 mb-4"> <h5 class="invoice-info-title">Invoice Info</h5> <p class="invoice-serial-number">#1942784</p> </div> <div class="col-sm-6 mb-4 text-sm-right"> <p class="invoice-order-status">Order Status: Pending</p> <p class="invoice-order-date">Order Date: March 17 2018</p> </div> </div> <div class="row mt-5"> <div class="col-md-6 col-sm-6 invoice-from"> <h5 class="invoice-from-title mb-3">Bill From</h5> <div class="row"> <div class="col-12 mb-4"> <p>REDQ Inc.</p> <p>redq@company.com</p> </div> <div class="col-12 mb-4"> <p>405 Mulberry Rd. Mc Grady,</p> <p>NC, 28649</p> </div> <div class="col-12 mb-4"> <p>Fax: +0(863) 228-7064</p> <p>Phone: +(740) 927-9284</p> </div> </div> </div> <div class="col-md-6 col-sm-6 invoice-to text-sm-right"> <h5 class="invoice-to-title mb-3">Bill To</h5> <div class="row"> <div class="col-12 mb-4"> <p>Pineapple Inc.</p> <p>pineapple@company.com</p> </div> <div class="col-12 mb-4"> <p>86781 547th Ave. Osmond,</p> <p>NE, 68765</p> </div> <div class="col-12 mb-4"> <p>Fax: +0(863) 228-7064</p> <p>Phone: +(740) 927-9284</p> </div> </div> </div> </div> <div class="row mt-5"> <div class="col-12"> <div class="table-responsive"> <table class="table"> <thead class="thead-light"> <tr> <th scope="col">#</th> <th scope="col">Item Name</th> <th class="text-right" scope="col">Cost</th> <th class="text-right" scope="col">Qty</th> <th class="text-right" scope="col">Price</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td>A box of happiness</td> <td class="text-right">200</td> <td class="text-right">14</td> <td class="text-right">$2800</td> </tr> <tr> <td scope="row">2</td> <td>Unicorn Tears</td> <td class="text-right">500</td> <td class="text-right">14</td> <td class="text-right">$7000</td> </tr> <tr> <td scope="row">3</td> <td>Rainbow Machine</td> <td class="text-right">700</td> <td class="text-right">5</td> <td class="text-right">$3500</td> </tr> </tbody> </table> </div> </div> </div> <div class="row mt-4"> <div class="col-12"> <div class="invoice-total-amounts float-right text-right"> <div class="row"> <div class="col-sm-9 col-7 text-right"> <p>Subtotal: </p> </div> <div class="col-sm-3 col-5"> <p>$13300</p> </div> <div class="col-sm-9 col-7 text-right"> <p>Vat: </p> </div> <div class="col-sm-3 col-5"> <p>$700</p> </div> <div class="col-sm-9 col-7 text-right"> <h4>Grand Total: </h4> </div> <div class="col-sm-3 col-5"> <h4>$14000</h4> </div> </div> </div> </div> </div> </div> </div> <!-- BEGIN GLOBAL MANDATORY SCRIPTS --> <script type="text/javascript" src="assets/js/libs/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="bootstrap/js/popper.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script> <script type="text/javascript" src="assets/js/app.js"></script> <script> $(document).ready(function() { App.init(); }); </script> <script type="text/javascript" src="assets/js/custom.js"></script> <script>window.print();</script> <!-- END GLOBAL MANDATORY SCRIPTS --> </body> </html>