Buat sebuah file baru dan simpan dengan nama style.css.
kemudian hubungkan file login.php dengan style.css dengan cara menambahkan tag Link dibawah tag <title></title> pada file login.php.
<link rel="stylesheet" type="text/css" href="style.css">
Buka kembali file style.css dan buatlah CSS RESETnya seperti berikut ini :
* {
}
Kemudian hilangkan jarak pada margin dan padding dari setiap tag.
* {
margin: 0px;
padding: 0px;
}
Selanjutnya ubah warna latar belakang form login dengan memberikan background pada body.
body {
background: #eee;
}
kemudian tambahkan :
#panel-login {
width: 480px; /* lebar kotak awal */
margin: 200px auto; /* berikan jarak atas dan bawah 200 sedangkan kanan dan kiri otomatis */
overflow: auto; /* ukuran tinggi otomatis */
padding: 10px; /* jarak bagian dalam box */
background: #000; /* warna latar belakang hitam */
border-radius: 5px; /* pinggiran tepi di perhalus */
box-shadow: 1px 2px 2px #777; /* bayangan pada box */
}
form {
width: 400px; /* lebar form */
overflow: auto; /* tinggi form otomatis berdasarkan isi */
margin: 0px auto; /* jarak form dengan box */
}
.baris {
width: 400px; /* lebar 400px */
overflow: auto; /* tinggi otomatis */
margin: 5px 0px; /* jarak antara tiap baris */
}
input{
padding: 7.5px; /* jarak dalam tiap input */
}
input[disabled="disabled"] {
border-radius: 5px 0px 0px 5px; /* lekukan garis bingkai kiri atas dan bawah 5px */
margin-right: -5px; /* jarak kanan agar menyatu dengan input email dan password */
width: 20px; /* lebar */
background: #eee; /* latar belakang abu-abu */
border:1px solid #eee; /* garis pinggir 1px dengan warna abu-abu */
}
input[type="email"],input[type="password"] {
border-radius: 0px 5px 5px 0px; /* lekukan garis bingkai kanan atas dan kanan bawah 5px */
width: 320px; /* lebar 320px */
border:1px solid #eee; /* garis pinggir */
}
input[type="submit"] {
border-radius: 5px; /* lekukan bingkai pada tombol masuk */
background: #fff; /* latar belakang warna putih */
border:1px solid #eee; /* garis pinggir 1px warna abu-abu */
}
selesai
Hasil Akhir :
