» » membuat form login

membuat form login

Edit

CODING MEMBUAT FORM LOGIN DENGAN
HTML DAN CSS
Sebelum membuat form login bukalah apliakasi untuk membuat sebuah design web, disini saya menggunakan aplikasi notepad++. Ketika sudah membuka aplikasi notepad++ maka tulislah coding dibawah.

1.Ktik Coding tersebut lalu simpan dengan form_login.html dan simpan di satu folder
          <html>
     <head>
         <title>login</title>
        <link rel="stylesheet" type="text/css" href="style.css">
     </head>
         <body>
              <div class="loginbox">
                      <center><h1>LOGIN</center></h1>
                            <form>
                                    <p>Username</p>
                                    <input type="text" name="" placeholder="enter username">
                                    <p>Password</p>
                                    <input type="password" name="" placeholder="enter password">
                                           <input type="submit" name="" value="login">
                                                <a href="#">Lupa Katasandi?</a><br>
                                                <a href="#">Buat Akun Baru?</a><br>
                                    </form>
                 </div>
                                   
         </body>
</html>

2.Ktik coding tersebut lalu simpan dengan nama style.css dan taruh di satu folder
body{
                               margin:0;
                               padding:0;
                               background-image: Linear-gradient(-20deg, yellow 0%, green 100%);
                               background-size:cover;
                               background-position:center;
                               font-family: sans-serif;
}
.loginbox{
                               width:340px;
                               height:420px;
                               background:Linear-gradient(-20deg, white 0%,red  100%);
                               color:#fff;
                               top:50%;
                               left:50%;
                               position:absolute;
                               transform:translate(-50%,-50%);
                               box-sizing:border-box;
                               padding:70px 30px;
}


.h1{
                               margin:0;
                               padding:0 0 20px;
                               font-size:22px;
}
.loginbox p{
                               margin:0;
                               padding:0;
                               font-weight:bold;
}

.loginbox input{
                               width:100%;
                               margin-bottom:20px;
}

.loginbox input[type="text"], input[type="password"]
{
                               border:none;
                               border-bottom:1px solid #fff;
                               background:transparent;
                               outline:none;
                               height:40px;
                               color:#fff;
                               font-size:16px;
}

.loginbox input[type="submit"]
{
                               border:none;
                               outline:none;
                               height:40px;
                               background:#fb2525;
                               color:#fff;
                               font-size:18px;
                               border-radius:20px;
}

.loginbox input[type="submit"]:hover
{
                               cursor:pointer;
                               background:white;
                               color:green;
}
.loginbox a{
                               text-decoration:12px;
                               font-size:20px;
                               line-height:20px;
                               color:blue;
}

.loginbox a:hover{
                               color:red;
}





Subscribe to receive free email updates:

3 Responses to "membuat form login"

Subscribe to: Post Comments (Atom)