Bus Reservation
<html><head>
<title>Welcome from Reservation Services</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity=”sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA” crossorigin=”anonymous”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type=”text/css”>
body {
margin: 10px;
padding: 10px;
background: #56b030;
}
.bus {
margin: 0 auto;
border-radius: 15px;
border: solid white 5px;
text-align:center;
height:177px;
width: 25rem;
}
.bus-btn{
padding: 50px;
}
.test-shine {
background-image: url(‘https://www.dafont.com/forum/attach/orig/5/9/590238.jpg');
background-size: 100% auto;
background-repeat: no-repeat;
position:absolute;
top:25px;
right: 25%;
left:25%;
margin: 25px 0 25px 25px;
border-radius: 5px;
overflow: hidden;
display: inline-block;
}
.class-input {
border-radius: 3px;
border: solid white 0px;
margin-top: 10px;
}
.test-shine:after {
content: “”;
position: absolute;
top: -50%;
left: -60%;
width: 20%;
height: 200%;
opacity: 0;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
/* Hover state — trigger effect */
.test-shine:hover:after {
opacity: 1;
left: 130%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
/* Active state */
.test-shine:active:after {
opacity: 0;
}
</style>
<div class=”extreme-wrapper”>
<div class=”row” style=”
height: 352px;
/* text-align: center; */
display: block;
left: 25%;
“>
<div class=”col-md-6 bus test-shine” style=”
height: 327px;
text-align: center;
left: 32%;
“></div>
</div>
<div class=”row” style=”
top: -49px;
“>
<div class=”col-md-offset-6 col-sm-6 col-sm-offset-6 col-md-6 col-lg-6" style=”/* position:relative; *//* top: 100px; */margin: 0 auto;color: rgba(255,110,110);text-shadow: 2.5px 3px 2.5px black;font-family:calibri;font-size: 1.6rem !important;font-weight: bold;text-align: center;”> Simple Reservation — Flixbus</div>
</div>
<div style=”/* top: 320px; *//* left:25%; */position: relative;text-align:center;margin: 2em;”>
<div style=”display:inline-block” class=”dropdown”>
<button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Source Station
<span class=”caret”></span></button>
<ul class=”dropdown-menu”>
<li><a href=”#”>A</a></li>
<li><a href=”#”>B</a></li>
<li><a href=”#”>C</a></li>
</ul>
</div>
<div style=”display:inline-block” class=”dropup”>
<button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Destination Station
<span class=”caret”></span></button>
<ul class=”dropdown-menu”>
<li><a href=”#”>B</a></li>
<li><a href=”#”>C</a></li>
<li><a href=”#”>D</a></li>
</ul>
</div>
<br>
<div class=”” style=”border-radius: 3px; display:inline-block”><input class=”class-input” type=”text” placeholder=”Number of seats”></div>
<div style=”display:inline-block”><a>Change Route</a></div>
</div>
<div style=”/* top: 330px; */margin: 0 auto;position:relative;display: flex;text-align: center;width: 100%;” class=”row”>
<div class=”col-md-3 btn btn-info bus-btn” style=”
margin-left: 15%;
“> Reserve<br><small>Seats avbl (20/ 72)</small></div>
<div style=”margin:3px;”></div>
<div class=”col-md-3 btn btn-danger bus-btn”>Concurrent Req</div>
<div style=”margin:3px;”></div>
<div class=”col-md-3 btn btn-warning bus-btn”>Notifications</div>
<div></div>
</div>
<div style=”width:120px;height: 80px;background: #cae2c0;border-radius:8px;position:fixed;right:13%;top: 50px;margin: 25px 31px;text-align: center;font-weight: bold;”>Initiate Route <img src=”src=”https://cdn-icons.flaticon.com/png/512/2998/premium/2998812.png” style=”
height: 45px;
“></div>
</div>
</body></html>
