Skip to content

Instantly share code, notes, and snippets.

@NimaFakoor

NimaFakoor/index.html

Created June 21, 2019 12:50
Show Gist options
  • Save NimaFakoor/e30c4f5e4b42ec5cc6445d6aba11c8dd to your computer and use it in GitHub Desktop.
Save NimaFakoor/e30c4f5e4b42ec5cc6445d6aba11c8dd to your computer and use it in GitHub Desktop.
Download ZIP
Ticket
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tiket</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col delapan head-left">
<div class="row">
<h1>MADMOR PASS</h1>
</div>
<div class="left">
<span class="thin">MADMOR TICKET BAGGAGE CHECK</span>
</div>
<div class="right pad-right">
<span class="thin">FIRST CLASS</span>
</div>
</div>
<div class="col empat head-right">
<h1>MADMOR PASS</h1>
<span class="thin">MADMOR TICKET BAGGAGE CHECK</span>
</div>
</div>
<div class="row">
<div class="col dua">
<img src="https://i.imgur.com/6EDNhCI.png" style="width:200px" alt="">
<div class="barcode">
<img src="https://i.imgur.com/UagFP45.png" style="width:150px" alt="">
</div>
</div>
<div class="col enam info-left">
<div class="row info">
<div class="box">
<span class="bold">GATE</span><br>
<span class="numb">7</span>
</div>
<div class="box">
<span class="bold">GATE ClOSES</span><br>
<span class="numb">19:30</span>
</div>
<div class="box">
<span class="bold">SEAT</span><br>
<span class="numb">25b</span>
</div>
</div>
<br><br><br>
<div class="row info">
<table>
<tr>
<td colspan="2">
<span class="bold">Class</span><br>
<span class="courier">FIRST CLASS</span>
</td>
</tr>
<tr>
<td>
<span class="bold">Departure</span><br>
<span class="courier">Medan</span>
</td>
<td>
<span class="bold">Arrival</span><br>
<span class="courier">Sibolga</span>
</td>
</tr>
<tr>
<td colspan="2">
<span class="bold">R. No</span><br>
<span class="courier">023 07654 00984</span>
</td>
</tr>
</table>
</div>
</div>
<div class="col empat info-right courier">
<span class="bold">GATE : </span><br>
<span class="value">7</span><br>
<span class="bold">GATE CLOSES : </span><br>
<span class="value">19:30</span><br>
<span class="bold">SEAT : </span><br>
<div class="gate-close">25b</div><br>
<div class="barcode">
<img src="https://i.imgur.com/UagFP45.png" style="width:150px" alt="">
</div>
</div>
</div>
<div class="row">
<div class="footer delapan bottom-left"></div>
<div class="footer empat bottom-right"></div>
</div>
</div>
</body>
</html>
Raw
style.css
body{
font-family: calibri;
background-color: #ccc;
}
h1,h2,h3,h4,h5{
padding: 0;
margin: 0;
}
.container{
/* padding: 5px; */
width: 960px;
margin: 0 auto;
margin-top: 40px;
border-radius: 10px;
/* border: 1px solid #777; */
background-color: #eee;
}
.container:before,.container:after{
clear: both;
content: "";
display: table;
}
.row:before, .row:after{
clear: both;
content: "";
display: table;
}
.col{
/* border-radius: 10px; */
/* text-align: center; */
/* background-color: #ccc; */
margin: 2px;
float: left;
min-height: 70px;
}
.satu{
width: 76px;
}
.dua{
width: 156px;
}
.tiga{
width: 236px;
}
.empat{
width: 316px;
}
.lima{
width: 396px;
}
.enam{
width: 476px;
}
.tujuh{
width: 556px;
}
.delapan{
width: 636px;
}
.sembilan{
width: 716px;
}
.sepuluh{
width: 796px;
}
.sebelas{
width: 876px;
}
.duabelas{
width: 956px;
}
.thi{
font-weight: lighter;
}
.left{
float: left;
}
.right{
float: right;
}
.pad{
padding: 10px;
}
.pad-right{
padding-right: 10px;
}
.head-left{
padding-left: 10px;
box-sizing: border-box;
color: #fff;
background-color: #50a5de;
border-right: 4px dotted;
margin-right: 0;
border-top-left-radius: 10px;
}
.head-right{
color: #fff;
/* box-sizing: border-box; */
background-color: #50a5de;
margin-left: 0;
padding-left: 4px;
border-top-right-radius: 10px;
}
.box{
padding: 0px 40px;
display: inline-block;
border: 1px solid #aaa;
}
.box .numb{
width: 100%;
display: block;
text-align: right;
font-size: 20px;
/* padding-right: 20px; */
font-family: courier;
}
.info{
padding: 5px 0px 5px 50px;
}
.bold{
font-weight: 900;
}
.info-left{
box-sizing: border-box;
margin-right: 0;
border-right: 4px dotted #fff;
}
.info-right{
padding-left: 4px;
margin-left: 0;
}
.courier{
font-family: courier;
}
.value{
padding-left: 50px;
font-size: 30px;
color: #555;
}
table{
width: 100%;
}
.gate-close{
color: #555;
border: 1px dashed #555;
margin-left: 50px;
width: 50px;
font-size: 30px;
padding: 10px;
}
.footer{
height: 35px !important;
margin: 2px;
float: left;
}
.bottom-left{
background-color: #50a5de;
margin-right: 0;
border-bottom-left-radius: 10px;
border-right: 4px dotted #fff;
box-sizing: border-box;
}
.bottom-right{
background-color: #50a5de;
margin-left: 0;
padding-left: 4px;
border-bottom-right-radius: 10px;
}
td .courier{
font-size: 25px;
}
td .bold{
font-size: 25px;
}
.barcode{
text-align: center;
}
.info-left .barcode{
text-align: right;
padding-right: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment