"Payslip Rakesh"
Bootstrap 3.3.0 Snippet by janarakesh41

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Author : @arboshiki--> <div id="invoice"> <div class="toolbar hidden-print"> <div class="text-right"> <button id="printInvoice" class="btn btn-info"><i class="fa fa-print"></i> Print</button> </div> <hr> </div> <div class="invoice overflow-auto"> <div style="min-width: 600px"> <header> <div class="row"> <div class="col-md-6 col-xs-6"> <a target="_blank" href="https://rjana.in"> <img class="img-responsive" width="80" height="80" src="https://work.rjana.in/data/uploads/webdata/logo-4.png" data-holder-rendered="true" /> </a> </div> <div class="col-md-6 col-xs-6 company-details"> <h2 class="name"> <span class="text-primary"> Rational Solver Group </span> </h2> <div>Moderator: Rakesh Jana</div> <div>rationalsolver@gmail.com</div> <div>+919614735067</div> </div> </div> </header> <main> <div class="row contacts"> <div class="col-md-4 col-xs-4"> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="text-center">Payment To<span class="glyphicon glyphicon-user pull-right"></span></h4> </div> <div class="panel-body text-center"> <p class="lead"> Rakesh Jana </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item liitem"><strong>Position:</strong> <span class="pull-right">Text Book Solution Expert</span> </li> <li class="list-group-item liitem"><strong>Email:</strong> <span class="pull-right">jana.rakesh@math.com</span> </li> <li class="list-group-item liitem"><strong>Phone:</strong> <span class="pull-right">+919614735067</span> </li> </ul> </div> </div> <div class="col-md-4 col-xs-4"> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="text-center">Work Period<span class="glyphicon glyphicon-calendar pull-right"></span></h4> </div> <div class="panel-body text-center"> <p class="lead"> November 2020 </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item liitem"><strong>Start Date:</strong> <span class="pull-right">2nd Nov, 2020</span> </li> <li class="list-group-item liitem"><strong>End Date:</strong> <span class="pull-right">30th Nov, 2020</span> </li> <li class="list-group-item liitem"><strong>Mode of Work:</strong> <span class="pull-right">Online</span> </li> </ul> </div> </div> <div class="col-md-4 col-xs-4 invoice-details"> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="text-center">Payment Detials<span class="glyphicon glyphicon-check pull-right"></span></h4> </div> <div class="panel-body text-center"> <p class="lead text-success"> <strong>Paid</strong> </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item liitem"><strong>Mode of Payment:</strong> <span class="pull-right">UPI Transfer</span> </li> <li class="list-group-item liitem"><strong>Date of Payment:</strong> <span class="pull-right">30th Nov, 2020</span> </li> <li class="list-group-item liitem"><strong>Amount:</strong> <span class="pull-right"> <strong>₹</strong> 3000.00</span> </li> </ul> </div> </div> </div> <table border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <th class="text-center"><b>Day</b></th> <th class="text-left"><b>Work Details</b></th> <th class="text-center"><b>Time (in hr)</b></th> <th class="text-center"><b>Hour Rate</b></th> <th class="text-center"><b>Amount</b></th> </tr> </thead> <tbody> <tr> <td class="no">04</td> <td class="text-left"><h3> <a target="_blank" href="#"> ISBN: 9783125669 </a> </h3> Total #23 || 532(13, T1-T2), 594(1-6), 6(1), 682(2,4,6-8, T1, T3), 672(1, 2, 4-6, T2) Total #23 || 532(13, T1-T2), 594(1-6), 6(1), 682(2,4,6-8, T1, T3), 672(1, 2, 4-6, T2) </td> <td class="unit"><span class="glyphicon glyphicon-time pull-left"></span> 5.25 </td> <td class="qty"><span class="glyphicon glyphicon-usd pull-left"></span> 70 </td> <td class="total"><span class="glyphicon glyphicon-usd pull-left"></span> 120.10 </td> </tr> <tr> <td class="no">04</td> <td class="text-left"><h3> <a target="_blank" href="#"> ISBN: 9783125669 </a> </h3> Total #23 || 532(13, T1-T2), 594(1-6), 6(1), 682(2,4,6-8, T1, T3), 672(1, 2, 4-6, T2) </td> <td class="unit"><span class="glyphicon glyphicon-time pull-left"></span> 5.25 </td> <td class="qty"><span class="glyphicon glyphicon-usd pull-left"></span> 70 </td> <td class="total"><span class="glyphicon glyphicon-usd pull-left"></span> 120.10 </td> </tr> </tbody> <tfoot> <tr> <td colspan="2"></td> <td colspan="2">Subtotal</td> <td><span class="glyphicon glyphicon-usd pull-left"></span> 200.00 </td> </tr> <tr> <td colspan="2"></td> <td colspan="2">Dollar Rate</td> <td><span class="pull-left"><strong>₹</strong></span> 1,300.00 </td> </tr> <tr> <td colspan="2"></td> <td colspan="2">Bonus</td> <td><span class="pull-left"><strong>₹</strong></span> 1,300.00 </td> </tr> <tr> <td colspan="2"></td> <td colspan="2">Total Payable</td> <td><span class="pull-left"><strong>₹</strong></span> 1,300.00 </td> </tr> </tfoot> </table> <div class="thanks">Thank you!</div> <div class="notices"> <div>NOTICE:</div> <div class="notice">Please mail to <a href="#">jana.rakesh.math@gmail.com</a> if you did not recived any payment within next two days.</div> </div> </main> <footer> This is computer generated payslip does not require any seal and signature for validation. </footer> </div> <!--DO NOT DELETE THIS div. IT is responsible for showing footer always at the bottom--> </div> </div>
#invoice{ padding: 30px; } .invoice { position: relative; background-color: #FFF; min-height: 680px; padding: 15px } .invoice header { padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #3989c6 } .invoice .company-details { text-align: right } .invoice .company-details .name { margin-top: 0; margin-bottom: 0 } .invoice .contacts { margin-bottom: 20px } .invoice .invoice-to { text-align: left } .invoice .invoice-to .to { margin-top: 0; margin-bottom: 0 } .invoice .invoice-details { text-align: left } .invoice .invoice-details .invoice-id { margin-top: 0; color: #3989c6 } .invoice main { padding-bottom: 50px } .invoice main .thanks { margin-top: -100px; font-size: 2em; margin-bottom: 50px } .invoice main .notices { padding-left: 6px; border-left: 6px solid #3989c6 } .invoice main .notices .notice { font-size: 1.2em } .invoice table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 20px } .invoice table td,.invoice table th { padding: 15px; background: #eee; border-bottom: 1px solid #fff } .invoice table th { white-space: nowrap; font-weight: 400; font-size: 16px } .invoice table td h3 { margin: 0; font-weight: 400; color: #3989c6; font-size: 1.2em } .invoice table .qty,.invoice table .total,.invoice table .unit { text-align: right; font-size: 1.2em } .invoice table .no { text-align: center; font-size: 1.8em; background: #ddd } .invoice table .unit { background: #ddd } .invoice table .total { background: #3989c6; color: #fff } .invoice table tbody tr:last-child td { border: none } .invoice table tfoot td { background: 0 0; border-bottom: none; white-space: nowrap; text-align: right; padding: 10px 20px; font-size: 1.2em; border-top: 1px solid #aaa } .invoice table tfoot tr:first-child td { border-top: none } .invoice table tfoot tr:last-child td { color: #3989c6; font-size: 1.4em; border-top: 1px solid #3989c6 } .invoice table tfoot tr td:first-child { border: none } .invoice footer { width: 100%; text-align: center; color: #777; border-top: 1px solid #aaa; padding: 8px 0 } @media print { @page { size: A4; margin: 10mm; } html, body { width: 1024px; } body { margin: 0 auto; line-height: 1em; word-spacing:1px; letter-spacing:0.2px; font: 14px "Times New Roman", Times, serif; background:white; color:black; width: 100%; float: none; } /* avoid page-breaks inside a listingContainer*/ .listingContainer{ page-break-inside: avoid; } h1 { font: 28px "Times New Roman", Times, serif; } h2 { font: 24px "Times New Roman", Times, serif; } h3 { font: 20px "Times New Roman", Times, serif; } /* Improve colour contrast of links */ a:link, a:visited { color: #781351 } /* URL */ a:link, a:visited { background: transparent; color:#333; text-decoration:none; } a[href]:after { content: "" !important; } a[href^="http://"] { color:#000; } #header { height:75px; font-size: 24pt; color:black } .invoice { overflow: hidden!important } .invoice footer { position: absolute; bottom: 10px; page-break-after: always } .invoice>div:last-child { page-break-before: always } }
$('#printInvoice').click(function(){ Popup($('.invoice')[0].outerHTML); function Popup(data) { window.print(); return true; } });

Related: See More


Questions / Comments: