Created
December 14, 2012 07:49
-
-
Save idrakimuhamad/4283499 to your computer and use it in GitHub Desktop.
Invoice template for BIZY.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Invoice</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="print_batch"> | |
| <div class="header"> | |
| <h1>Invoice 1</h1> | |
| <div class="vcard clearfix"> | |
| <p class="fn">Assyafi Resources</p> | |
| <p class="adr clearfix"> | |
| <span class="street-address">101 E. Chapman Ave</span><br> | |
| <span class="region">Orange, CA</span><br> | |
| <span class="postal-code">92866</span><br> | |
| <span class="country-name">United State</span> | |
| </p> | |
| <p class="tel">+44 (0)XXXX XXXXXX</p> | |
| </div> | |
| <span><img alt="logo" src="logo.png"></span> | |
| </div> | |
| <div class="article"> | |
| <h1>Recipient</h1> | |
| <p>Bill To :</p> | |
| <div class="vcard clearfix"> | |
| <p class="fn">Othman bin Ahmad</p> | |
| <p class="adr clearfix"> | |
| <span class="street-address">B-10-04, Block B, BZM Kondominium</span><br> | |
| <span class="region">Kajang</span><br> | |
| <span class="postal-code">43200</span><br> | |
| <span class="country-name">Selangor</span> | |
| </p> | |
| </div> | |
| <table class="meta"> | |
| <tr> | |
| <th><span>Invoice #</span></th> | |
| <td><span>101138</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Date</span></th> | |
| <td><span>January 1, 2012</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Amount Due</span></th> | |
| <td><span id="prefix">RM</span><span>600.00</span></td> | |
| </tr> | |
| </table> | |
| <table class="inventory"> | |
| <thead> | |
| <tr> | |
| <th><span>Utilities</span></th> | |
| <th><span>Previous Reading</span></th> | |
| <th><span>Current Reading</span></th> | |
| <th><span>Unit Consumed</span></th> | |
| <th><span>Charge Rate (RM)</span></th> | |
| <th><span>Admin Charge (RM)</span></th> | |
| <th><span>Min. Charge (RM)</span></th> | |
| <th><span>Amount (RM)</span></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><span>Water</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>600.00</span></td> | |
| <td><span>54.00</span></td> | |
| <td><span>4.00</span></td> | |
| <td><span>60110.00</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <table class="balance"> | |
| <tr> | |
| <th><span>Total (RM)</span></th> | |
| <td><span>600.00</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Amount Paid (RM)</span></th> | |
| <td><span>0.00</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Balance Due (RM)</span></th> | |
| <td><span>600.00</span></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="aside"> | |
| <h1><span>Additional Notes</span></h1> | |
| <div> | |
| <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <hr class="page-break"> | |
| <div class="print_batch"> | |
| <div class="header"> | |
| <h1>Invoice 2</h1> | |
| <div class="vcard clearfix"> | |
| <p class="fn">Assyafi Resources</p> | |
| <p class="adr clearfix"> | |
| <span class="street-address">101 E. Chapman Ave</span><br> | |
| <span class="region">Orange, CA</span><br> | |
| <span class="postal-code">92866</span><br> | |
| <span class="country-name">United State</span> | |
| </p> | |
| <p class="tel">+44 (0)XXXX XXXXXX</p> | |
| </div> | |
| <span><img alt="logo" src="logo.png"></span> | |
| </div> | |
| <div class="article"> | |
| <h1>Recipient</h1> | |
| <p>Bill To :</p> | |
| <div class="vcard clearfix"> | |
| <p class="fn">Othman bin Ahmad</p> | |
| <p class="adr clearfix"> | |
| <span class="street-address">B-10-04, Block B, BZM Kondominium</span><br> | |
| <span class="region">Kajang</span><br> | |
| <span class="postal-code">43200</span><br> | |
| <span class="country-name">Selangor</span> | |
| </p> | |
| </div> | |
| <table class="meta"> | |
| <tr> | |
| <th><span>Invoice #</span></th> | |
| <td><span>101138</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Date</span></th> | |
| <td><span>January 1, 2012</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Amount Due</span></th> | |
| <td><span id="prefix">RM</span><span>600.00</span></td> | |
| </tr> | |
| </table> | |
| <table class="inventory"> | |
| <thead> | |
| <tr> | |
| <th><span>Utilities</span></th> | |
| <th><span>Previous Reading</span></th> | |
| <th><span>Current Reading</span></th> | |
| <th><span>Unit Consumed</span></th> | |
| <th><span>Charge Rate (RM)</span></th> | |
| <th><span>Admin Charge (RM)</span></th> | |
| <th><span>Min. Charge (RM)</span></th> | |
| <th><span>Amount (RM)</span></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><span>Water</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>600.00</span></td> | |
| <td><span>54.00</span></td> | |
| <td><span>4.00</span></td> | |
| <td><span>60110.00</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <table class="balance"> | |
| <tr> | |
| <th><span>Total (RM)</span></th> | |
| <td><span>600.00</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Amount Paid (RM)</span></th> | |
| <td><span>0.00</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Balance Due (RM)</span></th> | |
| <td><span>600.00</span></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="aside"> | |
| <h1><span>Additional Notes</span></h1> | |
| <div> | |
| <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <hr class="page-break"> | |
| <div class="print_batch"> | |
| <div class="header"> | |
| <h1>Invoice 3</h1> | |
| <div class="vcard clearfix"> | |
| <p class="fn">Assyafi Resources</p> | |
| <p class="adr clearfix"> | |
| <span class="street-address">101 E. Chapman Ave</span><br> | |
| <span class="region">Orange, CA</span><br> | |
| <span class="postal-code">92866</span><br> | |
| <span class="country-name">United State</span> | |
| </p> | |
| <p class="tel">+44 (0)XXXX XXXXXX</p> | |
| </div> | |
| <span><img alt="logo" src="logo.png"></span> | |
| </div> | |
| <div class="article"> | |
| <h1>Recipient</h1> | |
| <p>Bill To :</p> | |
| <div class="vcard clearfix"> | |
| <p class="fn">Othman bin Ahmad</p> | |
| <p class="adr clearfix"> | |
| <span class="street-address">B-10-04, Block B, BZM Kondominium</span><br> | |
| <span class="region">Kajang</span><br> | |
| <span class="postal-code">43200</span><br> | |
| <span class="country-name">Selangor</span> | |
| </p> | |
| </div> | |
| <table class="meta"> | |
| <tr> | |
| <th><span>Invoice #</span></th> | |
| <td><span>101138</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Date</span></th> | |
| <td><span>January 1, 2012</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Amount Due</span></th> | |
| <td><span id="prefix">RM</span><span>600.00</span></td> | |
| </tr> | |
| </table> | |
| <table class="inventory"> | |
| <thead> | |
| <tr> | |
| <th><span>Utilities</span></th> | |
| <th><span>Previous Reading</span></th> | |
| <th><span>Current Reading</span></th> | |
| <th><span>Unit Consumed</span></th> | |
| <th><span>Charge Rate (RM)</span></th> | |
| <th><span>Admin Charge (RM)</span></th> | |
| <th><span>Min. Charge (RM)</span></th> | |
| <th><span>Amount (RM)</span></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><span>Water</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>34500</span></td> | |
| <td><span>600.00</span></td> | |
| <td><span>54.00</span></td> | |
| <td><span>4.00</span></td> | |
| <td><span>60110.00</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <table class="balance"> | |
| <tr> | |
| <th><span>Total (RM)</span></th> | |
| <td><span>600.00</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Amount Paid (RM)</span></th> | |
| <td><span>0.00</span></td> | |
| </tr> | |
| <tr> | |
| <th><span>Balance Due (RM)</span></th> | |
| <td><span>600.00</span></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="aside"> | |
| <h1><span>Additional Notes</span></h1> | |
| <div> | |
| <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* reset */ | |
| * | |
| { | |
| border: 0; | |
| color: inherit; | |
| font-family: inherit; | |
| font-size: inherit; | |
| font-style: inherit; | |
| font-weight: inherit; | |
| line-height: inherit; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| text-decoration: none; | |
| vertical-align: top; | |
| } | |
| *, *:before, *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .clearfix { | |
| display: block; | |
| } | |
| .clearfix:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| hr.page-break { | |
| page-break-before: always; | |
| margin: 5em 0; | |
| height: 1px; | |
| } | |
| /* heading */ | |
| h1 { font: bold 100% sans-serif; letter-spacing: 0.5em; text-align: center; text-transform: uppercase; } | |
| /* table */ | |
| table { font-size: 75%; table-layout: fixed; width: 100%; } | |
| table { border-collapse: separate; border-spacing: 2px; } | |
| th, td { border-width: 1px; padding: 0.5em; position: relative; text-align: left; } | |
| th, td { border-radius: 0.25em; border-style: solid; } | |
| th { background: #EEE; border-color: #BBBBBB; } | |
| td { border-color: #DDD; } | |
| /* page */ | |
| html { font: 16px/1 'Tahoma', sans-serif; overflow: auto; padding: 0.5in; } | |
| html { background: #999; cursor: default; } | |
| body { box-sizing: border-box; height: 100%; margin: 0 auto; overflow: hidden; padding: 0.5in; width: 8.5in; } | |
| body { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); } | |
| /* header */ | |
| .header { margin: 0 0 3em; padding-bottom: 24px; } | |
| div.header:after { clear: both; content: ""; display: table; } | |
| /*div.header h1 { background: #BBBBBB; border-radius: 0.25em; color: #FFF; margin: 0 0 1em; padding: 0.5em 0; }*/ | |
| div.header {border-bottom: 1px solid #BBB;} | |
| div.header h1 { color: #000; margin: 0 0 1em; padding: 0.5em 0; } | |
| div.header span, div.header img { display: block; float: right; } | |
| div.header img { max-height: 100%; max-width: 100%; } | |
| div.header input { cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; } | |
| /* article */ | |
| div.article, div.article address, table.meta, table.inventory { margin: 0 0 3em; } | |
| div.article:after { clear: both; content: ""; display: table; } | |
| div.article h1 { clip: rect(0 0 0 0); position: absolute; } | |
| div.article address { float: left; font-size: 95%; font-weight: bold; } | |
| /* table meta & balance */ | |
| table.meta, table.balance { float: right; width: 36%; } | |
| table.meta:after, table.balance:after { clear: both; content: ""; display: table; } | |
| /* table meta */ | |
| table.meta th { width: 40%; } | |
| table.meta td { width: 60%; } | |
| /* table items */ | |
| table.inventory { clear: both; width: 100%; } | |
| table.inventory th { font-weight: bold; text-align: center; } | |
| table.inventory td:nth-child(1) { width: 26%; } | |
| table.inventory td:nth-child(2) { text-align: right; width: 12%; } | |
| table.inventory td:nth-child(3) { text-align: right; width: 12%; } | |
| table.inventory td:nth-child(4) { text-align: right; width: 12%; } | |
| table.inventory td:nth-child(5) { text-align: right; width: 12%; } | |
| table.inventory td:nth-child(6) { text-align: right; width: 12%; } | |
| table.inventory td:nth-child(7) { text-align: right; width: 12%; } | |
| table.inventory td:nth-child(8) { text-align: right; width: 12%; } | |
| /* table balance */ | |
| table.balance th, table.balance td { width: 50%; } | |
| table.balance td { text-align: right; } | |
| /* aside */ | |
| div.aside {} | |
| div.aside h1 { border: none; border-width: 0 0 1px; margin: 0 0 1em; } | |
| div.aside h1 { border-color: #999; border-bottom-style: solid; } | |
| div.aside p { font-size: 85%; } | |
| .vcard { | |
| width: 35%; | |
| float: left; | |
| } | |
| .vcard p, .article p { | |
| margin-bottom: 3px; | |
| } | |
| .header .adr span { | |
| float: left; | |
| } | |
| .vcard .tel { | |
| float: left; | |
| } | |
| .article .vcard { | |
| font-weight: bold; | |
| } | |
| @media print { | |
| * { -webkit-print-color-adjust: exact; } | |
| html { background: none; padding: 0; } | |
| body { box-shadow: none; margin: 0; } | |
| span:empty { display: none; } | |
| hr.page-break { | |
| margin : 0; | |
| } | |
| } | |
| @page { margin: 0; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment