270 lines
9.0 KiB
HTML
270 lines
9.0 KiB
HTML
<!doctype html>
|
|
|
|
<html
|
|
lang="en"
|
|
class=" layout-wide "
|
|
dir="ltr"
|
|
data-skin="default"
|
|
data-bs-theme="light"
|
|
data-assets-path="../../assets/"
|
|
data-template="vertical-menu-template-no-customizer">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<title>Demo: Invoice (Print version) - Pages | Vuexy - Bootstrap Dashboard PRO</title>
|
|
|
|
<meta name="description" content="" />
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/x-icon" href="../../assets/img/favicon/favicon.ico" />
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
|
|
rel="stylesheet" />
|
|
|
|
<link rel="stylesheet" href="../../assets/vendor/fonts/iconify-icons.css" />
|
|
|
|
<script src="../../assets/vendor/libs/@algolia/autocomplete-js.js"></script>
|
|
|
|
<!-- Core CSS -->
|
|
<!-- build:css assets/vendor/css/theme.css -->
|
|
|
|
<link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
|
|
|
|
<link rel="stylesheet" href="../../assets/vendor/css/core.css" />
|
|
<link rel="stylesheet" href="../../assets/css/demo.css" />
|
|
|
|
<!-- Vendors CSS -->
|
|
|
|
<link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
|
|
|
<!-- endbuild -->
|
|
|
|
<!-- Page CSS -->
|
|
|
|
<link rel="stylesheet" href="../../assets/vendor/css/pages/app-invoice-print.css" />
|
|
|
|
<!-- Helpers -->
|
|
<script src="../../assets/vendor/js/helpers.js"></script>
|
|
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
|
|
|
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
|
|
|
<script src="../../assets/js/config.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Content -->
|
|
|
|
<div class="invoice-print p-12">
|
|
<div class="d-flex justify-content-between flex-row">
|
|
<div class="mb-6">
|
|
<div class="d-flex svg-illustration mb-6 gap-2 align-items-center">
|
|
<span class="app-brand-logo demo text-primary">
|
|
<span class="text-primary">
|
|
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
|
|
fill="currentColor" />
|
|
<path
|
|
opacity="0.06"
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
|
|
fill="#161616" />
|
|
<path
|
|
opacity="0.06"
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
|
|
fill="#161616" />
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
|
|
fill="currentColor" />
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
<span class="app-brand-text fw-bold fs-4 ms-50">Vuexy</span>
|
|
</div>
|
|
<p class="mb-1">Office 149, 450 South Brand Brooklyn</p>
|
|
<p class="mb-1">San Diego County, CA 91905, USA</p>
|
|
<p class="mb-0">+1 (123) 456 7891, +44 (876) 543 2198</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-6">INVOICE #86423</h5>
|
|
<div class="mb-1">
|
|
<span>Date Issues:</span>
|
|
<span>April 25, 2021</span>
|
|
</div>
|
|
<div>
|
|
<span>Date Due:</span>
|
|
<span>May 25, 2021</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb-6" />
|
|
|
|
<div class="row d-flex justify-content-between mb-6">
|
|
<div class="col-sm-6 w-50">
|
|
<h6>Invoice To:</h6>
|
|
<p class="mb-1">Thomas shelby</p>
|
|
<p class="mb-1">Shelby Company Limited</p>
|
|
<p class="mb-1">Small Heath, B10 0HF, UK</p>
|
|
<p class="mb-1">718-986-6062</p>
|
|
<p class="mb-0">peakyFBlinders@gmail.com</p>
|
|
</div>
|
|
<div class="col-sm-6 w-50">
|
|
<h6>Bill To:</h6>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td class="pe-4">Total Due:</td>
|
|
<td>$12,110.55</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-4">Bank name:</td>
|
|
<td>American Bank</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-4">Country:</td>
|
|
<td>United States</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-4">IBAN:</td>
|
|
<td>ETD95476213874685</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-4">SWIFT code:</td>
|
|
<td>BR91905</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive border border-bottom-0 border-top-0 rounded">
|
|
<table class="table m-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Description</th>
|
|
<th>Cost</th>
|
|
<th>Qty</th>
|
|
<th>Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Vuexy Admin Template</td>
|
|
<td>HTML Admin Template</td>
|
|
<td>$32</td>
|
|
<td>1</td>
|
|
<td>$32.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Frest Admin Template</td>
|
|
<td>Angular Admin Template</td>
|
|
<td>$22</td>
|
|
<td>1</td>
|
|
<td>$22.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Apex Admin Template</td>
|
|
<td>HTML Admin Template</td>
|
|
<td>$17</td>
|
|
<td>2</td>
|
|
<td>$34.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Robust Admin Template</td>
|
|
<td>React Admin Template</td>
|
|
<td>$66</td>
|
|
<td>1</td>
|
|
<td>$66.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table m-0 table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td class="align-top px-0 py-6">
|
|
<p class="mb-1">
|
|
<span class="me-2 fw-medium">Salesperson:</span>
|
|
<span>Alfie Solomons</span>
|
|
</p>
|
|
<span>Thanks for your business</span>
|
|
</td>
|
|
<td class="px-0 py-12 w-px-100">
|
|
<p class="mb-2">Subtotal:</p>
|
|
<p class="mb-2">Discount:</p>
|
|
<p class="mb-2 border-bottom pb-2">Tax:</p>
|
|
<p class="mb-0 pt-2">Total:</p>
|
|
</td>
|
|
<td class="text-end px-0 py-6 w-px-100">
|
|
<p class="fw-medium mb-2">$1800</p>
|
|
<p class="fw-medium mb-2">$28</p>
|
|
<p class="fw-medium mb-2 border-bottom pb-2">21%</p>
|
|
<p class="fw-medium mb-0 pt-2">$1690</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<hr class="mt-0 mb-6" />
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<span class="fw-medium">Note:</span>
|
|
<span
|
|
>It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance
|
|
projects. Thank You!</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- / Content -->
|
|
|
|
<!-- Core JS -->
|
|
<!-- build:js assets/vendor/js/theme.js -->
|
|
|
|
<script src="../../assets/vendor/libs/jquery/jquery.js"></script>
|
|
|
|
<script src="../../assets/vendor/libs/popper/popper.js"></script>
|
|
<script src="../../assets/vendor/js/bootstrap.js"></script>
|
|
<script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
|
|
|
|
<script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
|
|
|
<script src="../../assets/vendor/libs/hammer/hammer.js"></script>
|
|
|
|
<script src="../../assets/vendor/libs/i18n/i18n.js"></script>
|
|
|
|
<script src="../../assets/vendor/js/menu.js"></script>
|
|
|
|
<!-- endbuild -->
|
|
|
|
<!-- Vendors JS -->
|
|
|
|
<!-- Main JS -->
|
|
|
|
<script src="../../assets/js/main.js"></script>
|
|
|
|
<!-- Page JS -->
|
|
<script src="../../assets/js/app-invoice-print.js"></script>
|
|
</body>
|
|
</html>
|