Professional Invoice Template - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Bill Invoice</title> <style> body { font family: Arial, sans serif; margin: 0; padding: 20px; width: 210mm; height: 297mm; box sizing: border box; font size: 12px; } .invoice container { max width: 99%; margin: 0 auto; } .header { display: flex; justify content: space between; align items: flex start; margin bottom: 10px; gap: 15px; } .logo { width: 50px; height: 50px; } .company title { text align: center; flex grow: 1; } .company name { font size: 18px; font weight: bold; margin bottom: 3px; } .subtitle { font size: 11px; margin bottom: 3px; } .company address { font size: 11px; line height: 1.3; } .contact { text align: right; font size: 11px; } .ae box { border: 1px solid #000; padding: 2px 8px; display: inline block; margin top: 5px; } .gst section { display: flex; justify content: space between; font size: 11px; margin bottom: 10px; } .details table { width: 100%; border collapse: collapse; margin bottom: 10px; } .details table th, .details table td { border: 1px solid #000; padding: 5px; text align: left; vertical align: top; } .main table { width: 100%; position: relative; border width: 1px; margin top: 3px; border collapse: collapse; } .main table th { border: 1px solid #000; background color: #fff; font weight: normal; padding: 5px; margin top: 100px; text align: left; } .main table td { padding: 10px; border left: 1px solid #000; border right: 1px solid #000; } .main table tr:first of type td { border top: 1px solid #000; } .main table .sno column { width: 120px; } .main table .dc column { width: 80px; } .main table .quantity column { width: 100px; } .main table .rate column { width: 120px; } .main table .amount column { width: 120px; } /* New CSS for extending lines */ .bottom section td { border: 1px solid #000; padding: 5px; } /* Container to group text and underline */ .field container { display: block; margin bottom: 5px; } /* Text Styling */ .field text { display: block; line height: 1.5; padding bottom: 2px; } /* Underline Styling */ .field underline { display: block; border bottom: 1px dashed #000; width: 101.5%; height: 1px; } .invoice inner table { width: 100%; text align: end; border collapse: collapse; } .invoice inner table td { border: none; font size: 15px; padding top: 20px; text align: center; } .invoice inner table .label { font weight: bold; width: 40%; } .signatures { display: flex; justify content: space between; margin top: 20px; } .main table th, .main table td { padding: 12px; } </style> </head> <body> <div class="invoice container"> <div class="header"> <img src="/api/placeholder/50/50" alt="Logo" class="logo"> <div class="company title"> <div class="company name">MY ENGINEERING WORKS</div> <div class="subtitle">All Kinds of Job Work Undertaken</div> <div class="company address"> 5/10, 2ND STREET, JOTHI NAGAR, AMMAPET,<br> SALEM 636103 </div> </div> <div class="contact"> Cell: 9942955740 <div class="ae box">AE</div> </div> </div> <div class="gst section"> <div>GST No.: 00000000</div> <div>Party GST No.: 33AAJFK0287A1ZR</div> </div> <table border="1" style="width: 100%; border collapse: collapse;"> <! Party Details Row > <tr> <td style="padding: 10px; text align: left; width: 80%;"> <strong>To</strong><br> M/s.<strong><span style="padding top: 5px; display: inline block; margin left: 5px;">KRISH CORPORATION</span></strong><br> <span class="field underline" style="margin left: 30px; width: 95%;"></span> <span style="padding top: 5px; display: inline block; margin left: 30px;">114 /63 PULIYAM, PEELAMEDU<br></span> <span class="field underline" style="margin left: 30px; width: 95%;"></span> <span style="padding top: 5px; display: inline block; margin left: 30px;">COIMBATORE 641004</span> <span class="field underline" style="margin left: 30px; width: 95%;"></span> </td> <td style="padding: 20px; text align: left;"> <strong style="font size: xl small;">INVOICE NO</strong><br> <hr style=" margin left: 20px; width: 136.5%;"> <strong>No:</strong><span>4569</span> <strong>Date:</strong><span>4569</span> </td> </tr> <! Job Order Details Row > <tr> <td colspan="2" style="padding: 10px; text align: left;"> <strong>Job Order No:</strong> 0491.12.1235.34689<br> <strong> Date:</strong>05/01/2025, 08/01/2022, 25/11/2024 </td> </tr> </table> <table class="main table"> <tr> <th>S.No.</th> <th>Particulars</th> <th>DC No</th> <th>Quantity</th> <th>Rate (Rs.)</th> <th>Amount (Rs.)</th> </tr> <tr> <td>1</td> <td>AL 90MM ALU BODY</td> <td></td> <td class="quantity column">1</td> <td class="rate column">7.40</td> <td class="amount column">7.40</td> </tr> <tr> <td>2</td> <td>ALBODY (DORA100 & SHINE100 NEW) 120MM BODY</td> <td></td> <td class="quantity column">1</td> <td class="rate column">7.30</td> <td class="amount column">7.30</td> </tr> <tr> <td>3</td> <td>AL3 135MM ALU BODY RMALB004</td> <td></td> <td class="quantity column">1</td> <td class="rate column">7.00</td> <td class="amount column">7.00</td> </tr> <tr> <td>4</td> <td>AL3 150MM ALU BODY (WOL) RMALB 005</td> <td></td> <td class="quantity column">1</td> <td class="rate column">7.00</td> <td class="amount column">7.00</td> </tr> <tr> <td>5</td> <td>AL3 135MM ALU BODY RMALB004</td> <td></td> <td class="quantity column">12</td> <td class="rate column">7.00</td> <td class="amount column">84.00</td> </tr> <tr class="bottom section"> <td colspan="3"> <div style="padding: 5px;"> <div style="font weight: bold; margin bottom: 5px;">Bank Details:</div> Bank : STATE BANK OF INDIA<br> Account No : 234324523<br> IFSC Code : SBI00034534<br> Branch : AMMAPET </div> </td> <td colspan="3"> <table style="width: 100%; border collapse: collapse;"> <tr> <td style="text align: right; padding: 4px; border: none;">Total</td> <td style="text align: right; padding: 4px; width: 100px; border: none;">112.70</td> </tr> <tr> <td style="text align: right; padding: 4px; border: none;">S.GST</td> <td style="text align: right; padding: 4px; border: none;">0.00</td> </tr> <tr> <td style="text align: right; padding: 4px; border: none;">CGST 9%</td> <td style="text align: right; padding: 4px; border: none;">10.14</td> </tr> <tr> <td style="text align: right; padding: 4px; border: none; font weight: bold;">GRAND TOTAL</td> <td style="text align: right; padding: 4px; border: none; font weight: bold;">123.00</td> </tr> </table> </td> </tr> </table> <div style="margin top: 10px; font style: italic; font size: 11px;"> Rupees One Hundred And Twenty Three only. </div> <div style="margin top: 15px;"> Received goods in good condition. </div> <div class="signatures"> <div>Customer Signature</div> <div style="text align: right;">For MY ENGINEERING WORKS<br><br>Proprietor</div> </div> </div> </body> </html> apps fileview.texmex_20250206.00_p0 add.html Displaying add.html.i need the output for this code
