Login page UI design source code

HTML SOURCE CODE

<div class="main">
<div class="box">
<div class="all">
<h1>Hello  there, </br>welcome back</h1>
<div  class="harry">
<input type="text" color="green" class="input" id="username" name="username" placeholder="E-mail">
</div>
<div  class="harry">
<input type="password" class="input" id="myInput" name="username" placeholder="Password">
</div>
<div  class="show">
<input type="checkbox" onclick="myFunction()"><span>Show Password</span>
</div>
<div  class="hary">
<div class="yep" type="submit">Log in</div>
<div class="lyr">
   <div class="txt">Thanks</div>
</div>
</div>
<p class="new">New here? <span><a href="#">Sign Up instead</a></span></p>
</div>  
</div> 

CSS SOURCE CODE

body{
 background: linear-gradient(to top, #6B72A4 0%,  #3273B5 50%, #621579 100%);
 margin:0px;
 padding:0px;
 }

 .main{
 display: flex;
 justify-content: center;
 align-items: center;
 width:100%;
 height:640px;
 }
 .box{
 width:320px;
 height:450px;
 background: #200741;
 border-radius:10px;
 overflow: none;
 background-size:300px 420px;
 opacity:1.5;

  }
  .all{
  margin-top:40px;
  }
  h1{
  font-family: Helvetica Narrow, sans-serif;
  margin-left:27px;
  color:gray;
  margin-bottom:40px;
  }
  .harry{
  display:flex;
  justify-content:center;
  }
  .input{
  display:flex;
  justify-content:center;
  width:80%;
  height:20px;
 font-size:15px;
border:none;
background: transparent;
outline:none;
margin-bottom:30px;
padding-bottom:7px;
  }
  input[type="text"], input[type="password"]{
  color : lightyellow;
border-bottom:1.2px solid gray;
transition:all .4s ease-in-out .1s;

}
input[type="text"]:hover , input[type="password"]:hover {
border-bottom: 2px solid #7920EC;
}
  p{
  margin-left:30px;
  color :#E9E5F6;
  font-weight:bold;
  font-size:17px;
  letter-spacing:0.5px;
  }
   .hary{
 width:110px;
 margin-top:40px;
background: linear-gradient(to right, #C102FA 0%, #6602FA 100%);
height:35px;
overflow:hidden;
margin-left:31%;
border-radius:3px;


 }
 .yep{
 color:white;
 text-align:center;
 padding:10px;
 transition:all .9s ease-in-out .2s;

 }
 .yep:hover{
 transform:translateX(-120px);

 }
 .lyr{
 margin-top:-37px;
 transform:translateX(-120px);
background:#240849;
height:35px;
transition:all .9s ease-in-out .2s;



 }
   .hary:hover .lyr{
   transform:translateY(0px);
 }
  .txt{
  text-align:center;
  padding:10px;
  color :white;
  }

  .show{
  margin-top:-20px;
  margin-left:27px;
  }
 .show span{
 color:gray;

 }
 .p{
 display: inline;
 }
 .new{
 margin-top:40px;
 text-align:center;
 margin-left:0px;
 font-weight:none;
 color: gray;
 font-size:15px;
 }
 a{
 text-decoration:none;
 color:gray;
 }

JAVASCRIPT SOURCE CODE

<script>
function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>