

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;
}
}