International Airline Ticket in HTML CSS

International Airline Ticket in HTML CSS
Code Snippet:Airline Ticket #CodePenChallenge
Author: Jesus Ramirez
Published: January 5, 2024
Last Updated: January 22, 2024
Downloads: 459
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...