INVOICE TEMPLATE

Edit this

by secretgspot

HTML

<div id="page">
    
    <!--To change the status of the invoice, update class name. for example "status paid" or "status overdue". Possible options are: draft, sent, paid, overdue-->
    <div class="status sent">
        <p>Paid</p>
    </div>
        
    <p class="recipient-address">
    <strong>Recipient Address</strong><br>
    Address Line 1<br>
    Town<br>
    Region/State<br>
    Zip/Postal Code</p>
    
    <h1>Invoice 0001</h1>
    <p class="terms"><strong>01 January 2012</strong><br>
    Payment due by 01 February 2012</p>
    
    <img src="images/company-logo.png" alt="yourlogo" class="company-logo">
    <p class="company-address">
        Your Address<br>
        Address Line 1<br>
        Town<br>
        Region/State<br>
        Zip/Postal Code<br>
    </p>
    
    <table id="table" class="tablesorter" cellspacing="0"> 
    <thead> 
    <tr> 
        <th class="header">Quantity</th> 
        <th class="header headerSortDown">Description</th> 
        <th class="header">Unit Price</th> 
        <th class="header">Subtotal</th> 
    </tr> 
    </thead> 
    <tbody> 
     
     
     
     
     
    <tr class="odd"> 
        <td>1 Day</td> 
        <td>Aenean eu leo quam. </td> 
        <td>$300</td> 
        <td>$300</td> 
    </tr><tr class="even"> 
        <td>1 Hour</td> 
        <td>Donec ullamcorper nulla non metus auctor fringilla. </td> 
        <td>$20</td> 
        <td>$20</td> 
    </tr><tr class="odd"> 
        <td>2 Weeks</td> 
        <td>Duis mollis, est non commodo luctus.</td> 
        <td>$1,000</td> 
        <td>$2,000</td> 
    </tr><tr class="even"> 
        <td>8 Hours</td> 
        <td>Etiam porta sem malesuada magna mollis euismod.</td> 
        <td>$10</td> 
        <td>$80</td> 
    </tr><tr class="odd"> 
        <td>Service</td> 
        <td>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </td> 
        <td>$500</td> 
        <td>$500</td> 
    </tr></tbody> 
    </table> 
    
    <div...

CSS

body{
    background: #e3e6e7 url(images/background.png) repeat;
    color: #61686d;
    font: 14px "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    font-weight: lighter;
    padding-bottom: 60px;
}

#page {
    background: #ffffff;
    width: 878px;
    margin: 0 auto;
    margin-top: 80px;
    display: block;
    border: 1px solid #c4c7c7;
    padding: 40px 40px 50px 40px;
    position: relative;
    z-index: 0;
}

.page-shadow {
    background-image: url(images/page-shadow.png);
    width: 992px;
    height: 60px;
    margin: 0 auto;
    margin-top: -1px;
    z-index: 1;
    position: relative;
}

h1 {
    color: #4d5357;
    font-weight: lighter;
    font-size: 56px;
    margin: 40px 0 0 0;
}

.terms {
    float: left;
    width: 400px;
    margin: 0 0 40px 0;
    font-size: 12px;
    color: #a1a7ac;
    line-height: 180%;
}

.terms strong {
    font-size: 16px;
}

.recipient-address {
    padding-top: 60px;
    width: 200px;
}

.company-logo {
    width: 202px;
    height: 81px;
    position: absolute;
    right: 40px;
    top: 40px;
}

.company-address {
    width: 200px;
    color: #a1a7ac;
    position: absolute;
    right: 40px;
    top: 130px;
    text-align: right;
}

.status {
    position: absolute;
    top: -5px;
    left: -5px;
    text-indent: -5000px;
    width: 128px;
    height: 128px;
}

.draft {
    background-image: url(images/status-draft.png);
}

.sent {
    background-image: url(images/status-sent.png);
}

.paid {
    background-image: url(images/status-paid.png);
}

.overdue {
    background-image: url(images/status-overdue.png);
}

hr {
    clear: both;
    border: none;
    background: none;
    border-bottom: 1px solid #d6dde2;
}

.pay-buttons {
    text-align: center;
    width: 400px;
    margin: 0 auto;
    margin-top: 20px;
}
.pay-paypal {
    display: block;
    width: 200px;
    height: 45px;
    background:  url('images/pay-buttons.png') no-repeat;
    text-indent: -5000px;
    background-position: 0 0;
    float:...

JavaScript

$("#table").tablesorter({
        widgets: ['zebra']
    });