Login Form|How to Create a Transparent login Form in HTML and CSS|Login form In HTML & CSS


Content:

  1. Simple Login Form
  2. Transparent Login Form

Simple Login form:

In simple Login form we use Only Html  and  CSS tags to  design a form so firstly we create a new Project and give it a name, simple login form with Html extension after that we add Html Skelton to design 
so Html code for simple login form is...
 <html> 
  <head>
<title>
Simple Login form
</title>
<link rel="stylesheet" type="text/css" href="bootstrap-4.3.1-dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-4.3.1-dist"/js/bootstrap.min.js></script>

</head>

<body>
<div class="container">
<div class="row"> 
  <div class="col-md-12"> 
 <form>

 <h3>Login form </h3> 
 <div class="form-group">
 
 username:
<img src="user-circle.svg" style="margin-bottom:-60px; margin-left: -60px;" /> 
<input type="text" class="form-control" placeholder="Type your Name" >

  </div>

 <div class="form-group">
 
 Password:
<img src="Password.svg" style="margin-bottom:-60px; margin-left: -55px;" /> 
<input type="Password" class="form-control" placeholder="******" >

  </div>

  <button type="button" class="btn btn-info" > Login</button>

 </form>
 <br/>
 <p>or sign up using</p>
<ul class="sociallist">
<li><img src="facebook.svg"></li>
<li><img src="google.svg"></li>
<li><img src="twitter.svg"></li>
 </ul>
<br/>
 <p>have not Account yet </p> 
<b> <p>SignUp </p></b>
  
     </div>
  </div>
 </div>

</body>
</html>

CSS Code:

In this form we use internal styling under head tag so
<style type="text/css">
body{
background: linear-gradient(to right,indigo,black);

}
.container{
height: 550px;
width: 300px;
background-color: #FFF;
padding: 30px;
margin-top: 50px;
border-radius: 20px;

}
.container h3{
text-align: center;margin-top: 20px;

}
.container .form-group .form-control{
text-align: center;
border:none;
border-bottom: 2px solid #d9d9d9;

}

.btn-info
{
height: 35px;
width: 250px;
border:none;
border-radius: 30px;
text-align: center;

}
p{
text-align: center;

}
img{
width: 20px;
height:20px;
opacity: 0.5;

}
.sociallist{
list-style: none;

}

.sociallist li{
float: left;
padding-left:20px; 

}

</style>


Transparent Login form: 

Code for designing Transparent Login form is given below with Video link

HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>
Transparent login Form
</title>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body>
<div class="loginbox">
<h1>Login </h1>
<div  class="textbox">
<i class="fa fa-user" aria-hidden="ture"></i>
<input type="text" placeholder="username">


</div>

<div  class="textbox">
<i class="fa fa-lock" aria-hidden="ture"></i>
<input type="password" placeholder="password">


</div>
<div  class="textbox">
<i class="fa fa-envelope" aria-hidden="ture"></i>
<input type="email" placeholder="email@example.com">


</div>

<input type="button" class="btn"  value="Sign In">

</div>



</body>
</html>
CSS Code:
<style type="text/css">



body{
background: url(nature.jpg) no-repeat;
background-size: cover;
font-family: sans-serif;
}

.loginbox{
width: 280px;
margin-top: 130px;
margin-left: 40%;
color: white;
}
.loginbox h1{
float:left;
font-size: 40px;
margin-bottom: 10px;
padding: 13px;
border-bottom: 5px solid #00d27f;

}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
margin: 8px 0;
padding: 8px 0;
border-bottom: 1px solid #00d27f;
}
.textbox input{
width: 80%;
background:none;
outline:none;
border:none;
font-size: 20px
margin 0 10px;
color: white;
}

.btn{
width: 100%;
background: none;
color: white;
text-align: center;
padding: 5px;
margin: 12px 0;
border:2px solid #00d27f;

}
.textbox i{
width: 26px;
float: left;
text-align: center;

}



</style>