Hallo...
Semangat Pagi !
Dalam postingan kali ini saya akan share membuat Halaman Login Sederhana.
Yuk Simak !
1. Untuk anda yang belum memiliki jquery, silahkan download dahulu jquery disini.
2. Langsung tulis script di bawah ini .!
<style>
body{
background-color: #000;
background-image: url(img/aaa.jpg);
font-family: 'Oleo Script', cursive;
background-repeat: no-repeat;
background-position: center;
}
.lg-container{
width:275px;
margin:100px auto;
padding:20px 40px;
border:1px solid #f4f4f4;
background:rgba(255,255,255,.2);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 2px #aaa;
-moz-box-shadow: 0 0 2px #aaa;
box-shadow: 0 0 2px #aaa;
}
.lg-container h1{
font-size:40px;
text-align:center;
}
#lg-form > div {
margin:10px 5px;
padding:5px 0;
}
#lg-form label{
display: none;
font-size: 20px;
line-height: 25px;
}
#lg-form input[type="text"],
#lg-form input[type="password"]{
color: #fff;
border:2px solid #000;
-webkit-border-radius:10px;
-moz-border-radius:10px;
background:transparent;
border-radius:10px;
padding: 5px;
font-size: 16px;
line-height: 20px;
width: 100%;
font-family: 'Oleo Script', cursive;
text-align:center;
}
#lg-form div:nth-child(3) {
text-align:center;
}
#lg-form button{
font-family: 'Oleo Script', cursive;
font-size: 18px;
border:1px solid #000;
padding:5px 10px;
border:1px solid rgba(51,51,51,.5);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 2px 1px 1px #aaa;
-moz-box-shadow: 2px 1px 1px #aaa;
box-shadow: 2px 1px 1px #aaa;
cursor:pointer;
}
#lg-form button:active{
-webkit-box-shadow: 0px 0px 1px #aaa;
-moz-box-shadow: 0px 0px 1px #aaa;
box-shadow: 0px 0px 1px #aaa;
}
#lg-form button:hover{
background:#f4f4f4;
}
#message{width:100%;text-align:center}
.success {
color: green;
}
.error {
color: red;
}
</style>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>LOGIN SA~</title>
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
</head>
<body>
<div class="lg-container">
<h1>LOGIN</h1>
<form action="" id="lg-form" name="lg-form" method="post">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Username"/>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password" placeholder="Password" />
</div>
<div>
<button type="submit" id="login">Login</button>
</div>
</form>
<div id="message"></div>
</div>
</body>
</html>
Script css sudah termasuk script di atas, karena saya jadikan menjadi satu, namun jika mau di pisah tidak apa-apa.
3. Sesuaikan nama file, dan folder anda , kalau font yang saya cetak tebal dan saya beri warna biru adalah sesuai dengan file atau folder saya. silahkan anda sesuaikan dengan milik anda.
Trimakasih telah menyimak postingan saya kali ini. Enjoy It !
Jika postingan ini membantu anda, silahkan share dan follow :)
