Tuesday 14 March 2017

How to design login page for web application

Welcome back guys, here is custom made login template for your web app, on this tutorial am going to show you guys how to design login page, our output is simply going to look like this.

So, let start making our login page, first let create an empty file, name it login.html

Secondly add below code to our login.html file we just created earlier

<!DOCTYPE html>
<html>
<head>
 <title>Login Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
<div class="logo">
 <img src="img/logo1.png">
</div>
 <div class="form">
  <form method="post" action="" autocomplete="">
   <p><label name="username">Username:</label>
   <input type="text" required="" name="username">
   </p>

   <p><label name="password">Password:</label>
   <input type="password" required="" name="username">
   </p>
   <p><input type="submit" value="Sign In" name="username">
   </p>
  </form>
 </div>
</div>

</body>
</html>

So, i guess is not that hard for you to ride along...

Thirdly let create all our css classes, and tag identifiers open another empty page and save it as style.css, copy below css code to it and save.

Our container class hold the content of our whole login code and that is where we defined our width: 500px; and margin-top: 200px.

Our background image could be download from here

using css tag identifier we called up our body and set some property and attribute to make our background

 body
  {
   background-image: url(../img/bg1.jpg);
   background-size: 1400px;
  }

Then, the login button was tweaked with css to gain that nice attractive looking, below is the css code for login button, sure you can tweak it around.

input[type=submit]
  {
   width: 100px;
   border-radius:10px;
   font-size: 14px;
   font-family:cursive;
   padding-left: 10px;
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 5px;
   background-color: #007497;
   color: #fff;
   font-weight: bold;
   cursor: pointer;
  }
  input[type=submit]:hover
  {
   
   cursor: pointer;
   background-color: #015d79;
  }