Responsive Mobile Login Templates Free Download

Hello Friends Today in this article we will learn how to create beautiful responsive login using html and css .

We will create responsive login page without using Bootstrap.

Step-1 Add HTML :

<div class="design">Designed By : <a href="http://www.schauhan.in">SCHAUHAN.IN</a></div>
   <div class="container">
     
     <h1>LOGIN HERE</h1>
     <div class="form_group mt">
       <input type="text" placeholder="@Username" />
     </div>
     
      <div class="form_group">
       <input type="text" placeholder="Password" />
     </div>
     
     <div class="form_group mb">
       <input type="button" class="bt" placeholder="Password" value="LOGIN" />
     </div>
     
     <div class="b1 mt1"><a href="#">>>Forget Password ?</a></div>
     <div class="b2"><a href="#">>>Register Here<<</a></div>
     
   </div>

Step-2 Add CSS

body
{
	font-family:Bahnschrift, sans-serif;
	margin:0px;
	padding:0px;
	background:#333333;
	background:url(../images/bg-image-16.jpg);
}

.container
{
	width:350px;
	height:500px;
	border-radius:5px;
	background:url(../images/bg.jpg);
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
}

.container h1
{
	text-align:center;
	margin-top:74px;
	font-size:24px;
}

.mt
{
	margin-top:54px;
}

.form_group input
{
	background:#282828;
	border-radius:8px;
	text-align:center;
	outline:none;
	height:44px;
	width:80%;
	border:none;
	margin:5px auto;
	color:#f2f2f2;
	font-family:Bahnschrift, sans-serif;
	font-size:16px;
}

.form_group .bt
{
	background:#e0a517;
	color:#333;
	cursor:pointer;
}

.mb
{
	margin-bottom:25px;
}

.b1
{
	width:80%;
	border-radius:8px;
	height:30px;
	line-height:30px;
	display:block;
	margin:auto;
	transition:all ease-in-out 0.3s;
} 


.b1 a
{
	text-decoration:none;
	color:#000;
}

.b2
{
	width:100%;
	padding:10px auto;
	background:#ffd673;
	height:40px;
	line-height:40px;
	display:block;
	margin:10px auto;
} 

.b2 a
{
	color:#000;
	text-decoration:none;
}

.design
{
	position:fixed;
	bottom:30px;
	right:50px;
	color:#5c5a54;
}

.design a
{
	color:#5c5a54;
	text-decoration:none;
}



@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and  only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	
	.container
{
	width:100%;
	height:100%;
	border-radius:none;
	background:url(../images/bg.jpg);
	background-size:cover;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	-webkit-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 29px 0px rgba(0,0,0,1);
}

.container h1
{
	text-align:center;
	margin-top:120px;
	font-size:24px;
}

.b2
{
	width:40%;
	padding:10px auto;
	background:#ffd673;
	height:40px;
	line-height:40px;
	display:block;
	margin:40px auto;
} 

.b2 a
{
	color:#000;
	text-decoration:none;
}

.design
{
	position:fixed;
	bottom:20px;
	right:20px;
	color:#000;
	font-size:12px;
	z-index:1;
	
}

.design a
{
	color:#000;
	text-decoration:none;
}
	
}