Creative Login Template design and Source Code

 

Source Code 👇👽

html...

<div class = "center" >

<form action="login" method="post">

<div align = "center" >

<br><br> 

<h1 align = "center"> Get Started </h1> <br>

<input type="text" name="username" placeholder="Username" required> <br> <br><br>

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

<a href = "forgotpassword.jsp" class = "text2"> <i> <b> Forgot Password ? </b> </i> </a> <br> <br> 

<input type="submit" name="submit" value="Login" > <br>

<p class="text"> <b> Not Account Yet ? <br> <br><span> <a href="customerinsert.jsp" class="text1"> Register  </a> </span> </b> <p>

</div>

</form>

</div>

css...

.center {

box-shadow:0 5px 30px black;

width:500px;

height:550px;

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

color:#000137;

top:125%;

left:50%;

position:absolute;

transform:translate(-50% , -50%);

box-sizing:border-box;

}

input[type = "text"] , [type = "password"]

{

width : 50% ;

padding: 7px ;

float:center;

font-size:15px;

border:2px solid;

border-radius:16px;

text-align: center;

border-style:none;

font-famity:calibri;

backgrount-color:transparent;

color:black;

}

input[type = "submit"] {

  background-color: #070b24;

  color: white;

  padding: 10px 20px;

  margin: 8px 0;

  border: none;

  cursor: pointer;

  font-size:16px;

  border-radius:12px;

  width: 30%;

  font-weight:bold;

}

.text {

font-size:21px;

color:black;

display:inline-block;

}

.text1 {

font-size:20px;

color:#02023f;

}

.text2{

font-size:20px;

color:#02023f;

}

a{

text-decoration:none;

color:#070b24;

font-size:1px;

padding: 0px 3px;

}