How to Create a Login Form Using HTML , CSS , CSS3 With HTML5 Validation By #BKTutorial

Source Code:

<style>

body

{

  background-image:url(1213541.jpg);

  background-size:cover;

}

.bk

{

  width:250px;

  height:250px; 

  background-color:rgba(0,0,250,0.1);

  margin:0 auto;

  margin-top:90px;

  padding-top:30px;

  padding-left:50px;

  border-radius:15px;

  color:white;

  font-weight:bolder;

  box-shadow:inset 4px -4px rgba(0,0,0,0.1);

  font-size:20px;

 }

.bk:hover

{

    background-color:rgba(0,0,250,0.1); 

}

.bk input[type="text"]

{

   height:30px;  

   width:200px;

   color:black;

   font-size:20; 

   border-radius:5px;

   padding-right:10px; 

   border:0px auto;

   border-radius:5px;

   padding-left :5px;

   background-color:rgba(25,45,50,0.5);

}

.bk input[type="text"]:hover

{  

  color:white;  

  border-color:yellow;

}

.bk input[type="password"]

{

   height:30px;  

   width:200px;

   color:black;

   font-size:20; 

   border-radius:5px;

   padding-right:10px; 

   border:0px auto;

   border-radius:5px;

   padding-left :5px;

   background-color:rgba(25,45,50,0.5);

}

.bk input[type="password"]:hover

{

  color:white; 

  border-color:yellow;

}

.bk input[type="submit"]

{

   height:30px;  

 

   color:black;

   font-size:20; 

   border-radius:5px;

   padding-right:10px; 

   border:0px auto;

   border-radius:5px;

   padding-left :5px;

   background-color:rgba(25,45,50,0.5);

}

.bk input[type="submit"]:hover

{

  color:#ff0000; 

  border-color:yellow;

  background-color:rgba(0,0,0,0.5);

}

</style>

<div class="bk">

<h1>Sign Up</h1>

<form method="post">

<input type=text name="" value="" placeholder="Enter Email"><br><br>

<input type=password name=""  placeholder="Enter Password"><br><br>

<input type=submit value="Sign Up">

</form>

</div>

 Output: