HTML :
<html lang="em"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="form.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Pemesanan Tiket Kereta Online</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav"
style="background-color: #2789D2">
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Daftar Harga Kelas KA</a></li>
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Daftar Jadwal KA</a></li>
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">Data Pesanan Tiket</a></li>
<li><a style="color: rgb(39, 127, 210);background-color: #2789D2" href="#">..</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="color: rgb(255, 255, 255);background-color: #2789D2" href="#">
<span class="glyphicon glyphicon-log-out" style="color: rgb(255, 255, 255);background-color: #2789D2"></span> Logout</a></li>
</ul>
</div>
</div>
</nav>
<div style="padding: 10px">
<table>
<tr>
<td>
<img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8rPBEzO9HiUuF97Yep29JFTnQNLu6_NW3bUwqBvqKL1pkKuly1gmRRv2YpcdKNRIn7deGuqL2nvLU7duPuv_V9wutVDM6gtkcZnWcZHHnyC0jeaEzbPeYjE3MEK2I74kKWNe1DeGkIMCc/w1200-h630-p-k-nu/logo+kereta+api.png"
style="width: 200px;height: 100px" >
</td>
<td style="padding-left: 40px">
<h2 style="font-family: arial">Selamat Datang!!!</h2>
</td>
</tr>
</table>
</div>
<hr>
<div class="container">
<form class="form-horizontal" role="form" action="send.php" method="post">
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="pilihan-kereta">Nama Kereta:</label>
<div class="col-sm-3">
<select class="form-control" id="pilihan-kereta">
<option> </option>
<option>Gumarang</option>
<option>Kertajaya</option>
<option>Jayabaya</option>
<option>Anggrek Malam</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>
<div class="col-sm-3">
<input class="form-control" id="tgl-berangkat" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tgl-tiba">Tanggal Tiba:</label>
<div class="col-sm-3">
<input class="form-control" id="tgl-tiba" type="date">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>
<div class="col-sm-3">
<input class="form-control" id="jam-berangkat" type="time">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="jam-tiba">Jam Tiba:</label>
<div class="col-sm-3">
<input class="form-control" id="jam-tiba" type="time">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-asal">Dari:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-asal">
<option> </option>
<option>Jakarta</option>
<option>Bandung</option>
<option>Surabaya</option>
<option>Semarang</option>
<option>Jogjakarta</option>
<option>Cirebon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="tempat-tujuan">Ke:</label>
<div class="col-sm-3">
<select class="form-control" id="tempat-tujuan">
<option> </option>
<option>Jakarta</option>
<option>Bandung</option>
<option>Surabaya</option>
<option>Semarang</option>
<option>Jogjakarta</option>
<option>Cirebon</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-offset-3 col-sm-2" for="kelas">Kelas:</label>
<div class="col-sm-3">
<select class="form-control" id="kelas">
<option> </option>
<option>Eksekutif</option>
<option>Bisnis</option>
<option>Ekonomi</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-5 col-sm-10">
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn btn-warning" type="submit">Batal</button>
</div>
</div>
</form>
</div>
<div align="center" style="margin-top:10px; padding-top: 30px">
<table>
<tr>
<th width="20">No</th>
<th width="170">Nama Kereta</th>
<th width="140">Jadwal Berangkat</th>
<th width="140">Jadwal Tiba</th>
<th width="180">Dari</th>
<th width="180">Ke</th>
<th width="140">Harga(Kelas)</th>
<th></th>
</tr>
<tr>
<td id="td_s">1</td>
<td id="td_s">Argo Laru</td>
<td id="td_s">2014-04-22 - 06.00</td>
<td id="td_s">2014-04-22 - 08.45</td>
<td id="td_s">Gambir, Jakarta Pusat</td>
<td id="td_s">Bandung, Bandung</td>
<td id="td_s">Binis - 90000</td>
<td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>
</tr>
<tr>
<td id="td_s">2</td>
<td id="td_s">Argo Laru</td>
<td id="td_s">2014-04-23 - 13.01</td>
<td id="td_s">2014-04-23 - 15.00</td>
<td id="td_s">Gambir, Jakarta Pusat</td>
<td id="td_s">Surabaya</td>
<td id="td_s">Eksekutif - 100000</td>
<td id="td_s"><button type="button" class="btn btn-primary">Edit</button><button style="margin-left:5px" type="button" class="btn btn-danger">Hapus</button></td>
</tr>
</table>
</div>
</body></html>
CSS :
#judul{
font-family: 'Arial';
font-size: 20;
padding-left: 50px;
}
#head-line:hover{
padding: 0.5px;
background-color: #0099FF;
}
#head-line{
color: white;
padding: 0.5px;
background-color: #0066FF;
}
#img{
width: 20px;
height: auto;
padding-left: 100px;
}
#tabel{
padding: 10px;
border: solid black;
}
th{
border: 1px solid black;
padding: 5px;
}
#td_s{
border: 1px solid black;
padding: 5px;
}
Hasil :
No comments:
Post a Comment