How To Make Beautiful Responsive Login Page

Every One Loves Beautiful Login page. Suppose you are a Software Developer and you have create beautiful login page for your software, And your client will impress without seeing your software, Every one says First Impression is last Impression…and if your login page is not good then it will be effect negative on your client.

In this article we will learn How to create Beautiful Login Page Using HTML And CSS.

STEP 1: THE HTML MARKUP

<div class="login_container">
  <!--Logo Container-->

  <div class="log_header">
     <img src="logo.png" />    
  </div>
  
<!--End Logo Container-->  

 <!--Textbox and Button Container--> 
  <div class="main">
    <div class="form_group">
       <input type="text" class="txtbox" placeholder="Username"  />
    </div>
    
    <div class="form_group">
       <input type="text" class="txtbox" placeholder="Username"  />
    </div>
    
    <div class="form_group">
       <input type="button" value="LOGIN" class="btn" />
    </div>
  </div>
  
 <!--Textbox and Button Container--> 
</div>

STEP-2 ADD CSS CODE

body
{
	margin:0px;
	padding:0px;
	font-family:Verdana, Geneva, sans-serif;
	background:url(bg.jpg);
}


.login_container
{
	width:350px;
	height:450px;
	background:#f60;
	margin:auto;
	left:0;
	top:0;
	bottom:0;
	right:0;
	position:absolute;
	border-radius:7px;
}

.log_header
{
	text-align:center;
	position:relative;
	margin-top:-50px;
}

.log_header img
{
	width:100px;
	height:100px;
}

.main
{
	text-align:center;
	margin-top:100px;
}

.form_group
{
	width:90%;
	height:auto;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	
}

.txtbox
{
	width:85%;
	padding-left:7px;
	height:30px;
}

.btn
{
	width:87%;
	text-align:center;
	height:35px;
	cursor:pointer;
	background:#333;
	color:#fff;
	border:none;
}

If You Want to download complete files then click on Download Button.. Download Beautiful Responsive Login Page