Skip to content

Instantly share code, notes, and snippets.

@alamindevms

alamindevms/bill-invoice.html

Created October 22, 2025 11:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alamindevms/1af608441c9c9f0aea4f72aee65aabfd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alamindevms/1af608441c9c9f0aea4f72aee65aabfd to your computer and use it in GitHub Desktop.
Download ZIP
Bill invoice with Payment Stamp
Raw
bill-invoice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Invoice</title>
<style>
:root {
--primary: #1e2939;
--success: #28a745;
--danger: #dc3545;
--info: #0f85f6;
--border: #bbbbbb;
--gray: #555;
--stamp: #0502ad;
--font: 'Segoe UI', Tahoma, sans-serif;
--header-height: 60px;
--header-top: 0px;
}
* {
box-sizing: border-box;
}
body {
font-family: var(--font);
font-size: 13px;
color: var(--primary);
width: 210mm;
margin: auto;
background: #fff;
}
header {
position: relative;
display: flex;
justify-content: space-between;
/* align-items: center; */
gap: 20px;
padding-bottom: 8px;
}
.mt-10 {
margin-top: 10px;
}
.d-flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.flex-1 {
flex: 1;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-end {
text-align: end;
}
.fw-medium {
font-weight: 500;
}
.fw-semibold {
font-weight: 600;
}
.self-end {
align-self: flex-end;
}
.vertical-top {
vertical-align: top;
}
.break-all {
word-break: break-all;
}
.logo {
position: absolute;
top: var(--header-top);
left: 0px;
/* transform: translateY(-50%); */
display: flex;
align-items: center;
max-width: 80px;
max-height: var(--header-height);
margin-right: 30px;
}
.logo img {
width: auto;
height: 100%;
max-height: var(--header-height);
object-fit: contain;
}
.header-info {
/* max-width: 70%; */
/* margin: auto; */
flex: 1;
font-size: 14px;
text-align: center;
}
.company-wrapper {
min-height: calc(var(--header-height) + var(--header-top));
max-width: 70%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.header-info .company-name {
font-size: 30px;
font-weight: 600;
color: var(--primary);
margin-bottom: 5px;
}
.header-info .propitor-name {
display: inline-block;
font-size: 18px;
font-weight: 600;
background-color: var(--primary);
color: #fff;
padding: 2px 5px;
border-radius: 99px;
margin: auto;
margin-bottom: 5px;
}
.header-info .company-slogan {
font-size: 13px;
font-weight: 500;
color: var(--primary);
margin-bottom: 5px;
}
.header-info p {
margin: 4px 0;
font-size: 14px;
}
.warehouse-name {
font-size: 14px;
font-weight: 500;
color: var(--primary);
margin: 0px;
padding-right: 10px;
}
.invoice-title {
font-size: 14px;
font-weight: 600;
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
margin: 0px;
}
.payment-status {
font-size: 16px;
font-weight: 600;
color: var(--primary);
text-align: end;
margin: 0;
}
.stamp {
position: relative;
}
.stamp:after {
border: solid 0.1em var(--stamp);
border-radius: 0.2em;
color: var(--stamp);
content: 'Unpaid';
font-size: 30px;
font-weight: bold;
line-height: 1;
position: absolute;
padding: 0.1em 0.5em;
top: 20%;
left: 50%;
text-transform: uppercase;
transform-origin: 50% 50%;
transform: rotate(-15deg) translateX(-50%);
}
.stamp.unpaid:after {
content: 'Unpaid';
color: var(--danger);
border-color: var(--danger);
}
.stamp.paid:after {
content: 'Paid';
color: var(--success);
border-color: var(--success);
}
.stamp.partial-paid:after {
content: 'Partial Paid';
color: var(--info);
border-color: var(--info);
}
.info-table,
.item-table {
width: 100%;
border-collapse: collapse;
}
.info-table td {
padding: 4px;
border: 1px solid var(--border);
}
.info-table td.label {
font-weight: 600;
width: 110px;
}
.item-table th,
.item-table td {
border: 1px solid var(--border);
padding: 5px;
}
.item-table th {
background: #f2f2f2;
font-weight: 600;
text-align: left;
}
.border-none {
border: none !important;
padding: 0 !important;
}
.border-bottom-none {
border-bottom: none !important;
}
.border-top-none {
border-top: none !important;
}
.border-left-none {
border-left: none !important;
}
.border-right-none {
border-right: none !important;
}
.totals {
display: flex;
justify-content: space-between;
}
.total-table {
flex: 1 1 0%;
width: auto;
min-width: 300px;
}
.total-table td {
padding: 4px 6px;
border: 1px solid var(--border);
}
.total-table td.label {
font-weight: 600;
text-align: right;
width: 180px;
}
.signature-section {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.signature-section div {
flex: 1;
}
.signature-section div:last-child {
text-align: right;
}
.signature-section p {
border-top: 1px solid var(--border);
margin-top: 40px;
display: inline-block;
padding-top: 4px;
width: 220px;
text-align: center;
}
footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border);
padding-top: 5px;
}
.footer-text {
font-size: 12px;
color: var(--gray);
text-align: center;
margin: 0px;
}
.px-1 {
padding-left: 1px !important;
padding-right: 1px !important;
}
.pr-5 {
padding-right: 5px !important;
}
.py-1 {
padding-top: 1px !important;
padding-bottom: 1px !important;
}
.py-5 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
@media print {
body {
margin: 0;
padding: 0;
}
header,
h2,
.signature-section {
page-break-inside: avoid;
}
}
</style>
</head>
<body>
<header>
<div class="header-info">
<div class="d-flex">
<div class="logo">
<img
src="data:image/png;base64,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"
alt=""
/>
</div>
<div class="company-wrapper">
<p class="company-name">Sohel Enterprise Ltd.</p>
<p class="company-slogan">
পণ্যের কভার না থাকলে পণ্য রিটার্ন হয় না, বক্স খোলা হলে হয় না,
টেম্পারিং হয়, লেবেল খুলে গেলে হয় না, ফিজিক্যাল ড্যামেজ হলে হয়
না। পণ্যটি ওয়ারেন্টি পিরিয়ডে রিপ্লেস পাওয়া যাবে।
</p>
</div>
</div>
<!-- add text-center class if no slogan used -->
<table class="info-table text-left mt-10">
<tbody>
<tr class="vertical-top">
<td class="border-none py-5" width="8%">Propitor</td>
<td class="border-none py-5 pr-5">
:
<span class="break-all">Sohei Mia</span>
</td>
<td class="border-none py-5" width="8%">Phone</td>
<td class="border-none py-5 pr-5">
: <span class="break-all">01931590912, 01931590912</span>
</td>
</tr>
<tr class="vertical-top">
<td class="border-none py-5" width="8%">Address</td>
<td class="border-none py-5 pr-5">
:
<span class="break-all"
>House #4, Road #1, Chaduddan Housing, Mohammadpur,
Dhaka-1207.</span
>
</td>
<td class="border-none py-5" width="8%">Email</td>
<td class="border-none py-5 pr-5">
:
<span class="break-all">[email protected]</span>
</td>
</tr>
</tbody>
</table>
</div>
</header>
<main>
<section class="px-1">
<div class="mt-10 stamp paid">
<table class="item-table">
<tbody>
<tr>
<td colspan="2" class="border-none">
<div class="d-flex justify-between">
<p class="invoice-title">Purchase Invoice</p>
<p class="warehouse-name">Primary Warehouse</p>
</div>
</td>
<td width="130">Invoice No.</td>
<td width="130"></td>
</tr>
<tr>
<td colspan="2" class="border-bottom-none">
Name: Mr. Salam Munsi
</td>
<td width="130">Date</td>
<td width="130">10/10/2025</td>
</tr>
<tr>
<td colspan="2" class="border-top-none border-bottom-none">
Phone: 01722222222
</td>
<td width="130">Ref No.</td>
<td width="130">pu-11-2510160007</td>
</tr>
<tr>
<td colspan="2" class="border-top-none border-bottom-none">
Email: [email protected]
</td>
<td width="130">Trans Code.</td>
<td width="130">tr-10-2505289119</td>
</tr>
<tr>
<td colspan="2" class="border-top-none border-bottom-none">
Address: 123 Main Street, Dhaka
</td>
<td width="130">Created By</td>
<td width="130">Sohei Mia</td>
</tr>
<tr>
<td colspan="2" class="border-top-none border-bottom-none"></td>
<td class="border-bottom-none" width="130">Trans By</td>
<td class="border-bottom-none" width="130">Mr. Salam Munsi</td>
</tr>
</tbody>
</table>
</div>
<table class="item-table">
<thead>
<tr>
<th width="30">SL</th>
<th>Product</th>
<th>Type</th>
<th width="90">Pur. Qty</th>
<th width="90">Rec. Qty</th>
<th width="130">Unit Price</th>
<th width="130">Total Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Aygaz (12kg,C001)</td>
<td>Refill</td>
<td class="text-end">1</td>
<td class="text-end">1</td>
<td class="text-end">100.00</td>
<td class="text-end">100.00</td>
</tr>
<tr>
<td>2</td>
<td>Aygaz (12kg,C001)</td>
<td>Refill</td>
<td class="text-end">1</td>
<td class="text-end">1</td>
<td class="text-end">100.00</td>
<td class="text-end">100.00</td>
</tr>
<tr>
<td>3</td>
<td>Aygaz (12kg,C001)</td>
<td>Refill</td>
<td class="text-end">1</td>
<td class="text-end">1</td>
<td class="text-end">100.00</td>
<td class="text-end">100.00</td>
</tr>
</tbody>
<tfoot>
<!-- <tr>
<td colspan="3" class="text-center border-none">
<strong>Total:</strong>
</td>
<td class="text-end border-none"><strong>3</strong></td>
<td class="text-end border-none"><strong>3</strong></td>
</tr> -->
<tr>
<td rowspan="10" colspan="4" class="border-none vertical-top">
<div>
<p>Note:</p>
<p>
পণ্যের কভার না থাকলে পণ্য রিটার্ন হয় না, বক্স খোলা হলে হয়
না, টেম্পারিং হয়, লেবেল খুলে গেলে হয় না, ফিজিক্যাল ড্যামেজ
হলে হয় না। পণ্যটি ওয়ারেন্টি পিরিয়ডে যদি মেরামত না হয় তবে
শুধুমাত্র রিপ্লেস পাওয়া যাবে। ওয়ারেন্টি ডেলিভারির সময়সীমা
৩০-৪০ কার্যদিবস। Warranty & Service Support: 02226640076,
01617995569, 01617995561
</p>
</div>
</td>
<td rowspan="10" class="border-none"></td>
</tr>
<tr class="fw-semibold">
<td class="border-bottom-none">Total Amount:</td>
<td class="border-bottom-none text-end">300.00</td>
</tr>
<tr>
<td class="border-bottom-none border-top-none">Previous Due:</td>
<td class="border-bottom-none border-top-none text-end">
(+) 100.00
</td>
</tr>
<tr class="fw-semibold">
<td class="border-bottom-none">Total Payable:</td>
<td class="border-bottom-none text-end">400.00</td>
</tr>
<tr>
<td class="border-bottom-none border-top-none">
Paid From Advance:
</td>
<td class="border-bottom-none border-top-none text-end">
(-) 50.00
</td>
</tr>
<tr>
<td class="border-bottom-none border-top-none">
Paid From Commission:
</td>
<td class="border-bottom-none border-top-none text-end">
(-) 50.00
</td>
</tr>
<tr>
<td class="border-bottom-none border-top-none">Discount:</td>
<td class="border-bottom-none border-top-none text-end">
(-) 10.00
</td>
</tr>
<tr>
<td class="border-bottom-none">
<strong>Amount to be paid:</strong>
</td>
<td class="border-bottom-none text-end">
<strong>290.00</strong>
</td>
</tr>
<tr>
<td class="border-top-none border-bottom-none">
<strong>Paid Amount:</strong>
</td>
<td class="border-top-none border-bottom-none text-end">
<strong>250.00</strong>
</td>
</tr>
<tr>
<td class="border-top-none">
<strong>Due Amount:</strong>
</td>
<td class="border-top-none text-end"><strong>40.00</strong></td>
</tr>
</tfoot>
</table>
<div class="signature-section">
<div><p>Receiver Signature</p></div>
<div><p>Authorised Signature</p></div>
</div>
</section>
</main>
<footer>
<p class="footer-text">
Generated By:
<a href="https://firewoodlpg.com">Firewood LPG Software</a>
</p>
<p class="footer-text">
Generated Time: <span class="fw-semibold">10/10/2025 10:00:00 AM</span>
</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment