<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> /* Common invoice styles. These styles will work in a browser or using the HTML to PDF anvil endpoint. */ body { font-size: 16px; } table { width: 100%; border-collapse: collapse; } table tr td { padding: 0; } table tr td:last-child { text-align: right; } .bold { font-weight: bold; } .right { text-align: right; } .large { font-size: 1.75em; } .total { font-weight: bold; color: #fb7578; } .logo-container { margin: 20px 0 70px 0; } .invoice-info-container { font-size: 0.875em; } .invoice-info-container td { padding: 4px 0; } .client-name { font-size: 1.5em; vertical-align: top; } .line-items-container { margin: 70px 0; font-size: 0.875em; } .line-items-container .total-items td { color: #212529; border-bottom: 2px solid rgb(248, 180, 34); border-top: 2px solid rgb(248, 180, 34); font-size: 12px; font-weight: bold; } .line-items-container th { text-align: left; color: #999; border-bottom: 2px solid rgb(248, 180, 34); border-top: 2px solid rgb(248, 180, 34); padding: 10px 0 15px 0; font-size: 0.75em; text-transform: uppercase; } .line-items-container1 th { text-align: left; color: rgb(27, 27, 27); border-bottom: 2px solid rgb(248, 180, 34); border-top: 2px solid rgb(248, 180, 34); padding: 10px 0 15px 0; font-size: 0.75em; text-transform: uppercase; } .line-items-container th:last-child { text-align: right; } .line-items-container td { padding: 15px 5px; } .line-items-container tbody tr:first-child td { padding-top: 25px; } .line-items-container.has-bottom-border tbody tr:last-child td { padding-bottom: 25px; border-bottom: 2px solid #ddd; } .line-items-container.has-bottom-border { margin-bottom: 0; } .line-items-container th.heading-quantity { width: 50px; } .line-items-container th.heading-price { text-align: right; width: 100px; } .line-items-container th.heading-subtotal { width: 100px; } .payment-info { width: 50%; font-size: 0.75em; line-height: 1.5; } .footer { margin-top: 100px; } .footer-thanks { font-size: 1.125em; } .footer-thanks img { display: inline-block; position: relative; top: 1px; width: 16px; margin-right: 4px; } .footer-info { float: right; margin-top: 5px; font-size: 0.75em; color: #ccc; } .footer-info span { padding: 0 5px; color: black; } .footer-info span:last-child { padding-right: 0; } .page-container { display: none; } td { font-size: 12px; font-weight: 400; line-height: 1.2; color: #212529; } </style> <table class="invoice-info-container"> <tr> <td class="client-name"> <img src='image' title="LOGO"/> </td> <td> <span style="font-size: 24px;font-weight: 500;text-transform: uppercase;">Invoice</span> </td> </tr> <tr> <td> <strong>From:</strong><br /> ABC Infotech Private Limited<br />ABC Nagar DELHI<br /> Safdarjung Enclave,<br />Delhi – 110001<br /> PAN : ffgdfgghjhhfhg<br /> GST : 54144 35444444<br /> HSN/SAC : 6126 </td> <td> Date : 16.06.2021 <br /> Invoice No.: fgdgdf16354552 <br /> Bill to : Sachin Singh <br /> Student Name : Sachin Singh <br /> Course : 000000000 <br /> Address : g1, Janak Puri <br /> Customer's GST: NA <br /> Account No. : NA <br /> Terms & Conditions : NA <br /> </td> </tr> {{-- <tr> <td> Invoice No: <strong>fdfdfghgfgfdg542</strong> </td> <td> abc@gmail.com </td> </tr> --}} </table> <table class="line-items-container"> <thead> <tr> <th>S. No.</th> <th width="200">Description</th> <th width="80">Qty.(in months)</th> <th>Rate</th> <th>Discount</th> <th width="100">Commission Charges@3%</th> <th>Total</th> <th>CGST @9%</th> <th>SGST @9%</th> <th>IGST @9%</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td class="bold">2</td> <td class="bold">Apple widgets</td> <td class="bold">1</td> <td class="bold">500</td> <td class="bold">--</td> <td class="bold">--</td> <td class="bold">500</td> <td class="bold">25</td> <td class="bold">25</td> <td class="bold">50</td> <td class="bold">600</td> </tr> <tr class="total-items"> <td class="bold">Total</td> <td class="bold">--</td> <td>1</td> <td>500</td> <td>--</td> <td>--</td> <td>500</td> <td>25</td> <td>25</td> <td>50</td> <td class="heading-subtotal">{{$amount}}</td> </tr> </tbody> </table> <table width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="300"> <div style="margin-top: 20px;">NOTES:</div> <div style="margin-bottom:30px;">Convenience fee is applied on total of each item</div> <div>Please make the payment via wired transfer at</div> <div>Company’s Bank Details :</div> <div> Beneficiary Name : <strong>ABC Infotech Pvt. Ltd</strong> </div> <div> Bank Name : <strong>IDFC Bank</strong> </div> <div> A/c No. : <strong>25544555555</strong> </div> <div> Branch & IFSC Code : <strong>Karol Bagh & jjkk5557535</strong> </div> </td> <td width="200"> </td> <td width="250" style="text-align: left;"> <div style="border: 2px solid #25aff1;font-weight:bold;padding:5px;"> <div> Gross Total : <strong>1441.00</strong> </div> <div> Taxes : <strong>259.00</strong> </div> <div> Other Charges (Rounding Off) :<strong>--</strong> </div> <div> Total Invoice Value :<strong>1700.00</strong> </div> </div> </td> </tr> </tbody> </table> <div class="footer"> <div style="text-align:center;margin-bottom: 20px;"> <div style="text-align: center;margin-top: 100px;display: inline-block;width: 100%;"> <h4 style="border-bottom: 2px solid #25aff1;padding-bottom: 8px;margin-top:3px;margin-bottom:3px;"> <strong>This is a computer generated invoice no signature required </strong> </h4> <h4 style="margin-top:3px;margin-bottom:3px;"><strong>Head office - 276, Heritage County, Thindlu, Road, Delhi, Karnataka- 110001 </strong></h4> <h4 style="margin-top:3px;margin-bottom:3px;"><strong>Website : www.kidschaupal.com E-mail : marketing@abc.com Facebook:https://www.facebook.com/abc/ </strong></h4> </div> </div>