<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/webandapp/pen/ONmOpe?limit=all&page=23&q=terminal" />
<style class="cp-pen-styles">
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
html {
box-sizing: border-box;
}
body {
background: linear-gradient(45deg, rgba(204,31,48,1) 0%, rgba(123,53,132,1) 100%);
}
.page:after {
content: '';
display: block;
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.5);
z-index: -1;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: Helvetica,Arial,sans-serif;
}
.boarding-pass.full {
height: 520px;
width: 320px;
position: relative;
background: #dedede;
padding: 0 0 20px 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.boarding-pass header {
background: #cc1f2f;
padding: 15px 10px;
color: #fff;
text-align: center;
font-size: 12px;
}
.boarding-pass p {
margin: 0;
}
.boarding-pass .hero {
background: rgba(204,31,48,1);
background: linear-gradient(45deg, rgba(123,53,132,1) 0%, rgba(204,31,48,1) 100%);
color: #fff;
padding: 30px 0 80px 0;
}
.boarding-pass .hero:after {
content: '';
clear: both;
display: block;
}
.boarding-pass .hero p {
float: left;
width: 50%;
text-align: center;
}
.boarding-pass .hero strong {
display: block;
font-size: 40px;
font-weight: normal;
}
.boarding-pass .hero span {
font-size: 12px;
}
.boardcard {
perspective: 1000;
margin: 0 auto;
margin-top: -50px;
}
.boardcard label {
display: block;
font-size: 12px;
margin-bottom: 2px;
color: #969696;
}
.boardcard .row {
margin-bottom: 20px;
}
.boardcard:hover .card {
transform: rotateY(180deg);
}
.boardcard, .front, .back {
width: 280px;
height: 330px;
}
.card {
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #fff;
box-shadow: -4px 23px 48px -13px rgba(0,0,0,0.75);
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.row:after {
content: '';
clear: both;
display: block;
}
.col-50 {
width: 50%;
float: left;
}
.col-33 {
width: 33.33%;
float: left;
}
.col-25 {
width: 25%;
float: left;
}
.col-75 {
width: 75%;
float: left;
}
.col-50:nth-child(2),
.terminal,
.gate, .seat {
text-align: right;
}
.scanner {
text-align: center;
padding: 0 0 0 0;
margin: -20px 0 0px 0;
}
.qrcode {
display: inline-block;
width: 120px;
position: relative;
}
#nav-toggle {
position: absolute;
top: 20px;
right: 10px;
height: 20px;
width: 20px;
cursor: pointer;
}
#nav-toggle div {
position: 0;
top: 5px;
left: 0px;
height: 1px;
width: 20px;
background: #fff;
cursor: pointer;
}
#nav-toggle:hover div {
background: #fff;
transform: translateY(0);
}
#nav-toggle:hover div:after {
transform: rotate(0deg) translate(0,0);
}
#nav-toggle:hover div:before {
transform: rotate(0deg) translate(0,0);
}
#nav-toggle div:after,
#nav-toggle div:before {
content: '';
height: 1px;
width: 20px;
position: absolute;
background: #fff;
}
#nav-toggle div:before {
top: -5px;
}
#nav-toggle div:after {
top: 5px;
}
#nav-toggle div {
background: transparent;
transform: translateY(5px);
}
#nav-toggle div:after {
transform: rotate(45deg) translate(-7px, -7px);
}
#nav-toggle div:before {
transform: rotate(-45deg) translate(0,0);
}
.hotline {
font-size: 12px;
text-align: center;
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
color: #aaa;
}
.back li,
.back p {
line-height: 1.4;
font-size: 13px;
}
.back li {
margin-bottom: 5px;
}
</style></head><body>
<div class="page">
<div class="boarding-pass full">
<div id="nav-toggle"><div></div></div>
<header>
<p>
AX123 / TXL-ORY / 12.05.16 09:30
</p>
</header>
<div class="hero">
<p class="departure">
<strong>TXL</strong>
<span>Berlin Tegel</span>
</p>
<p class="destination">
<strong>ORY</strong>
<span>Paris Orly</span>
</p>
</div>
<div class="boardcard">
<div class="card">
<div class="front">
<div class="flight-info">
<div class="row">
<p class="col-50">
<label>Date</label>
<span>12 MAY 2016</span>
</p>
<p class="col-50">
<label>Time</label>
<span>09:30</span>
</p>
</div>
<div class="row">
<p class="col-50">
<label>Flight-No.</label>
<span>AX123</span>
</p>
<p class="col-50 gate">
<label>Terminal / Gate</label>
<span>012 / A3</span>
</p>
</div>
</div>
<div class="scanner">
<svg class="qrcode">
<use xlink:href="#qrcode"></use>
</svg>
</div>
<div class="row">
<p class="col-75 passenger">
<label>Passenger</label>
<span>Axel Michel</span>
</p>
<p class="col-25 seat">
<label>Seat</label>
<span>14 A</span>
</p>
</div>
<p class="hotline">Need Help? Call 0800 01 01 01</p>
</div>
<div class="back">
<p>
There could be a lot of additional information we could display here:
</p>
<ul>
<li>boarding time?</li>
<li>Flight duration Time</li>
<li>Stops / next leg?</li>
<li>Landing time</li>
</ul>
<p class="disclaimer">Well, yes and all required disclaimers. Should be enough space for that too.</p>
<p class="hotline">Need Help? Call 0800 01 01 01</p>
</div>
</div>
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
<symbol id="qrcode" viewBox="0 0 130 130">
<g>
<path fill="#334158" d="M123,3h-5h-5h-5h-5h-5h-5v5v5v5v5v5v5v5h5h5h5h5h5h5h5v-5v-5v-5v-5v-5V8V3H123z M123,13v5v5v5v5h-5h-5h-5
h-5h-5v-5v-5v-5v-5V8h5h5h5h5h5V13z"/>
<polygon fill="#334158" points="88,13 88,8 88,3 83,3 78,3 78,8 78,13 83,13 "/>
<polygon fill="#334158" points="63,13 68,13 73,13 73,8 73,3 68,3 68,8 63,8 58,8 58,13 53,13 53,8 53,3 48,3 48,8 43,8 43,13
48,13 48,18 43,18 43,23 48,23 53,23 53,18 58,18 58,23 63,23 63,18 "/>
<polygon fill="#334158" points="108,13 103,13 103,18 103,23 103,28 108,28 113,28 118,28 118,23 118,18 118,13 113,13 "/>
<polygon fill="#334158" points="78,18 73,18 73,23 78,23 83,23 83,18 "/>
<polygon fill="#334158" points="23,28 28,28 28,23 28,18 28,13 23,13 18,13 13,13 13,18 13,23 13,28 18,28 "/>
<polygon fill="#334158" points="53,28 53,33 53,38 58,38 58,33 58,28 58,23 53,23 "/>
<rect x="63" y="23" fill="#334158" width="5" height="5"/>
<rect x="68" y="28" fill="#334158" width="5" height="5"/>
<path fill="#334158" d="M13,38h5h5h5h5h5v-5v-5v-5v-5v-5V8V3h-5h-5h-5h-5h-5H8H3v5v5v5v5v5v5v5h5H13z M8,28v-5v-5v-5V8h5h5h5h5h5v5
v5v5v5v5h-5h-5h-5h-5H8V28z"/>
<polygon fill="#334158" points="48,33 48,28 43,28 43,33 43,38 48,38 "/>
<polygon fill="#334158" points="83,38 88,38 88,33 88,28 88,23 83,23 83,28 78,28 78,33 83,33 "/>
<polygon fill="#334158" points="23,43 18,43 13,43 8,43 3,43 3,48 8,48 13,48 18,48 23,48 28,48 28,43 "/>
<rect x="108" y="43" fill="#334158" width="5" height="5"/>
<rect x="28" y="48" fill="#334158" width="5" height="5"/>
<polygon fill="#334158" points="88,53 93,53 93,48 93,43 88,43 88,48 83,48 83,53 "/>
<polygon fill="#334158" points="123,48 123,43 118,43 118,48 118,53 118,58 123,58 123,63 118,63 113,63 113,68 118,68 118,73
118,78 123,78 123,83 128,83 128,78 128,73 123,73 123,68 128,68 128,63 128,58 128,53 123,53 "/>
<polygon fill="#334158" points="98,58 98,63 103,63 103,68 108,68 108,63 108,58 103,58 103,53 103,48 103,43 98,43 98,48 98,53
93,53 93,58 "/>
<rect x="108" y="53" fill="#334158" width="5" height="5"/>
<rect x="78" y="63" fill="#334158" width="5" height="5"/>
<rect x="93" y="63" fill="#334158" width="5" height="5"/>
<rect x="53" y="68" fill="#334158" width="5" height="5"/>
<polygon fill="#334158" points="108,73 108,78 108,83 113,83 113,78 113,73 113,68 108,68 "/>
<rect x="13" y="73" fill="#334158" width="5" height="5"/>
<rect x="98" y="73" fill="#334158" width="5" height="5"/>
<polygon fill="#334158" points="18,83 18,88 23,88 28,88 28,83 23,83 23,78 18,78 "/>
<polygon fill="#334158" points="8,83 8,78 8,73 8,68 13,68 13,63 13,58 13,53 8,53 3,53 3,58 3,63 3,68 3,73 3,78 3,83 3,88 8,88
"/>
<rect x="53" y="83" fill="#334158" width="5" height="5"/>
<rect x="73" y="83" fill="#334158" width="5" height="5"/>
<path fill="#334158" d="M108,88v-5h-5h-5h-5h-5v-5h5v-5h-5v-5h-5v5h-5h-5v-5h-5h-5v5h5v5h-5v5v5h5v-5h5v-5h5h5v5v5h-5v5h5v5h-5h-5
v5h5v5h5v5v5h-5v5h5h5h5v5h5h5h5h5h5h5h5v-5v-5v-5v-5v-5v-5v-5h-5h-5v-5v-5h-5v5H108z M98,118h-5v-5h5V118z M98,103h-5h-5v-5v-5v-5
h5h5h5v5v5v5H98z M123,118v5h-5h-5v-5h-5h-5v-5h5v-5h5v5v5h5v-5h5V118z M118,98h5v5h-5h-5v-5H118z"/>
<path fill="#334158" d="M28,93h-5h-5h-5H8H3v5v5v5v5v5v5v5h5h5h5h5h5h5h5v-5v-5v-5v-5v-5v-5v-5h-5H28z M33,103v5v5v5v5h-5h-5h-5h-5
H8v-5v-5v-5v-5v-5h5h5h5h5h5V103z"/>
<rect x="93" y="93" fill="#334158" width="5" height="5"/>
<polygon fill="#334158" points="63,98 68,98 68,93 63,93 58,93 53,93 53,88 48,88 48,83 43,83 43,78 48,78 48,73 43,73 43,68
48,68 53,68 53,63 58,63 58,68 63,68 63,63 63,58 68,58 73,58 73,63 78,63 78,58 83,58 83,53 78,53 78,48 83,48 83,43 83,38 78,38
78,33 73,33 73,38 73,43 68,43 68,38 68,33 63,33 63,38 63,43 63,48 68,48 73,48 73,53 68,53 63,53 58,53 58,58 53,58 53,53 53,48
58,48 58,43 53,43 48,43 43,43 38,43 33,43 33,48 38,48 38,53 33,53 33,58 38,58 43,58 43,63 38,63 33,63 33,68 38,68 38,73 33,73
28,73 28,68 28,63 33,63 33,58 28,58 23,58 18,58 18,63 23,63 23,68 18,68 18,73 23,73 23,78 28,78 33,78 38,78 38,83 33,83 33,88
38,88 43,88 43,93 43,98 48,98 48,103 53,103 53,98 58,98 58,103 58,108 63,108 63,103 "/>
<polygon fill="#334158" points="18,103 13,103 13,108 13,113 13,118 18,118 23,118 28,118 28,113 28,108 28,103 23,103 "/>
<polygon fill="#334158" points="48,108 48,103 43,103 43,108 43,113 43,118 43,123 43,128 48,128 53,128 53,123 48,123 48,118
48,113 53,113 58,113 58,108 53,108 "/>
<polygon fill="#334158" points="78,118 78,113 78,108 73,108 68,108 63,108 63,113 68,113 68,118 63,118 63,123 63,128 68,128
68,123 73,123 73,118 "/>
<rect x="73" y="123" fill="#334158" width="5" height="5"/>
</g>
</symbol>
</svg>
</body></html>
