Skip to content

Instantly share code, notes, and snippets.

@dionysio
Created October 8, 2019 07:50
Show Gist options
  • Save dionysio/a8d88802738d368a2930e2107c83267f to your computer and use it in GitHub Desktop.
Save dionysio/a8d88802738d368a2930e2107c83267f to your computer and use it in GitHub Desktop.
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>TNT Label</title>
<script type="text/javascript">
var firstPagePrinted = false; function includePageBreak() { if (firstPagePrinted) { document.writeln('<div class="pagebreak">'); document.writeln('<font size="1" color="#FFFFFF">.</font>'); document.writeln('</div>'); } else { firstPagePrinted = true; } }
</script><style>
.outerLabel { width: 480px; height: 373px; } .row { width: 100%; float: left; } .bordered { border: 2px solid #000000; } .bordered + .bordered { border-top: 0px solid #000000; } .bordered > .bordered, .UKcolumn2 > .bordered { border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; } .bordered > .bordered:last-child, .UKcolumn2 > .bordered:last-child { border-bottom: 0px solid #000000; } .bordered-right { height: 100%; border-right: 2px solid #000000; } .padded2 { padding: 2px; } .centered { text-align: center; } .innerLabelheight { height: 362px; } .firstrowheight { text-align: right; height: 7px; } .secondrowheight, .thirdrowheight { height: 123px; } .collection, .goods, .services { width: 44%; float: left; overflow: hidden; } .Line80 { height: 25px; line-height: 100%; padding-left: 2px; } .Line75 { height: 21px; line-height: 100%; padding-left: 2px; } .address { height: 12px; line-height: 80%; padding-left: 2px; } .custref { overflow: hidden; border-top: 2px solid #000000; } .senderheaderheight { height: 11px; } .senderheaderrow1 { width: 20%; float: left; } .senderheaderrow2 { width: 80%; float: left; } .contactsrow1 { width: 25%; float: left; } .contactsrow2 { width: 75%; float: left; } .barcode, .delivery { width: 55%; float: left; } .fourthrowheight { height : 30px; } .specinstructions { width: 64%; overflow: hidden; float: left; } .dgsection { width: 33%; overflow: hidden; line-height: 26px; float: left; } .fifthrowheight { height: 81px; } .packages { width: 24.5%; float: left; overflow: hidden; } .fifthrowmargin { margin-left: 2px; padding-top: 2px; } .TandC { width: 29.5%; float: left; overflow: hidden; } .separatorheight { height: 10px; } .Line70 { line-height: 70%; padding-left: 2px; padding-bottom: 2px; } .Line40 { line-height: 9px; padding-left: 2px; padding-bottom: 1px; } .Line30 { line-height: 6px; } font { color: black; } font.carrierLicence { font-family: "courier new"; font-size: 7pt; } font.addressHeader { font-weight: bold; font-family: "arial"; font-size: 6pt; } font.addressData { font-family: "courier new"; font-size: 8pt; } font.addressDatasmall { font-family: "courier new"; font-size: 6pt; } font.addressHeaderRec { font-weight: bold; font-family: "arial"; font-size: 6pt; } font.addressDataRec { font-weight: bold; font-family: "courier new"; font-size: 8pt; } font.addressHeaderCode { font-weight: bold; font-family: "arial"; font-size: 8pt; letter-spacing: 0.2cm; } font.addressDataWeight { font-weight: bold; font-family: "courier new"; font-size: 11pt; } font.addressSmallPrint { font-family: "courier new"; font-size: 4pt; } img.center { display: inline-block; margin-bottom: 1px; margin-left: auto; margin-right: auto; margin-top: 1px; } div.pagebreak { page-break-before: always; } font.header { font-weight: bold; font-family: arial, helvetica "sans-serif"; font-size: 8pt; } font.data { font-family: arial, "sans-serif"; font-size: 8pt; } font.smallprint { font-family: arial, "sans-serif"; font-size: 6pt; } .padded { padding: 1px; } .padded-top30 { padding-top: 30px; } .data { } .dataBold { font-weight: bold; } .deliveryDepot { padding-top: 8px; font-size: 96px; } .deliveryPostcode, .premiumService { font-size: xx-large; font-weight: bold; } .text { line-height: 54px; font-size: 36pt; } .normalService { font-size: x-large; } .tntTelephone { font-size: small; } .UKouterlabel { height: 98%; width: 550px; } .UKinnerlabelheight { min-height: 625px; } .UKfirstrowheight { height: 90px; } .UKsecondrowheight { height: 130px; } .UKthirdrowheight { height: 244px; } .UKfourthrowheight { height: 150px; } .UKfifthrowheight { height: 115px; } .UKcolumn1 { width: 50%; float: left; } .UKcolumn2 { width: 45%; float: left; height: 100%; } .UKinnerrowheight { height: 31%; } .UKlogo { width: 62%; float: left; } .UKphone { width: 36%; float: left; } .label { width: 40%; float: left; } .UKlabel { width: 59%; float: left; }
</style>
</head>
<body>
<script type="text/Javascript">includePageBreak();</script><div class="UKouterlabel">
<div class="row UKinnerlabelheight bordered">
<div class="row UKfirstrowheight bordered">
<div class="UKcolumn1 bordered-right centered padded"><div class="row normalService padded-top30">Express</div></div>
<div class="UKcolumn2 padded2">
<div class="UKphone padded-top30">
<div class="row address tntTelephone centered"> Telephone </div>
<div class="row address tntTelephone centered"> 01827 303030 </div>
</div>
<div class="UKlogo"><img src="https://express.tnt.com/expresswebservices-website/rendering/images/tnt_logo.gif" width="167" height="83" border="0"></div>
</div>
</div>
<div class="row UKsecondrowheight bordered">
<div class="UKcolumn1 bordered-right padded">
<div class="label">
<div class="row Line75"> Coll. Depot: </div>
<div class="row Line75"> Sender A/c: </div>
<div class="row Line75"> Cons. No. </div>
<div class="row Line75"> Weight (kg): </div>
<div class="row Line75"> Item No.: </div>
<div class="row Line75"> Coll. Date : </div>
</div>
<div class="UKlabel">
<div class="row Line75">
<span class="data">FDX BECTON</span><span class="dataBold">680</span>
</div>
<div class="row Line75"><span class="dataBold">0002471683</span></div>
<div class="row Line75"><span class="dataBold">65174085</span></div>
<div class="row Line75"><span class="data">4.536</span></div>
<div class="row Line75"><span class="dataBold">001
of
001</span></div>
<div class="row Line75"><span class="data">10/10/2019</span></div>
</div>
</div>
<div class="row UKcolumn2 deliveryDepot centered">680</div>
</div>
<div class="row UKthirdrowheight bordered">
<div class="UKcolumn1 bordered-right padded">
<div class="row Line80 data">Deliver to:</div>
<div class="row Line80 dataBold">Jon Bravo</div>
<div class="row Line80 dataBold">GB Company</div>
<div class="row Line80 dataBold">88 Wood Street</div>
<div class="row Line80 dataBold">10th - 11th Floor</div>
<div class="row Line80 dataBold"></div>
<div class="row Line80 dataBold">London</div>
<div class="row Line80 dataBold">LN</div>
<div class="row Line80 dataBold">EC2V7RS</div>
<div class="row Line80 dataBold">UNITED KINGDOM</div>
</div>
<div class="UKcolumn2">
<div class="row UKinnerrowheight bordered padded2">
<div class="row Line80 data">Special Instructions:</div>
<div class="row Line80 dataBold"></div>
</div>
<div class="row UKinnerrowheight bordered padded2">
<div class="row Line80 data">Customer Reference:</div>
<div class="row Line80 dataBold">ref1</div>
</div>
<div class="row UKinnerrowheight bordered padded2"><div class="row Line80 deliveryPostcode centered padded-top30">EC2V7RS</div></div>
</div>
</div>
<div class="row UKfourthrowheight bordered centered padded2">
<div class="row Line80 data padded2">6680000247168365174085001680</div>
<img src="https://express.tnt.com/barbecue/barcode?data=680000247168365174085001680&amp;type=UCC128&amp;appid=6&amp;height=105">
</div>
</div>
<div class="UKfifthrowheight">
<div class="row centered"><font class="text"><b>Address Label</b></font></div>
<div class="row Line80 centered"><font class="data"></font></div>
<div class="row Line80 centered"><font class="data"></font></div>
<div class="row Line80 centered"><font class="data"></font></div>
<div class="row Line80 centered"><font class="data">Please fold this page and attach it to your parcel</font></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment