HTML boarding ticket, informer, widget CSS design.

Boarding pass design for mobile website HTML CSS.

HTML boarding ticket, informer, widget CSS design.
HTML boarding ticket, informer, widget CSS design.

On the Internet, I found js with the output of the dynamic style of the boarding pass.
This code has been slightly redone to a regular html css version.

CSS


		* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  perspective: 700px;
  font-family: Roboto-Regular, HelveticaNeue, Arial, sans-serif;
}

.root {
  display: flex;
  align-items: center;
  justify-content: center;
	background: #ededed;
}

.back {
  width: 26px;
  height: 26px;
  position: absolute;
  z-index: 10;
  left: -4px;
  top: 29px;
}

.settings {
  width: 26px;
  height: 26px;
  position: absolute;
  z-index: 10;
  top: 117px;
  right: 0px;
}

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
  box-shadow: 0px 0px 41px -7px rgba(0, 0, 0, 0.15);
  width: 400px;
  height: auto;
	background: #f3f3f3;
}

.headerText {
  color: rgb(34, 34, 34);
  font-weight: bold;
  font-size: 20px;
  width: 340px;
  height: 46px;
  text-align: center;
  margin-top: 30px;
  word-spacing: 2px;
  letter-spacing: 1px;
}

.tripDetail {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: #747474;
  font-size: 10px;
  margin-top: 26px;
  letter-spacing: 2px;
  margin-bottom: 26px;
}

.tripDest {
  color: #141414;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 1px;
  display: flex;
}

.oneWay {
  font-size: 10px;
  font-weight: 100;
  background: #498eff;
  border: 1px solid #0061ff;
  color: #fff;
  position: relative;
  height: 20px;
  padding: 3px 5px;
  margin-top: 7px;
  border-radius: 3px;
  margin-left: 7px;
}

