<!DOCTYPE html>
<html>
<head>
  <title>MENU-LOGIN</title> 
</head>
<body>
  <style>
    body {
  font-family: sans-serif;
  background: #d5f0f3;
}

h1 {
  text-align: center;
  /*ketebalan font*/
  font-weight: 300;
}

.tulisan_login {
  text-align: center;
  /*membuat semua huruf menjadi kapital*/
  text-transform: uppercase;
}

.kotak_login {
  width: 350px;
  background: white;
  /*meletakkan form ke tengah*/
  margin: 80px auto;
  padding: 30px 20px;
}

label {
  font-size: 11pt;
}

.form_login {
  /*membuat lebar form penuh*/
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  font-size: 11pt;
  margin-bottom: 20px;
}

.tombol_login {
  background: #46de4b;
  color: white;
  font-size: 11pt;
  width: 100%;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  float : right;
}

.tombol_login2{
  background: #ff0000 ;
  color: white;
  font-size: 11pt;
  width: 100%;
  border: none;
  border-radius: 3px;
  padding: 10px 20px;
  float : right;
}


.link {
  color: #232323;
  text-decoration: none;
  font-size: 10pt;
}



</style 
<center><h1>FORM LOGIN</h1></center>

<div class="kotak_login">
  <p class="tulisan_login">Silahkan login</p>

  <form action="login.php" method="post">
    <label>Username</label>
    <input type="text" name="username" class="form_login" placeholder="Username ">

    <label>Password</label>
    <input type="text" name="password" class="form_login" placeholder="Password ">

    <input type="submit" class="tombol_login " name="login" value="LOGIN">
      <hr>
    <input type="reset"  class="tombol_login2" value="reset" >

    <br/>
    <br/>
    <center>
    </center>
  </form>

</div>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.