Html invoice

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="containerpk" style="background:url('https://admin.pranshakti.in/public/pran.png');
background-size:contain; background-repeat:no-repeat;; background-position:center center; position:relative;
height:100vh">

<button onclick="window.print()" style="position:relative; float:right;">Print</button>

<header>
<center><h1>Invoice</h1></center><br/>

<div style="position:relative; display:inline-flexs;">

<!-- logo start -->
<div>
<img src="https://admin.pranshakti.in/public/pran_bg.png" style="width:160px">
<p style="margin-left:0px; font-weight:600; margin-top:3px; font-size:13px">PRANSHAKTI NUTRITION</p>
</div>
<!-- logo end -->

<!-- invoice details start -->
<div style="position:relative; float:right; margin-top:-160px">
<p style="font-weight:600">Invoice : #1145</p>
<p style="font-weight:600">Invoice Date 01-05-2024</p>
<p style="font-weight:600">Due Date 08-05-2024</p>
</div>
<!-- invoice details end -->

</div>

</header> 
<hr/>

<!-- header end -->





<!-- body part start -->

<main>


<div class="containerpk mt-3" style="position:relative; z-index:1;">

<table class="table table-stripedpk" width="100%">

<thead>
<tr>
<th style="background:#333; color:white">Our Info</th>
<th style="background:#333; color:white">Customer Info</th>
</tr>
</thead>


<tbody>
<tr>

<td width="50%">
<h6>Pranshakti Nutrition</h6>

<p>

First Floor, Plot no. 151, Shakuntal Nagar, Isbavi<br/>
Pandharpur, Maharashtra<br/>
India - 411052<br/>
Phone: 9552302834<br/>
Email: contact@mavericinfotech.in<br/>
Tax ID: FGGPK9981M

</p>

</td>




<td width="50%">

<h6>Pankaj</h6>

<p>
Phone: 9552302834<br/>
Email: contact@mavericinfotech.in<br/>

</p>

</td>

</tr>

</tbody>

</table>
</div>

<!-- customer and company information -->





<!-- biiling information start -->

<div class="containerpk mt-3" style="position:relative; z-index:1;">

<table class="table table-stripedpk" width="100%">

<thead>
<tr>
<th style="background:#333; color:white">Description</th>
<th style="background:#333; color:white">Price</th>
<th style="background:#333; color:white">Qty</th>
<th style="background:#333; color:white; text-align:right;">Subtotal</th>
</tr>
</thead>


<tbody>
<tr>

<td width="">
<p> 
CTO Consultancy
</p>
</td>

<td width="">
<p>
₹15,000.00
</p>
</td>

<td width="">
<p>
1
</p>
</td>

<td width="">
<p style="text-align:right;">
₹ 15,000.00
</p>
</td>

</tr>

</tbody>

</table>
</div><br/>

<!-- biiling information end -->










<!-- paid information start -->

<div class="containerpk mt-3" style="position:relative; z-index:1;">

<table class="table table-stripedpk" width="100%">

<thead>
<tr>
<th style="font-weight:600">Status : Paid</th>
<th style="font-weight:600">Summary</th>
<th style=""></th>
</tr>
</thead>


<tbody>

<tr>

<td width="">
<p style=""> 
Total Amount: ₹ 15,000.00
</p>
</td>

<td width="">
<p>
SubTotal: 
</p>
</td>

<td width="">
<p>
₹ 15,000.00
</p>
</td>

</tr>




<tr>

<td width="">
<p style=""> 
Paid Amount: ₹ 15,000.00
</p>
</td>

<td width="">
<p>
Balance Due:
</p>
</td>

<td width="">
<p style="font-weight:600">
₹0.00
</p>
</td>

</tr>

</tbody>

</table>
</div>

<!-- paid information end -->













</main>

<!-- body part start -->





<!-- footer start -->

<footer>





</footer>

<!-- footer end -->




</div>