larek · June 28, 2017 13:01
diff --git a/DHL-plugin.html b/DHL-plugin.html

 <style type="text/css">


 	/* ==========*
 	 * HTML TAGS *
 	 * ==========*/

 	html, body {
 		background: #FFFFFF;
 	}

 	body {
 		display: block;
 		color: #000000;
 		font: normal 12px/130% Verdana, Arial, Helvetica, sans-serif;
 		margin: 8px;
 		-webkit-print-color-adjust: exact;
 	}

 	a {
 		color: #000000;
 	}

 	h1, h2, h3, h4, h5, h6 {
 		color: #000000;
 		line-height: 150%;
 	}

 	/* Creates a separator between multiple documents */
 	body > div.container .separator {
 		border-top: 2px dashed #DDDDDD;
 		border-bottom: none;
 		margin: 50px 0 0;
 	}

 	body > div.container:last-child .separator {
 		display: none;
 	}

 	/* ============= *
 	 *  DHL  STYLES  *
 	 * ============= */

 	* {
 		box-sizing: border-box;
 	}

 	html, body {
 		width: 100%;
 		height: 100%;
 		margin: 0;
 		padding: 0;
 	}

 	body {
 		padding: 15px;
 	}

 	h1 {
 		font-weight: 400;
 	}

 	.container {
 		min-width: 700px;
 		width: 960px;
 		max-width: 90%;
 		display: block;
 		margin: auto;
 		overflow: hidden;
 	}

 	.main-header,
 	.sub-section,
 	.section-body,
 	.row {
 		display: flex;
 		flex-direction: row;
 		flex-wrap: nowrap;
 		justify-content: space-between;
 		align-items: center;
 	}

 	.row {
 		width: 100%;
 		margin-bottom: 10px;
 	}

 	.main-header {
 		max-width: 100%;
 		padding: 0 15px;
 		background: #ffcc00;
 	}

 	header .logo {
 		max-width: 200px;
 	}

 	header .header-barcode {
 		max-width: 25%;
 	}

 	header .barcode {
 		max-width: 100%;
 	}

 	.section-header {
 		background: #ffcc00;
 		padding: 10px 15px;
 	}

 	.section-header span.num {
 		display: inline-block;
 		background: #d40411;
 		color: #fff;
 		width: 1.5em;
 		height: 1.5em;
 		padding: 2px;
 		margin-right: 5px;
 		font-size: 14px;
 		text-align: center;
 		vertical-align: middle;
 	}

 	.section-header:not(.num) {
 		font-weight: 600;
 	}

 	.section-body {
 		padding: 25px 15px;

 	}

 	.section-body img {
 		max-width: 400px;
 	}

 	.name {
 		display: inline-block;
 		white-space: nowrap;
 		margin-right: 10px;
 	}

 	.box {
 		display: inline-block;
 		border: 2px solid #000;
 		min-height: 2.5em;
 		width: 100%;
 		min-width: 50px;
 		padding: 5px 10px;
 		font-size: 1.1em;
 		line-height: 1.4em;
 	}

 	.section-1 > * {
 		width: 40%;
 	}

 	img.img-acc-no {
 		max-width: 100%;
 	}

 	.section-2 {
 		align-items: flex-start;
 	}

 	.section-2 .box {
 		width: 100%;
 	}

 	.row-2 {
 		align-items: flex-end;
 	}

 	.row-2 > *:not(.dist-item) {
 		margin-bottom: 15px;
 	}

 	.handover-option {
 		margin-right: 15px;
 	}

 	.handover-option,
 	.handover-option .circle {
 		display: inline-block;
 	}

 	.handover-option .circle {
 		width: 1.1em;
 		height: 1.1em;
 		border: 1px solid #000;
 		border-radius: 50%;
 		position: relative;
 	}

 	.handover-option .circle.active:after {
 		content: '';
 		position: absolute;
 		background: #000;
 		width: .6em;
 		height: .6em;
 		border-radius: 50%;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}

 	.underline-box {
 		flex: 1 0 auto;
 		border-bottom: 2px solid #000;
 		min-width: 75%;
 		min-height: 2em;
 	}

 	.row-title {
 		padding-right: 15px;
 	}

 	.item {
 		text-align: center;
 		width: 24.5%;
 	}

 	.dist-item {
 		text-align: center;
 		width: 53%;
 	}

 	.dist-item .box {
 		text-align: left;
 	}

 	.section-3 {
 	  flex-direction: column;
 	 }

 	 .section-4 {
 	  display: inline-block;
 	 }

 	.section-4 .sub-section {
 		width: 100%;
 	}

 	.section-4 .sub-section > *:first-child {
 		padding-right: 30px;
 	}

 	.section-4 .sub-section > *:nth-child(2) {
 		margin-right: auto;
 		border-bottom: 2px solid #000;
 		padding: 10px;
 		width: 40%;
 	}

 	.print-button {
 		margin: 50px auto 65px auto;
 		display: block;
 		text-decoration: none;
 		text-align: center;
 		font-size: 25px;
 	}

 	@media print {
 		.print-button {
 			display: none;
 		}
 	}
 </style>
 <!DOCTYPE HTML>
 <html lang="en-US">
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 		<title>
 					</title>
 			</head>
 		<body>

 <div class="container">

  <a class="print-button" href="#" onclick="window.print()">Print</a>

  <header class="main-header">
    <img src="http://dhlus.staging.wpengine.com/wp-content/plugins/pr-dhl-woocommerce/assets/img/dhl-official.png" alt="DHL logo" class="logo">
    <div class="document-title">
      <h1>Handover Note</h1>
    </div>
    <div class="header-barcode">
      <p>83143189726</p>
      <img src="http://dhlus.staging.wpengine.com/wp-content/plugins/pr-dhl-woocommerce/lib/barcode.php?text=83143189726&size=60" alt="barcode"/>    </div>
  </header>

  <section>
    <div class="section-header">
      <span class="num">1</span> Pick-up Account Details    </div>
    <div class="section-body section-1">

      <div class="sub-section">
        <div class="name">Pick-up Name</div>
        <div class="box">Pickup Name</div>
      </div>

      <div class="sub-section">
        <div class="name">Account No</div>
        <div>
          <p>000052002</p>
           <img src="http://dhlus.staging.wpengine.com/wp-content/plugins/pr-dhl-woocommerce/lib/barcode.php?text=000052002&size=60" alt="barcode"/>        </div>
      </div>

    </div>
  </section>

  <section>
    <div class="section-header">
      <span class="num">2</span> Shipping Service(s)    </div>
    <div class="section-body section-2">
      <div class="name">Shipping Service(s)</div>
      <div class="box">DHL SM Parcel Ground<br/>DHL GM Packet Plus<br/></div>
    </div>
  </section>

  <section>
    <div class="section-header">
      <span class="num">3</span> Details    </div>
    <div class="section-body section-3">

      <div class="row row-1">
        <div class="row-title">Total</div>
        <div class="item">
          <p>No. of items</p>
          <div class="box">2</div>
        </div>
        <div class="item">
          <p>Weight(kg)</p>
          <div class="box">2</div>
        </div>
        <div class="item">
          <p>No. of Receptacles</p>
          <div class="box"></div>
        </div>
      </div>

      <div class="row row-2">
        <div class="row-title">Handover info</div>
        <div>
          <div class="handover-option">
            <div class="circle "></div> Drop-Off          </div>
          <div class="handover-option">
            <div class="circle active"></div> Pick-Up          </div>
        </div>
        <div class="dist-item">
          <p>DHL Distribution centre</p>
          <div class="box">USEWR1</div>
        </div>
      </div>

      <div class="row row-3">
        <div class="row-title">Remarks/VAS</div>
        <div class="underline-box"></div>
      </div>

    </div>
  </section>

  <section>
    <div class="section-header">
      <span class="num">4</span> Signature    </div>
    <div class="section-body section-4">
      <p>I declare the contents of the shipment under this Handover Note does not contain any prohibited or hazardous goods. The General Terms and Conditions of DHL eCommerce shall apply on the services provided by DHL eCommerce.</p>
      <div class="sub-section">
        <div>Signature</div>
        <div></div>
        <div>Date 28-June-2017 11:57:53</div>
      </div>
    </div>
  </section>

  <a class="print-button" href="#" onclick="window.print()">Print</a>

 </div>
 	</body>
 </html>

	<style type="text/css">


	/* ==========*
	* HTML TAGS *
	* ==========*/

	html, body {
	background: #FFFFFF;
	}

	body {
	display: block;
	color: #000000;
	font: normal 12px/130% Verdana, Arial, Helvetica, sans-serif;
	margin: 8px;
	-webkit-print-color-adjust: exact;
	}

	a {
	color: #000000;
	}

	h1, h2, h3, h4, h5, h6 {
	color: #000000;
	line-height: 150%;
	}

	/* Creates a separator between multiple documents */
	body > div.container .separator {
	border-top: 2px dashed #DDDDDD;
	border-bottom: none;
	margin: 50px 0 0;
	}

	body > div.container:last-child .separator {
	display: none;
	}

	/* ============= *
	* DHL STYLES *
	* ============= */

	* {
	box-sizing: border-box;
	}

	html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	}

	body {
	padding: 15px;
	}

	h1 {
	font-weight: 400;
	}

	.container {
	min-width: 700px;
	width: 960px;
	max-width: 90%;
	display: block;
	margin: auto;
	overflow: hidden;
	}

	.main-header,
	.sub-section,
	.section-body,
	.row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	}

	.row {
	width: 100%;
	margin-bottom: 10px;
	}

	.main-header {
	max-width: 100%;
	padding: 0 15px;
	background: #ffcc00;
	}

	header .logo {
	max-width: 200px;
	}

	header .header-barcode {
	max-width: 25%;
	}

	header .barcode {
	max-width: 100%;
	}

	.section-header {
	background: #ffcc00;
	padding: 10px 15px;
	}

	.section-header span.num {
	display: inline-block;
	background: #d40411;
	color: #fff;
	width: 1.5em;
	height: 1.5em;
	padding: 2px;
	margin-right: 5px;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	}

	.section-header:not(.num) {
	font-weight: 600;
	}

	.section-body {
	padding: 25px 15px;

	}

	.section-body img {
	max-width: 400px;
	}

	.name {
	display: inline-block;
	white-space: nowrap;
	margin-right: 10px;
	}

	.box {
	display: inline-block;
	border: 2px solid #000;
	min-height: 2.5em;
	width: 100%;
	min-width: 50px;
	padding: 5px 10px;
	font-size: 1.1em;
	line-height: 1.4em;
	}

	.section-1 > * {
	width: 40%;
	}

	img.img-acc-no {
	max-width: 100%;
	}

	.section-2 {
	align-items: flex-start;
	}

	.section-2 .box {
	width: 100%;
	}

	.row-2 {
	align-items: flex-end;
	}

	.row-2 > *:not(.dist-item) {
	margin-bottom: 15px;
	}

	.handover-option {
	margin-right: 15px;
	}

	.handover-option,
	.handover-option .circle {
	display: inline-block;
	}

	.handover-option .circle {
	width: 1.1em;
	height: 1.1em;
	border: 1px solid #000;
	border-radius: 50%;
	position: relative;
	}

	.handover-option .circle.active:after {
	content: '';
	position: absolute;
	background: #000;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	.underline-box {
	flex: 1 0 auto;
	border-bottom: 2px solid #000;
	min-width: 75%;
	min-height: 2em;
	}

	.row-title {
	padding-right: 15px;
	}

	.item {
	text-align: center;
	width: 24.5%;
	}

	.dist-item {
	text-align: center;
	width: 53%;
	}

	.dist-item .box {
	text-align: left;
	}

	.section-3 {
	flex-direction: column;
	}

	.section-4 {
	display: inline-block;
	}

	.section-4 .sub-section {
	width: 100%;
	}

	.section-4 .sub-section > *:first-child {
	padding-right: 30px;
	}

	.section-4 .sub-section > *:nth-child(2) {
	margin-right: auto;
	border-bottom: 2px solid #000;
	padding: 10px;
	width: 40%;
	}

	.print-button {
	margin: 50px auto 65px auto;
	display: block;
	text-decoration: none;
	text-align: center;
	font-size: 25px;
	}

	@media print {
	.print-button {
	display: none;
	}
	}
	</style>
	<!DOCTYPE HTML>
	<html lang="en-US">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>
	</title>
	</head>
	<body>

	<div class="container">

	<a class="print-button" href="#" onclick="window.print()">Print</a>

	<header class="main-header">
	<img src="http://dhlus.staging.wpengine.com/wp-content/plugins/pr-dhl-woocommerce/assets/img/dhl-official.png" alt="DHL logo" class="logo">
	<div class="document-title">
	<h1>Handover Note</h1>
	</div>
	<div class="header-barcode">
	<p>83143189726</p>
	<img src="http://dhlus.staging.wpengine.com/wp-content/plugins/pr-dhl-woocommerce/lib/barcode.php?text=83143189726&size=60" alt="barcode"/> </div>
	</header>

	<section>
	<div class="section-header">
	<span class="num">1</span> Pick-up Account Details </div>
	<div class="section-body section-1">

	<div class="sub-section">
	<div class="name">Pick-up Name</div>
	<div class="box">Pickup Name</div>
	</div>

	<div class="sub-section">
	<div class="name">Account No</div>
	<div>
	<p>000052002</p>
	<img src="http://dhlus.staging.wpengine.com/wp-content/plugins/pr-dhl-woocommerce/lib/barcode.php?text=000052002&size=60" alt="barcode"/> </div>
	</div>

	</div>
	</section>

	<section>
	<div class="section-header">
	<span class="num">2</span> Shipping Service(s) </div>
	<div class="section-body section-2">
	<div class="name">Shipping Service(s)</div>
	<div class="box">DHL SM Parcel Ground<br/>DHL GM Packet Plus<br/></div>
	</div>
	</section>

	<section>
	<div class="section-header">
	<span class="num">3</span> Details </div>
	<div class="section-body section-3">

	<div class="row row-1">
	<div class="row-title">Total</div>
	<div class="item">
	<p>No. of items</p>
	<div class="box">2</div>
	</div>
	<div class="item">
	<p>Weight(kg)</p>
	<div class="box">2</div>
	</div>
	<div class="item">
	<p>No. of Receptacles</p>
	<div class="box"></div>
	</div>
	</div>

	<div class="row row-2">
	<div class="row-title">Handover info</div>
	<div>
	<div class="handover-option">
	<div class="circle "></div> Drop-Off </div>
	<div class="handover-option">
	<div class="circle active"></div> Pick-Up </div>
	</div>
	<div class="dist-item">
	<p>DHL Distribution centre</p>
	<div class="box">USEWR1</div>
	</div>
	</div>

	<div class="row row-3">
	<div class="row-title">Remarks/VAS</div>
	<div class="underline-box"></div>
	</div>

	</div>
	</section>

	<section>
	<div class="section-header">
	<span class="num">4</span> Signature </div>
	<div class="section-body section-4">
	<p>I declare the contents of the shipment under this Handover Note does not contain any prohibited or hazardous goods. The General Terms and Conditions of DHL eCommerce shall apply on the services provided by DHL eCommerce.</p>
	<div class="sub-section">
	<div>Signature</div>
	<div></div>
	<div>Date 28-June-2017 11:57:53</div>
	</div>
	</div>
	</section>

	<a class="print-button" href="#" onclick="window.print()">Print</a>

	</div>
	</body>
	</html>