This code creates an HTML/CSS layout for an international airline ticket. It displays essential flight details in a visually appealing format. The code structures boarding pass information, making it visually representational. It helps showcase flight details effectively in a simulated ticket format.
You can use this code on travel websites or flight booking systems to showcase flight information. It adds visual appeal, making flight details easy to understand at a glance. This code simplifies presenting travel data attractively for user engagement.
How to Create International Airline Ticket In HTML CSS
1. First of all, link the Font Awesome CDN in the <head> section using <link> to access icons for the airplane and arrow icons.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
2. Create the HTML structure for the ticket. Use <div> elements to organize different sections of the ticket like ‘container’, ‘ticket’, ‘top’, ‘bottom’, and more:
<div class="container"> <div class="ticket basic"> <p>Admit One</p> </div> <div class="ticket airline"> <div class="top"> <h1>boarding pass</h1> <div class="big"> <p class="from">BWI</p> <p class="to"><i class="fas fa-arrow-right"></i> SAN</p> </div> <div class="top--side"> <i class="fas fa-plane"></i> <p>Baltimore</p> <p>San Diego</p> </div> </div> <div class="bottom"> <div class="column"> <div class="row row-1"> <p><span>Flight</span>AA2005</p> <p class="row--right"><span>Gate</span>B3</p> </div> <div class="row row-2"> <p><span>Boards</span>10:25 AM</p> <p class="row--center"><span>Departs</span>11:00 AM</p> <p class="row--right"><span>Arrives</span>1:05 PM</p> </div> <div class="row row-3"> <p><span>Passenger</span>Jesus Ramirez</p> <p class="row--center"><span>Seat</span>11E</p> <p class="row--right"><span>Group</span>3</p> </div> </div> <div class="bar--code"></div> </div> </div> <div class="info"> <p>Based on <a href="https://dribbble.com/shots/11399236-Boarding-Pass" target="_blank">this</a> Dribbble from Barna Erdei</p> </div> </div>
3. Apply CSS styles to the HTML elements to design the ticket layout. Use classes to target specific sections and apply styles for backgrounds, fonts, positioning, and more. Style the top part (flight destination and time) with appropriate background colors, fonts, and positioning.
Similarly, design the bottom section for flight details using flexbox for layout and appropriate font sizes. Create a barcode-like element using CSS and position it in the layout.
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
body,
p,
h1 {
margin: 0;
padding: 0;
font-family: "Open Sans", sans-serif;
}
.container {
background: #e0e2e8;
position: relative;
width: 100%;
height: 100vh;
}
.container .ticket {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container .basic {
display: none;
}
.airline {
display: block;
height: 575px;
width: 270px;
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
border-radius: 25px;
z-index: 3;
}
.airline .top {
height: 220px;
background: #ffcc05;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.airline .top h1 {
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2;
text-align: center;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.airline .bottom {
height: 355px;
background: #fff;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
.top .big {
position: absolute;
top: 100px;
font-size: 65px;
font-weight: 700;
line-height: 0.8;
}
.top .big .from {
color: #ffcc05;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
.top .big .to {
position: absolute;
left: 32px;
font-size: 35px;
display: flex;
flex-direction: row;
align-items: center;
}
.top .big .to i {
margin-top: 5px;
margin-right: 10px;
font-size: 15px;
}
.top--side {
position: absolute;
right: 35px;
top: 110px;
text-align: right;
}
.top--side i {
font-size: 25px;
margin-bottom: 18px;
}
.top--side p {
font-size: 10px;
font-weight: 700;
}
.top--side p + p {
margin-bottom: 8px;
}
.bottom p {
display: flex;
flex-direction: column;
font-size: 13px;
font-weight: 700;
}
.bottom p span {
font-weight: 400;
font-size: 11px;
color: #6c6c6c;
}
.bottom .column {
margin: 0 auto;
width: 80%;
padding: 2rem 0;
}
.bottom .row {
display: flex;
justify-content: space-between;
}
.bottom .row--right {
text-align: right;
}
.bottom .row--center {
text-align: center;
}
.bottom .row-2 {
margin: 30px 0 60px 0;
position: relative;
}
.bottom .row-2::after {
content: "";
position: absolute;
width: 100%;
bottom: -30px;
left: 0;
background: #000;
height: 1px;
}
.bottom .bar--code {
height: 50px;
width: 80%;
margin: 0 auto;
position: relative;
}
.bottom .bar--code::after {
content: "";
position: absolute;
width: 6px;
height: 100%;
background: #000;
top: 0;
left: 0;
box-shadow: 10px 0 #000, 30px 0 #000, 40px 0 #000, 67px 0 #000, 90px 0 #000, 100px 0 #000, 180px 0 #000, 165px 0 #000, 200px 0 #000, 210px 0 #000, 135px 0 #000, 120px 0 #000;
}
.bottom .bar--code::before {
content: "";
position: absolute;
width: 3px;
height: 100%;
background: #000;
top: 0;
left: 11px;
box-shadow: 12px 0 #000, -4px 0 #000, 45px 0 #000, 65px 0 #000, 72px 0 #000, 78px 0 #000, 97px 0 #000, 150px 0 #000, 165px 0 #000, 180px 0 #000, 135px 0 #000, 120px 0 #000;
}
.info {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
font-size: 14px;
text-align: center;
z-index: 1;
}
.info a {
text-decoration: none;
color: #000;
background: #ffcc05;
}
That’s all! hopefully, you have successfully created an international airline ticket design. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Full Screen Width and Height Sections Using CSS
- Gravity Button Using Pure CSS
- Wobbly Text Effect Using CSS & SVG
- Feedback Form With Star Rating in HTML
- Neumorphic Buttons with Icons Using CSS
- Arched Toggle Switch Using HTML & CSS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.