Skip to content

Instantly share code, notes, and snippets.

@codxse

codxse/quotation.html

Last active August 19, 2021 07:28
Show Gist options
  • Save codxse/72918b4b1a5b7a7400b8dafd93b25851 to your computer and use it in GitHub Desktop.
Save codxse/72918b4b1a5b7a7400b8dafd93b25851 to your computer and use it in GitHub Desktop.
Download ZIP
quotation.html
Raw
quotation.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
<style type="text/css">
html { font-size: 75%; }
body { font-size: 1em; }
</style>
</head>
<body style="width: auto; font-family: 'Roboto', sans-serif;">
<div style="text-align: left;">
<div style="height: 100px; text-align: center; margin-bottom: 12px">
<img src="https://picsum.photos/seed/picsum/300/200" style="width: inherit; height: inherit;" alt="logo">
</div>
<div style="text-align: center; width: 70%; margin-left: auto; margin-right: auto;">
<span style="line-height: 1.3em; font-size: 14px;">Jl. Kemana Saja Blok A No.28, Kec. Itik Hitam, Kel. Burung Bangau, Daerah Khusus Ibukota Jakarta, Jakarta Utara</span><br />
<span style="line-height: 1.3em; font-size: 14px">Indonesia, 14350</span>
</div>
<div style="display: flex; margin-top: 30px;">
<div style="display: flex; flex-grow: 1;"></div>
<div>
<div style="text-align: left;">
<label style="width: 150px; display: inline-block;">Created Date</label>
<span>29 Maret 2021</span>
</div>
<div style="text-align: left;">
<label style="width: 150px; display: inline-block; margin-top: 5px;">Expiration Date</label>
<span style="margin-top: 5px">29 Mei 2021</span>
</div>
</div>
</div>
<div style="display: block; margin-top: 20px">
<div style="text-align: left;">
<label style="width: 170px; display: inline-block;">To</label>
<span>PT Abdi Jaya</span>
</div>
<div style="text-align: left;">
<label style="width: 170px; display: inline-block; margin-top: 5px;">Contact</label>
<span style="margin-top: 5px;">Kevin Chandra</span>
</div>
<div style="text-align: left;">
<label style="width: 170px; display: inline-block; margin-top: 5px;">Phone Number</label>
<span style="margin-top: 5px">08881213131</span>
</div>
<div style="text-align: left;">
<label style="width: 170px; display: inline-block; margin-top: 5px;">Email</label>
<span style="margin-top: 5px">[email protected]</span>
</div>
</div>
<div style="display: flex; margin-top: 20px; width: 100%";">
<div style="flex: 1;">
<div style="display: block;">
<div style="width: 100px; height: 100px; float: left; padding-right: 12px;">Company Address</div>
<div style="width: 80%; line-height: 1.4em;">Jl. Sunter Agung Podomoro Blok N2, No.9-10, Sunter RT 10/RW 11 Sunter Jaya,
Daerah Khusus Ibukota Jakarta, Jakarta Utara, Indonesia, 14350</div>
</div>
</div>
<div style="flex: 1;">
<div style="display: block;">
<div style="width: 100px; height: 100px; float: left; padding-right: 12px">Factory Address</div>
<div style="width: 100%; line-height: 1.4em;">Jl. Sunter Agung Podomoro Blok N2, No.9-10, Sunter RT 10/RW 11 Sunter Jaya,
Daerah Khusus Ibukota Jakarta, Jakarta Utara, Indonesia, 14350</div>
</div>
</div>
</div>
<div style="display: block; margin-bottom: 12px;">
<span style="font-weight: 900; display: block; text-align: center;">Quotation</span>
<span style="display: block; text-align: center;">Q/1/2/3/000001</span>
</div>
<div style="margin-bottom: 20px;">
<table style="width: 100%; table-layout: fixed; overflow-wrap: break-word; border: 1px solid #69899F; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 6px; line-height: 1; border: 1px solid #69899F; background: #99ccff;">Product Name</th>
<th style="padding: 6px; line-height: 1; border: 1px solid #69899F; background: #99ccff; text-align: right;">Sales Price</th>
<th style="padding: 6px; line-height: 1; border: 1px solid #69899F; background: #99ccff; text-align: right;">Quantity</th>
<th style="padding: 6px; line-height: 1; border: 1px solid #69899F; background: #99ccff; text-align: right;">Discount</th>
<th style="padding: 6px; line-height: 1; border: 1px solid #69899F; background: #99ccff; text-align: right;">Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal;">Product A</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">Rp 1.000.000,-</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">23</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">50%</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; text-align: right;">Rp 11.500.000,-</td>
</tr>
<tr>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal;">Product B</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">Rp 1.000.000,-</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">2</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;"></td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; text-align: right;">Rp 2.000.000,-</td>
</tr>
<tr>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal;">Product C</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">Rp 1.000.000,-</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">2</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; font-weight: normal; text-align: right;">20%</td>
<td style="padding: 6px; line-height: 1; border: 1px solid #69899F; text-align: right;">Rp 1.600.000,-</td>
</tr>
</tbody>
</table>
</div>
<div style="display: flex; margin-top: 50px">
<div style="flex: 3"></div>
<div style="flex: 1">
<div style="text-align: right; display: flex; margin-top: 5px;">
<label style="display: inline-block; width: 160px; font-weight: 600">Sub Total</label>
<label style="display: inline-block; width: 100px; font-weight: 600; text-align: left; padding-left: 50px;">Rp 29.000.000,-</span>
</div>
<div style="text-align: right; display: flex; margin-top: 5px;">
<label style="display: inline-block; width: 160px; font-weight: 600">Discount</label>
<label style="display: inline-block; width: 160px; font-weight: 600; text-align: left; padding-left: 50px;">Rp 11.900.000,-</span>
</div>
<div style="text-align: right; display: flex; margin-top: 5px;">
<label style="display: inline-block; width: 160px; font-weight: 600">Total Price</label>
<label style="display: inline-block; width: 160px; font-weight: 600; text-align: left; padding-left: 50px;">Rp 15.100.000,-</span>
</div>
<div style="text-align: right; display: flex; margin-top: 5px;">
<label style="display: inline-block; width: 160px; font-weight: 600">Tax</label>
<label style="display: inline-block; width: 160px; font-weight: 600; text-align: left; padding-left: 50px;">10 %</span>
</div>
<div style="text-align: right; display: flex; margin-top: 5px;">
<label style="display: inline-block; width: 160px; font-weight: 600">Grand Total</label>
<label style="display: inline-block; width: 160px; font-weight: 600; text-align: left; padding-left: 50px;">Rp 16.610.000,-</span>
</div>
</div>
</div>
<div style="display: flex; margin-top: 50px">
<div style="flex: 1">
<p style="text-align: center; font-weight: 600">Quoted By</p>
<div style="width: 100%; height: 50px;"></div>
<p style="text-align: center; font-weight: 600; line-height: 1em">Meidy</p>
<p style="text-align: center; font-weight: 600; line-height: 0">0892829181919</p>
</div>
<div style="flex: 1"></div>
<div style="flex: 1">
<p style="text-align: center; font-weight: 600">Approved By</p>
<div style="width: 100%; height: 50px;"></div>
<p style="text-align: center; font-weight: 600; line-height: 1en">William</p>
<p style="text-align: center; font-weight: 600; line-height: 0">0892829181919</p>
</div>
</div>
<div style="display: block; margin-top: 150px">
<table>
<tbody>
<tr style="vertical-align: top;">
<td><label style="width: 170px; display: inline-block;">Contact Information</label></td>
<td><span>Kevin (0852313131)</span></td>
</tr>
<tr style="vertical-align: top;">
<td><label style="width: 170px; display: inline-block;">Additional Information</label></td>
<td><span>Silahkan hubungi Kevin jika ada pertanyaan</span></td>
</tr>
<tr style="vertical-align: top;">
<td><label style="width: 170px; display: inline-block;">Terms and Confition</label></td>
<td><span> Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaanSilahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan Silahkan hubungi Kevin jika ada pertanyaan</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment