Meta Description" name="description" />
<!DOCTYPE html>
<html lang="mr">
<head>
<meta charset="UTF-8">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
.bill-card {
width: 320px;
border: 2px solid #222;
padding: 10px;
background: #fff;
font-size: 11px;
color: #111;
}
.header {
display: flex;
align-items: center;
gap: 8px;
border-bottom: 2px solid #000;
padding-bottom: 6px;
margin-bottom: 6px;
}
.shop-img {
width: 65px;
height: 65px;
border-radius: 4px;
border: 1px solid #999;
object-fit: cover;
flex-shrink: 0;
}
.title-area {
text-align: center;
flex-grow: 1;
}
.title-mr { font-size: 13px; font-weight: bold; color: #d00000; line-height: 1.2; }
.title-en { font-size: 10px; font-weight: bold; margin-top: 1px; }
.tagline { font-size: 8px; color: #444; margin: 2px 0; }
.phone { font-size: 10px; font-weight: bold; color: #000; }
.memo-title {
text-align: center;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
background: #eee;
padding: 2px 0;
margin-bottom: 6px;
border: 1px solid #ccc;
}
.meta-row {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
font-size: 10px;
}
.cust-name {
margin-bottom: 6px;
font-size: 10px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 6px;
}
th, td {
border: 1px solid #444;
padding: 3px 4px;
font-size: 9px;
}
th { background: #f0f0f0; text-align: center; }
.text-right { text-align: right; }
.total-row td { font-weight: bold; font-size: 10px; }
.footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 12px;
font-size: 9px;
}
.thank-you {
text-align: center;
font-size: 8px;
font-weight: bold;
margin-top: 6px;
border-top: 1px dashed #777;
padding-top: 4px;
}
</style>
</head>
<body>
<div class="bill-card">
<!-- Header with Shop Logo/Image -->
<div class="header">
<!-- Replace 'shop.jpg' with your saved image file -->
<img src="shop.jpg" alt="Shop Front" class="shop-img">
<div class="title-area">
<div class="title-mr">दत्तकृपा झेरॉक्स & स्टेशनरी</div>
<div class="title-en">DATTAKRUPA XEROX</div>
<div class="tagline">Xerox • Print • Lamination</div>
<div class="phone">📞 9284105342</div>
</div>
</div>
<div class="memo-title">ESTIMATE / CASH MEMO</div>
<div class="meta-row">
<span><strong>No.:</strong> _____</span>
<span><strong>Date:</strong> ___/___/202_</span>
</div>
<div class="cust-name">
<strong>Name:</strong> ____________________________
</div>
<!-- Item Table -->
<table>
<thead>
<tr>
<th style="width: 12%;">Sr.</th>
<th>Particulars</th>
<th style="width: 15%;">Qty</th>
<th style="width: 15%;">Rate</th>
<th style="width: 20%;">Amt (₹)</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td>B/W Xerox</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td>Color Xerox / Print</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td>Lamination</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td>Stationery / Other</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="total-row">
<td colspan="4" class="text-right">Total:</td>
<td class="text-right">₹</td>
</tr>
</tbody>
</table>
<!-- Signatures -->
<div class="footer">
<span>Customer Sign</span>
<span>Authorized Sign</span>
</div>
<div class="thank-you">Thank You! Visit Again</div>
</div>
</body>
</html>
2
1
4KB
5KB
77.0ms
196.0ms
122.0ms