Boarding Pass CSS HTML Code
An example of a ready-made boarding pass design using pure CSS code.
Super
0
62
Take a look and take the html css code with a great, light design for your project. You can just copy the whole css of the project and tweak it to your needs.
This is a css design for a card, a boarding ticket for an airplane with detailed information about departure and arrival, flight time, place and more.
This project was copied from one of the YouTube channels.
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Boarding Pass</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Nunito Sans', sans-serif;
height: 100vh;
background: linear-gradient(45deg, #eaeaea 33.33%, #c7ecee 33.33%, #c7ecee 66.66%, #eaeaea 66.66%);
}
.boarding-pass{
position: relative;
width: 320px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(0 0 4px rgba(0,0,0,0.98));
}
.boarding-pass .card{
display: flex;
background-color: #ffffff;
padding: 24px;
border-radius: 16px;
}
.boarding-pass .card.card-top{
text-align: center;
justify-content: space-between;
border-radius: 16px 16px 0 0;
}
.boarding-pass .card.card-top .code{
font-size: 32px;
font-family: 900;
}
.boarding-pass .card.card-top .city{
font-size: 10px;
color: #48dbfb;
}
.flight-median{
position: relative;
height: 50px;
width: 100px;
top: 12px;
/*background-color: red;*/
border-radius: 100% 100% 0 0 / 180% 180% 0 0;
border: 2px dashed transparent;
border-top-color: #c7ecee;
}
.flight-median:before {
content: '';
position: absolute;
height: 6px;
width: 6px;
top: 14px;
left: 5px;
background-color: #48dbfb;
border-radius: 50%;
box-shadow: 80px 0 0 #48dbfb;
}
.flight-median i{
position: relative;
top: -11px;
color: #48dbfb;
}
.boarding-pass .card.card-bottom{
flex-direction: column;
border-radius: 0 0 16px 16px;
}
.boarding-pass .card.card-bottom .card-row{
display: flex;
justify-content: space-between;
}
.boarding-pass .card.card-bottom .card-row:not(:last-child){
margin-bottom: 32px;
}
.boarding-pass .card.card-bottom .label{
font-size: 10px;
color: #0abde3;
}
.boarding-pass .card.card-bottom .content{
font-size: 14px;
font-weight: 100;
}
.median{
height: 24px;
margin: 0 auto;
background-image: radial-gradient(circle, transparent 72%, #ffffff 72%),
repeating-linear-gradient(90deg, #ffffff 0, #ffffff 2%, #c7ecee 2%, #c7ecee 4%),
linear-gradient(#ffffff, #ffffff),
radial-gradient(circle, transparent 72%, #ffffff 72%);
background-size: 24px 24px, calc(100% - 24px) 1px, calc(100% - 24px) 100%, 24px 24px;
background-position: -12px 0, 12px 50%, 12px 0, calc(100% + 12px) 0;
background-repeat: no-repeat;
}
</style>
<body>
<div class="boarding-pass">
<div class="card card-top">
<div class="source">
<div class="code">IMX</div>
<div class="city">Madurai</div>
</div>
<div class="flight-median">
<i class="fas fa-plane"></i>
</div>
<div class="destination">
<div class="code">DXB</div>
<div class="city">Dubai</div>
</div>
</div>
<div class="median"></div>
<div class="card card-bottom">
<div class="card-row">
<div class="card-item">
<span class="label">Passanger</span>
<p class="content">Nedunchezhiyan</p>
</div>
<div class="card-item">
<span class="label">Date</span>
<p class="content">09/02/2023</p>
</div>
</div>
<div class="card-row">
<div class="card-item">
<span class="label">Flight No</span>
<p class="content">SG720</p>
</div>
<div class="card-item">
<span class="label">Gate</span>
<p class="content">B2</p>
</div>
<div class="card-item">
<span class="label">Seat</span>
<p class="content">4G</p>
</div>
<div class="card-item">
<span class="label">Class</span>
<p class="content">Businnes</p>
</div>
</div>
<div class="card-row">
<div class="card-item">
<span class="label">Boarding Time</span>
<p class="content">11:00 IST</p>
</div>
<div class="card-item">
<span class="label">Travelling Time</span>
<p class="content">04:30</p>
</div>
<div class="card-item">
<span class="label">Arrival Time</span>
<p class="content">14:00 GST</p>
</div>
</div>
</div>
</div>
</body>
</html>
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
