Salam hangat untuk kita semua. Setelah berbagai artikel menarik yang pernah saya buat, kali ini saya akan mencoba membuat form login yang keren abis. Oiya, salam kenal dulu bagi para pengunjung blog ini,hehe. Bagi pengunjung yang sebelumnya dah pernah mampir di blog ini, di tunggu komentarnya, supaya ilmu kita bisa bertambah Tanpa berteletele langsung aja siapkan file dengan nama index.html, kemudian file style.css dan juga satu buah gambar yang nantinya di buat untuk logo. Ingat!, semua file harus disimpan dalam satu folder yang sama. Misalkan saja folder kita beri nama Formlogin. Berikut sourcecode index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-background">
<div class="login-header">
<img src="logo.png" class="img-logo">
<p>My Login Area</p>
</div>
<div class="login-body">
<form>
<input type="text" name="username" placeholder="Email" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="submit" name="login" value="LOG IN"><br>
</form>
<p><a href="#"> Forgot Password?</a></p>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>kiblatwebsite.blogspot.co.id</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-background">
<div class="login-header">
<img src="logo.png" class="img-logo">
<p>My Login Area</p>
</div>
<div class="login-body">
<form>
<input type="text" name="username" placeholder="Email" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="submit" name="login" value="LOG IN"><br>
</form>
<p><a href="#"> Forgot Password?</a></p>
</div>
</div>
</body>
</html>
Sourcecode style.css
body{
background: #2e3339;
margin-right: 20%;
margin-left: 20%;
}
.login-background{
font-family: arial;
background: #35455f;
padding: 10px;
box-shadow: 0px 0px 15px #222;
border-radius: 3px;
width: 300px;
color: #999;
height: auto;
margin: 50px auto;
text-align: center;
}
input[type="text"],input[type="password"]{
border: none;
border-bottom: 1px solid #999;
margin-bottom: 15px;
color: #999;
width: 100%;
padding: 15px 0px;
background: none;
}
input[type="submit"]{
background: #0eb7cc;
color: #fff;
border-radius: 3px;
padding: 15px;
width: 100%;
border: none;
}
.img-logo{
height: 100px;
width: 100px;
}
a,a:hover,a:visited,a:active{
text-decoration: none;
color: #999;
}
background: #2e3339;
margin-right: 20%;
margin-left: 20%;
}
.login-background{
font-family: arial;
background: #35455f;
padding: 10px;
box-shadow: 0px 0px 15px #222;
border-radius: 3px;
width: 300px;
color: #999;
height: auto;
margin: 50px auto;
text-align: center;
}
input[type="text"],input[type="password"]{
border: none;
border-bottom: 1px solid #999;
margin-bottom: 15px;
color: #999;
width: 100%;
padding: 15px 0px;
background: none;
}
input[type="submit"]{
background: #0eb7cc;
color: #fff;
border-radius: 3px;
padding: 15px;
width: 100%;
border: none;
}
.img-logo{
height: 100px;
width: 100px;
}
a,a:hover,a:visited,a:active{
text-decoration: none;
color: #999;
}
Untuk membuka hasilnya langsung saja doubleclick di file index.html.jreeeeeeeeeeeng
Semoga bermangfaat, baca juga artikel lainnya hanya disini
5 comments
commentswah bagus,bermanfaat artikelnya
ReplyBagus tampilannya..
ReplyGoblok
ReplyBagus👍
Replybentar belum di coba
Reply