<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>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
.first-table div {
line-height: 2;
}
table {
width: 100%;
border-collapse: collapse;
}
table tr td {
padding-left: 10px;
}
.line-items-container {
margin: 70px 0;
}
.line-items-container th {
text-align: center;
}
.line-items-container td {
text-align: center;
}
table,
th,
td {
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
.line-items-container td {
padding: 15px 0;
}
.line-items-container tbody tr:first-child td {
padding-top: 25px;
}
.footer {
margin-top: 100px;
}
.footer p {
margin-top: 0px;
margin-bottom: 5px;
}
td {
font-size: 16px;
font-weight: 400;
line-height: 1.2;
color: #212529;
}
</style>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr style="padding-left:10px;">
<td width="50" style="text-align: left;padding-left: 10px;">
<div><strong>Billing & Shipping Details</strong></div>
</td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr class="first-table" style="border: 1px solid #000;">
<td width="80">
<div>
<strong>Invoice Date :</strong>
</div>
<div>
<strong>Invoice No.:</strong>
</div>
<div>
<strong>Customer Name :</strong>
</div>
<div>
<strong>Customer GSTIN :</strong>
</div>
<div>
<strong>Shipping Address :</strong>
</div>
<div>
<strong>Billing Address :</strong>
</div>
<div>
<strong>Email :</strong>
</div>
<div>
<strong>Mob. No :</strong>
</div>
</td>
<td width="250" style="text-align: left;">
<div>
<div>
03-09-20
</div>
<div>
AB052545
</div>
<div>
ABC Pvt.Ltd.
</div>
<div>
09AAACE1390E1ZX
</div>
<div>
Sector-62, Noida – 201301 (UP)
</div>
<div>
c/o Sachin Singh, B-14, Sector-57, Noida-201301 (U.P.)
</div>
<div>
<a href="#">abc@gmail.com</a>
</div>
<div>
+91-999999999
</div>
</div>
</td>
</tr>
</tbody>
</table>
<table style="margin-top: 30px;">
<thead>
<tr>
<th style="text-align: left;">Payment Method:</th>
<th style="text-align: left;">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><strong>Online:</strong> (Payment Charges Rs. 0)</td>
<td style=" text-align: left; "><strong>Shipping:</strong> Lockdown Express delivery (Total Shipping Charges Rs. 0)</td>
</tr>
</tbody>
</table>
<table class="line-items-container ">
<thead>
<tr>
<th></th>
<th>Brand</th>
<th>Product</th>
<th>SKUCode</th>
<th>MRP(Rs.)</th>
<th>Rate</th>
<th>Qty</th>
<th>Gross(Rs.)</th>
<th>Disc%</th>
<th>Disc.(Rs.)</th>
<th>Taxable Value</th>
<th>CGST</th>
<th>Amt</th>
<th>SGST</th>
<th>Amt</th>
<th>Net(Rs.)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Orijen</td>
<td>Six Fish 6kg</td>
<td>BM060C</td>
<td>5,099</td>
<td>4,321</td>
<td>4</td>
<td>17,284</td>
<td>13%</td>
<td>2247</td>
<td>15,038</td>
<td>18%</td>
<td>3,111</td>
<td>9%</td>
<td>1,111</td>
<td>18,149</td>
</tr>
</tbody>
</table>
<!--footer-upper-section-->
<div style="margin-top:20px;width: 100%;line-height:24px;text-align:right; ">
<div>
<strong>Sub-total: Rs. 35,171.6 </strong>
</div>
<div>
<strong>GST Amount: Rs. 6,735.4 </strong>
</div>
<div>
<strong>Shipping & Handling Charges: Rs. 0 </strong>
</div>
<div>
<strong>Grand Total: Rs. 41,907 </strong>
</div>
</div>
<!--footer section-->
<div class="footer" style="margin-top: 100px;margin-bottom:20px;text-align:center; ">
<div class="col-sm-12 text-center ">
<h4 style="margin-top: 3px;margin-bottom: 3px;font-size: 30px;margin-top:3px;margin-bottom:3px; "><strong>ABC INDIA PRIVATE LIMITED </strong></h4>
<p><b>REGD OFF: </b> D 303, 3RD FLOOR, SECTOR 3, Tilak Nagar NEW DELHI - 110078 </p>
<p><strong>GSTIN:</strong> gffjgjfgdfgdfgfdgfgfgfg</p>
<p><strong>CONTACT NO:</strong> +91-9999999999 </p>
<p><strong>EMAIL ID:</strong> abc@gmail.com</p>
</div>
</div>
