yohanesgultom/! HTML

## ! HTML
Useful HTML templates

## dompdf_invoice.html
<!-- Simple invoice template compatible with DomPDF https://github.com/dompdf/dompdf -->

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Invoice</title>

  <style type="text/css">
    body {
      padding: 2em;
      font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    }
    h1 {
      font-size: 45px;
      line-height: 45px;
      color: #333;
    }
    table{
      color: #111;
    }
    table.items {
      border-spacing: 0px;
      border: 1px solid lightgray;
    }
    table.items td {
      padding: 5px;
    }
    tfoot tr td{
      font-weight: bold;
    }
    .gray {
      background-color: lightgray;
    }
    .action {
      text-align: right;
    }
    button {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
    }
  </style>

</head>
<body>
  <table width="100%">
    <tr>
      <td>
        <h1>Company Name</h1>
        <div>
          <div>Jakarta, Indonesia</div>
          <div>Phone +6281234567890</div>
        </div>
      </td>
    </tr>
  </table>

  <br/>

  <table width="100%">
    <tr>
      <td>
        <h3>Billed to</h3>
        <div>
          <div>Name: Yohanes Gultom</div>
          <div>Phone: +6281234567890</div>
          <div>Email: yohanes.gultom@gmail.com</div>
        </div>
      </td>
      <td align="right">
        <div>
          <div>Invoice #00001</div>
          <div>Created at: March, 23 2019, 10:16 PM</div>
        </div>
      </td>
    </tr>
  </table>

  <br/>

  <table class="items" width="100%">
    <thead style="background-color: lightgray;">
      <tr>
        <th width="80%">Item</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem ipsum 1</td>
        <td align="right">$ 3,500.00</td>
      </tr>
      <tr>
        <td>Lorem ipsum 2</td>
        <td align="right">$ 3,500.00</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td align="right">Total</td>
        <td align="right">$ 7,000.00</td>
      </tr>
    </tfoot>
  </table>

  <br>

  <table>
    <tr>
      <td>
        <h4>Terms and Conditions</h4>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mauris nec molestie tincidunt. Sed lobortis metus eu fermentum vestibulum. Duis ex lectus, accumsan quis lacus sit amet, tempor facilisis nibh. Quisque at sollicitudin felis, ut pharetra risus. Suspendisse egestas ante eu ex ullamcorper, sed molestie eros pulvinar. Donec eleifend varius libero, at molestie risus gravida ut. Sed in tellus eu felis congue hendrerit ac eu quam.</div>
      </td>
    </tr>
  </table>

  <br>

  <div class="action">
    <button onclick="location.href='#'">Download PDF</button>
  </div>

</body>
</html>
	<!-- Simple invoice template compatible with DomPDF https://github.com/dompdf/dompdf -->

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Invoice</title>

	<style type="text/css">
	body {
	padding: 2em;
	font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
	}
	h1 {
	font-size: 45px;
	line-height: 45px;
	color: #333;
	}
	table{
	color: #111;
	}
	table.items {
	border-spacing: 0px;
	border: 1px solid lightgray;
	}
	table.items td {
	padding: 5px;
	}
	tfoot tr td{
	font-weight: bold;
	}
	.gray {
	background-color: lightgray;
	}
	.action {
	text-align: right;
	}
	button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	}
	</style>

	</head>
	<body>
	<table width="100%">
	<tr>
	<td>
	<h1>Company Name</h1>
	<div>
	<div>Jakarta, Indonesia</div>
	<div>Phone +6281234567890</div>
	</div>
	</td>
	</tr>
	</table>

	<br/>

	<table width="100%">
	<tr>
	<td>
	<h3>Billed to</h3>
	<div>
	<div>Name: Yohanes Gultom</div>
	<div>Phone: +6281234567890</div>
	<div>Email: yohanes.gultom@gmail.com</div>
	</div>
	</td>
	<td align="right">
	<div>
	<div>Invoice #00001</div>
	<div>Created at: March, 23 2019, 10:16 PM</div>
	</div>
	</td>
	</tr>
	</table>

	<br/>

	<table class="items" width="100%">
	<thead style="background-color: lightgray;">
	<tr>
	<th width="80%">Item</th>
	<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Lorem ipsum 1</td>
	<td align="right">$ 3,500.00</td>
	</tr>
	<tr>
	<td>Lorem ipsum 2</td>
	<td align="right">$ 3,500.00</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td align="right">Total</td>
	<td align="right">$ 7,000.00</td>
	</tr>
	</tfoot>
	</table>

	<br>

	<table>
	<tr>
	<td>
	<h4>Terms and Conditions</h4>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mauris nec molestie tincidunt. Sed lobortis metus eu fermentum vestibulum. Duis ex lectus, accumsan quis lacus sit amet, tempor facilisis nibh. Quisque at sollicitudin felis, ut pharetra risus. Suspendisse egestas ante eu ex ullamcorper, sed molestie eros pulvinar. Donec eleifend varius libero, at molestie risus gravida ut. Sed in tellus eu felis congue hendrerit ac eu quam.</div>
	</td>
	</tr>
	</table>

	<br>

	<div class="action">
	<button onclick="location.href='#'">Download PDF</button>
	</div>

	</body>
	</html>