API tools faq
paste
Advertisement
andruhovski

Aspose.HTML Demo Invoice Template 2

andruhovski
Aug 7th, 2018
313
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <title>Invoice Demo Template</title>
  9.  
  10.     <!-- Pure CSS -->
  11.     <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
  12.  
  13.     <style>
  14.         .right {
  15.             float: right;
  16.         }
  17.  
  18.         .text_right {
  19.             text-align: right;
  20.         }
  21.  
  22.         .text_left {
  23.             text-align: left;
  24.         }
  25.  
  26.         .text_center {
  27.             text-align: center;
  28.         }
  29.  
  30.         address {
  31.             margin-bottom: 20px;  
  32.             line-height: 1.4;
  33.         }
  34.  
  35.         .panel {
  36.             margin-bottom: 20px;
  37.             background-color: #fff;
  38.             border: 1px solid transparent;
  39.             border-radius: 4px;
  40.             box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  41.         }
  42.  
  43.         .panel_heading {
  44.             padding: 10px 15px;
  45.             border-bottom: 1px solid transparent;
  46.             border-top-left-radius: 3px;
  47.             border-top-right-radius: 3px;
  48.         }
  49.  
  50.         .panel_default {
  51.             background-color: #ddd;
  52.         }
  53.  
  54.         .panel_default > .panel_heading {
  55.             color: black;
  56.             background-color: #f5f5f5;
  57.             border-color: #ddd;
  58.         }
  59.  
  60.         .panel_title {
  61.             margin: 0px !important;
  62.             font-size: 16px;
  63.             color: inherit;
  64.         }
  65.  
  66.         .panel_body {
  67.             padding: 15px;
  68.             background-color: #fff;
  69.         }
  70.  
  71.         table {
  72.             width: 100%;
  73.         }
  74.  
  75.         .thick_line {
  76.             border-top: 2px solid black !important;
  77.         }
  78.  
  79.         .no_line {
  80.             border-top: none !important;
  81.         }
  82.  
  83.         .address_section {
  84.             margin-top: 10px;
  85.             border-top: 1px solid black;
  86.         }
  87.         #details {
  88.             width: 100%;
  89.         }
  90.         tfoot {
  91.             font-weight: 700;
  92.             border-top: 1px solid black;
  93.         }
  94.  
  95.         .footer {
  96.             position: fixed;
  97.             left: 0;
  98.             bottom: 0;
  99.             width: 100%;
  100.             text-align: center;
  101.         }
  102.     </style>
  103.  
  104. </head>
  105.  
  106. <body>
  107.     <!--container -->
  108.     <div class="pure-g">
  109.         <!-- Left column -->
  110.         <div class="pure-u-2-24">
  111.             <div class="pure-u-1">
  112.                 &nbsp;
  113.             </div>
  114.         </div>
  115.         <!-- Center column -->
  116.         <div class="pure-u-20-24">
  117.             <div class="pure-g">
  118.                 <div class="pure-u-1-2">
  119.                     <img class="pure-img" id="imglogo" src="https://dummyimage.com/160x120/000/fff" alt="Logo" />
  120.                 </div>
  121.                 <div class="pure-u-1-2">
  122.                     <h2 class="right">Invoice #<span id="invoicenum"></span></h2>
  123.                 </div>
  124.             </div>
  125.             <div class="pure-g address_section">
  126.                 <div class="pure-u-1-2">
  127.                     <strong>Bill From:</strong>
  128.                     <address id="billfrom">
  129.                         John Smith<br>
  130.                         1234 Main<br>
  131.                         Apt. 4B<br>
  132.                         Springfield, ST 54321
  133.                     </address>
  134.                 </div>
  135.                 <div class="pure-u-1-2 text_right">
  136.                     <strong>Bill To:</strong>
  137.                     <address id="billto">
  138.                         Jane Smith<br>
  139.                         1234 Main<br>
  140.                         Apt. 4B<br>
  141.                         Springfield, ST 54321
  142.                     </address>
  143.                 </div>
  144.             </div>
  145.             <div class="pure-g">
  146.                 <div class="pure-u-1-2">
  147.                     <strong>Date:</strong>
  148.                     <span id="invoicedate"></span>
  149.                 </div>
  150.                 <div class="pure-u-1-2 text_right">
  151.                     <strong>Due Date:</strong>
  152.                     <span id="invoicedudate"></span>
  153.                 </div>
  154.  
  155.             </div>
  156.             <div class="pure-g">
  157.                 <div class="pure-u-1 panel panel_default">
  158.                     <div class="panel_heading">
  159.                         <h3 class="panel_title"><strong>Invoice summary</strong></h3>
  160.                     </div>
  161.                     <div class="panel_body">
  162.                         <div class="table_responsive">
  163.                             <table id="productItems" class="pure-table pure-table-bordered">
  164.                                 <thead>
  165.                                     <tr>
  166.                                         <td><strong>Item</strong></td>
  167.                                         <td class="text_center"><strong>Price</strong></td>
  168.                                         <td class="text_center"><strong>Quantity</strong></td>
  169.                                         <td class="text_right"><strong>Totals</strong></td>
  170.                                     </tr>
  171.                                 </thead>
  172.                                 <tfoot>
  173.                                     <tr id="totalrow">
  174.                                         <td>&nbsp;</td>
  175.                                         <td>&nbsp;</td>
  176.                                         <td class="text-center"><strong>Subtotal</strong></td>
  177.                                         <td class="text-right">$670.99</td>
  178.                                     </tr>
  179.                                 </tfoot>
  180.                                 <tbody>
  181.                                     <tr id="productrow">
  182.                                         <td>BS-200</td>
  183.                                         <td class="text_center">$10.99</td>
  184.                                         <td class="text_center">1</td>
  185.                                         <td class="text_right">$10.99</td>
  186.                                     </tr>
  187.                                 </tbody>
  188.                             </table>
  189.                         </div>
  190.                     </div>
  191.                 </div>
  192.             </div>
  193.             <div class="pure-g">
  194.                 <div id="details" class="pure-u-1">
  195.                     Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid that builds on top of the default grid.
  196.                 </div>
  197.             </div>
  198.         </div>
  199.         <!-- Right column -->
  200.         <div class="pure-u-2-24">
  201.             <div class="pure-u-1">
  202.                 &nbsp;
  203.             </div>
  204.         </div>
  205.     </div>
  206.     <footer class="footer">
  207.         <p>Footer</p>
  208.     </footer>
  209. </body>
  210.  
  211. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!