equation-admin-template
Version:
Booststrap 4 admin template made by equation
166 lines (156 loc) • 7.46 kB
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>