Download any html editor and
Create an html file login.html
And type this code genuinely to learn coding don't copy and paste it directly








<!-- <!DOCTYPE html> -->
<html>
  <head>
    <title>login form
    </title>
  </head>
  <body>
    <!-- Start your code here -->
    <div class="frm_bx">
      <form class="form" onsubmit="myfun"name="form">
        <h1>
          <b> LOGIN
          </b>
        </h1>
        <center>
          <input name="name"type="text" placeholder="Username"id="a" value="">
          <br>
          <br>
          <input type="password" placeholder="Password">
          <br>
          <br>
          <input type="submit" value="Login">
        </center>
      </form>
    </div>
    <!-- End your code here -->
  </body>
</html>







create a  css file style.css and link it with html page








body{
  margin:0px;
  padding:0px;
  background-color: #6B6B6B;
}
.form{
  width: 300px;
  padding: 40px;
  position: absolute;
  background-color: #000000;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;

  box-shadow:0 0 10px #00F6FF,0 0 40px #00F6FF ,0 0 80px #00F6FF  ;
}
.form h1{
  color: #FFFFFF;
  font-weight:1000px;
  text-align:center;
  height: 50px;
}
.form input[type="text"]{
  border:0px;
  border-radius:50px ;
  margin:10px auto;
  border:2px solid #42E9C2;
  padding: 14px 10px;
  background:none;
  outline:none;
  color:#FFFFFF
}
.form input[type="submit"]{
  border-radius:30px;
  margin:20px auto;
  border: 2px solid #5CFFE1;
  background: none;
  padding: 14px 40px;
  cursor:pointer;
  color:#FFFFFF;
}

.form input[type="text"]:focus,.form input[type="password"]:focus{
  width:280px

 
 
 
}






.form input[type="password"]{

  border:0px;
  border-radius:50px ;
  margin:10px auto;
  border:2px solid #7579F3;
  padding: 14px 10px;
  background:none;
  outline:none;
  color:#FFFFFF

}
.form input[type="submit"]:hover{
  color: #FFFFFF;
  background-color: #36FFBB;
  box-shadow:0 0 10px  #36FFBB,0 0 40px  #36FFBB,0 0 80px  #36FFBB;
}