Untuk html nya
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<head>
<title>PT Kereta Api</title>
</head>
<body>
<div class="nav">
<ul>
<li class="left"><b style="color:white;">Pesemesanan Tiket Kerata Api Online</b></li>
<li class="left"><a href="#">Daftar Harga Tiket KA</a></li>
<li class="left"><a href="#">Dadwal Kereta Api</a></li>
<li class="left"><a href="#">Daftar Tiket</a></li>
<li class="right"><a href="#">Login</a></li>
</ul>
</div>
<div class="brand">
<img src="https://upload.wikimedia.org/wikipedia/id/4/4e/Logo_PT_KAI_%28Persero%29.svg" alt="Gambar Logo KAI" width="250" height="150">
<p id="selamat">Selamat Datang !!!</p>
</div>
<div class="isi">
<table id="atas">
<tr>
<td>Nama Kereta</td>
<td>
<form class="" action="#" method="post">
<input type="text" name="firstname" placeholder="">
</form>
</td>
</tr>
<tr>
<td>Tanggal Berangkat</td>
<td>
<form class="" action="#" method="post">
<input type="date" name="firstname" placeholder="dd/mm/yyyy">
</form>
</td>
</tr>
<tr>
<td>Tanggal Tiba</td>
<td>
<form class="" action="#" method="post">
<input type="date" name="firstname" placeholder="dd/mm/yyyy">
</form>
</td>
</tr>
<tr>
<td>Jam berangakat</td>
<td>
<form class="" action="#" method="post">
<input type="time" name="firstname" placeholder="--:--">
</form>
</td>
</tr>
<tr>
<td>Jam Tiba</td>
<td>
<form class="" action="#" method="post">
<input type="time" name="firstname" placeholder="--:--">
</form>
</td>
</tr>
<tr>
<td>Dari</td>
<td>
<form class="" action="#" method="post">
<input type="time" name="firstname" placeholder="">
</form>
</td>
</tr>
<tr>
<td>Ke</td>
<td>
<form class="" action="#" method="post">
<input type="time" name="firstname" placeholder="">
</form>
</td>
</tr>
<tr>
<td>Kelas</td>
<td>
<form class="" action="#" method="post">
<input type="time" name="firstname" placeholder="">
</form>
</td>
</tr>
</table>
</div>
<div class="tekan">
<button type="button" class="tekanan tekanan1">Simpan</button>
<button style="margin-left:5px" type="button"class="tekanan tekanan2">Batal</button>
</div>
<div class="tabel">
<table id="bawah">
<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>1</td>
<td>Argo Laru</td>
<td>2014-04-22 - 06.00</td>
<td>2014-04-22 - 08.45</td>
<td>Gambir, Jakarta Pusat</td>
<td>Bandung, Bandung</td>
<td>Binis - 90000</td>
<td><button type="button" class="tekanan tekanan1">Edit</button><button style="margin-left:5px" type="button" class="tekanan tekanan2">Hapus</button></td>
</tr>
<tr>
<td>2</td>
<td>Argo Laru</td>
<td>2014-04-23 - 13.01</td>
<td>2014-04-23 - 15.00</td>
<td>Gambir, Jakarta Pusat</td>
<td>Surabaya</td>
<td>Eksekutif - 100000</td>
<td><button type="button" class="tekanan tekanan1">Edit</button><button style="margin-left:5px" type="button"class="tekanan tekanan2">Hapus</button></td>
</tr>
</table>
</div>
</body>
</html>
Untuk css nya
body
{
margin: 0;
padding: 0;
background-color: #ECE8E5;
}
ul
{
overflow: hidden;
}
li.left
{
float: left;
padding: 10px;
list-style-type: none;
}
li a
{
text-decoration:none;
}
.nav
{
background: #2A8AD4;
padding: 10px;
}
li.right
{
float: right;
list-style-type: none;
padding: 10px;
}
ul li.right
{
padding-right: 30px;
}
.nav a
{
color: white;
}
.brand img
{
padding: 10px 10px 10px 50px;
float: left;
}
.brand
{
overflow: hidden;
}
#selamat
{
float: left;
margin: 10px;
margin-top: 50px;
}
.brand p
{
font-size: 50px;
}
#atas
{
width: 30%;
margin-left: auto;
margin-right: auto;
}
.tekan
{
width: 15%;
margin-left: auto;
margin-right: auto;
}
#bawah
{
padding-top: 10px;
margin-top: 10px;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 85 %;
margin-left: auto;
margin-right: auto;
}
#bawah td, th
{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
#bawah tr:nth-child(even)
{
background-color: #dddddd;
}
#but
{
display: block;
margin-left: auto;
margin-right: auto
}
.tekanan
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.tekanan1
{
background-color: #008CBA;
}
.tekanan2
{
background-color: #f44336;;
}
Tidak ada komentar:
Posting Komentar