.headerInput {
  width: 340px;
  height: 40px;
  border: none;
  background: #262626;
  border-radius: 5px;
  border: 1px solid rgb(81, 81, 81);
  padding-top: 8px;
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

::placeholder {
  color: #c0c0c0;
  font-size: 20px;
  font-weight: bold;
}

.cardContainer {
  position: relative;
  width: 340px;
  height: 100px;
  /* background: rgb(194, 194, 194); */
  border-radius: 5px;
  transform-origin: bottom;
  margin: 20px;
}

.first {
  width: 340px;
  height: 100px;
  position: absolute;
  border-radius: 5px;
  color: #000;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: 0.5s;
  border-radius: 8px;
  display: flex;
  /* backface-visibility: hidden; */
}

.detailDate {
  color: #a09a9a;
  font-size: 9px;
  padding-top: 11px;
}

.detailTime {
  font-weight: bold;
  font-size: 21px;
  color: #000;
}

.detailSub {
  width: 200px;
  height: 100px;
  position: relative;
  border-radius: 0px 8px 8px 0px;
  background: #0a0a0a;
}
.firstDisplay {
  width: 100%;
  height: 100px;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 18px 23px;
  flex-wrap: wrap;
  backface-visibility: hidden;
  box-shadow: 0px 0px 25px -1px rgba(0, 0, 0, 0.17);
}

.info {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #b2b2b2;
  font-size: 10px;
}

.flightDetail {
  font-size: 23px;
  font-weight: bold;
  color: #3f3f3f;
  flex: 0.5;
  text-align: center;
}

.animContainer {
  padding-left: 0px;
  position: absolute;
  width: 19px;
  height: 10px;
  top: 10px;
  left: 15px;
  overflow: hidden;
}

.anim {
  width: 54px;
  position: absolute;
  display: flex;
  animation: slidein 1s infinite linear;
}

@keyframes slidein {
  to {
    transform: translateX(-18px);
  }

  from {
    transform: translateX(0px);
  }
}

.circle {
  width: 5px;
  height: 5px;
  background: #707070;
  border-radius: 50%;
  margin-right: 13px;
}
.firstTop {
  width: 340px;
  height: 100px;
  position: absolute;
  background: #ffffff;
  backface-visibility: hidden;
  border-radius: 8px;
  border-radius: 8px;
  box-shadow: 0px 0px 3px 0px rgba(132, 132, 132, 0.15);
  display: flex;
  justify-content: space-around;
}

.timecontainer {
  display: flex;
  padding-right: 10px;
  padding-top: 14px;
}

.firstBehind {
  width: 340px;
  height: 100px;
  position: absolute;
  background: #fff;
  transform-origin: center;
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  border-radius: 8px;
  border: 1px dashed #d1d1d1;
  border-left: none;
  border-right: none;
}

.firstBehindDisplay {
  width: 100%;
  height: 100px;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  padding: 12px 23px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
}

.firstBehindRow {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 7px;
  text-align: left;
}

.detail {
  font-size: 15px;
  color: rgb(69, 69, 69);
  font-weight: bold;
}

.detailLabel {
  color: #686868;
  font-size: 10px;
  font-weight: 100;
}

.second {
  width: 340px;
  height: 50px;
  position: absolute;
  bottom: -2px;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: 0.2s;
  border-radius: 8px;
}

.secondTop {
  width: 340px;
  height: 50px;
  position: absolute;
  background: rgb(231, 231, 231);
  backface-visibility: hidden;
  border-radius: 8px;
}

.thirdTop {
  width: 340px;
  height: 50px;
  position: absolute;
  background: rgb(190, 190, 190);
  backface-visibility: hidden;
  border-radius: 8px;
}

.secondBehind {
  width: 340px;
  height: 50px;
  position: absolute;
  background: #fff;
  transform-origin: center;
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  border-radius: 8px;
  border: 1px dashed #d1d1d1;
  border-left: none;
  border-right: none;
}

.secondBehindDisplay {
  width: 100%;
  height: 50px;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  border-bottom: 1px dashed #d1d1d1;
  display: flex;
  justify-content: space-between;
  padding: 10px 23px;
  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
}

.secondBehindBottom {
  width: 340px;
  height: 50px;
  position: absolute;
  background: #fff;
  transform-origin: center;
  transform: rotate3d(1, 0, 0, -180deg);
  backface-visibility: hidden;
  border-radius: 0px 0px 8px 8px;
  border-radius: 8px;
  box-shadow: 0px 11px 25px -1px rgba(0, 0, 0, 0.17);
}

.third {
  width: 340px;
  height: 50px;
  position: absolute;
  transform-origin: bottom;
  transform-style: preserve-3d;
  transition: 0.2s;
  border-radius: 8px;
}

.button {
  color: #2d2d2d;
  font-size: 19px;
  font-weight: bold;
  padding: 4px 124px;
  border: 1px solid #2d2d2d;
  background: #fff;
  border-radius: 4px;
  margin-top: 9px;
}

.price {
  color: #2d2d2d;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  margin-top: -2px;
}

.priceLabel {
  color: #747474;
  font-weight: 100;
  font-size: 10px;
  text-align: left;
}

.barCode {
  width: 98px;
  height: 30px;
}

HTML

<div class="cardContainer" style="height: 300px; transition: 0.9s;">
<div class="firstDisplay">
<div class="flightDetail">
<div class="detailLabel" style="font-weight: bold; color: rgb(13, 28, 83);">
From
</div>
DXB<div class="detailLabel">Kempegowda International</div>
</div>
<div class="flightDetail" style="margin-top: 15px;">
<div class="animContainer">
<div class="anim">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<div class="animContainer" style="left: 62px;">
<div class="anim">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<img src="airplane2.png" style="width: 30px;"></div>
<div class="flightDetail">
<div class="detailLabel" style="font-weight: bold; color: rgb(13, 28, 83);">To</div>
DAC<div class="detailLabel">Dhaka</div>
</div>
</div>
<div class="first" style="transform: rotate3d(1, 0, 0, -180deg); transition-delay: 0s;">
<div class="firstTop">
<img src="https://beebom.com/wp-content/uploads/2018/12/Lufthansa-Logo.jpg" style="height: 51px; margin: 22px 12px;">
<div class="timecontainer">
<div class="detailDate">
Bengaluru
<div class="detailTime">6:20</div>June 12
</div>
<img src="airplane2.png" style="width: 30px; height: 26px; margin-top: 22px; margin-left: 16px; margin-right: 16px;">
<div class="detailDate">
New Delhi
<div class="detailTime">8:45</div>
June 12
</div>
</div>
</div>
<div class="firstBehind">
<div class="firstBehindDisplay">
<div class="firstBehindRow">
<div class="detail">
6:20 - 8:45
<div class="detailLabel">Flight Time</div>
</div>
<div class="detail">
No
<div class="detailLabel">Transfer</div>
</div>
</div>
<div class="firstBehindRow">
<div class="detail">
2h 25 min
<div class="detailLabel">Duration</div>
</div>
<div class="detail">8
<div class="detailLabel">Gate</div>
</div>
</div>
<div class="firstBehindRow">
<div class="detail">5:35
<div class="detailLabel">Boarding</div>
</div>
<div class="detail">20A
<div class="detailLabel">Seat</div>
</div>
</div>
</div>
<div class="second" style="transform: rotate3d(1, 0, 0, -180deg); transition-delay: 0.2s;">
<div class="secondTop">
</div>
<div class="secondBehind">
<div class="secondBehindDisplay">
<div class="price">$100
<div class="priceLabel">Price</div>
</div>
<div class="price">Economy
<div class="priceLabel">Class</div>
</div>
<img class="barCode" src="barcode.png"></div>
<div class="third" style="transform: rotate3d(1, 0, 0, -180deg); transition-delay: 0.4s;">
<div class="thirdTop"></div>

<div class="secondBehindBottom">
<div class="firstTop">
<img src="https://beebom.com/wp-content/uploads/2015/02/airline-logos-qatar-e1424574584611.png" style="height: 26px; margin: 34px 16px;">
<div class="timecontainer">
<div class="detailDate">Bengaluru
<div class="detailTime">6:20</div>
June 12</div>
<img src="airplane2.png" style="width: 30px; height: 26px; margin-top: 22px; margin-left: 16px; margin-right: 16px;">
<div class="detailDate">
New Delhi
<div class="detailTime">8:45</div>
June 12
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.