Skip to content

Instantly share code, notes, and snippets.

@ambrizals

ambrizals/index.html

Created April 2, 2020 15:17
Show Gist options
  • Save ambrizals/de23763fdaa7b5a552970efa3bdc473e to your computer and use it in GitHub Desktop.
Save ambrizals/de23763fdaa7b5a552970efa3bdc473e to your computer and use it in GitHub Desktop.
Download ZIP
Dotmatrix Simple Template 9,5 x 11 inch
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Print Dot Matrix Template 9.5 x 11</title>
</head>
<style>
@media print {
p,
h1,
h2 {
padding: 0;
margin: 0;
}
html,
body {
display: block;
font-family: "Calibri";
margin: 0;
}
@page {
size: 24.13cm 27.94cm;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
table,
th,
td {
border: 1px solid #000;
}
.judul {
font-weight: 900;
text-align: center;
}
.judul_tabel {
font-weight: 700;
text-align: left;
}
.logo {
width: 30%;
}
header {
display: flex;
}
header div {
flex: 1;
align-items: center;
padding: 20px 0;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
margin-bottom: 20px;
}
.companyInfo {
flex: 2;
}
.companyInfo img {
max-width: 100%;
}
.printInfo {
flex: 1;
}
.tandatangan {
display: flex;
justify-content: space-between;
text-align: center;
}
.tandatangan .pelanggan,
.tandatangan .kasir {
width: 30%;
border: 1px solid #000;
padding: 10px;
}
.tandatangan .blank {
height: 150px;
}
}
</style>
<body>
<header>
<div class="companyInfo">
<h2>Bang Bang Decor</h2>
<p>Jl. Cempaka No. 1, Dalung - Badung, Bali.</p>
<p>Nomor Telepon : 08115349997, Email : bangbang.decor@gmail.com</p>
</div>
<div class="printInfo">
<h2>Invoice</h2>
<p>Tanggal : 02 - 04 - 2020</p>
<p>Nama Pelanggan : Rizky</p>
<p>Nomor Telepon : 081 234 567 890</p>
</div>
</header>
<table>
<thead class="judul">
<tr>
<td colspan="5">Daftar Pembelian</td>
</tr>
<tr class="judul_tabel">
<td width="2%">No</td>
<td width="60%">Deskripsi</td>
<td width="10%">Harga</td>
<td width="10%">Qty</td>
<td width="18%">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>2</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>3</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>4</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>5</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>6</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>7</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>8</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>9</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>10</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>11</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>12</td>
<td>
Ad ullamco elit minim pariatur reprehenderit laborum laboris.
Nostrud in nulla mollit sit adipisicing cupidatat sit cillum
deserunt elit eiusmod.Ullamco amet eiusmod veniam consequat aliquip
ullamco velit reprehenderit ipsum pariatur minim pariatur cupidatat.
</td>
<td>Rp. 1.800.000</td>
<td>1</td>
<td>Rp. 1.800.000</td>
</tr>
</tbody>
</table>
<table>
<thead class="judul">
<tr>
<td colspan="2">Pembayaran</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jumlah Pembayaran</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>Pembayaran Dimuka</td>
<td>Rp. 1.800.000</td>
</tr>
<tr>
<td>Sisa Pembayaran</td>
<td>Rp. 1.800.000</td>
</tr>
</tbody>
</table>
<div class="tandatangan">
<div class="kasir">
<p>Kasir</p>
<div class="blank"></div>
<p>Ambrizal</p>
</div>
<div class="pelanggan">
<p>Pelanggan</p>
<div class="blank"></div>
<p>Rizky</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment