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; }
Click demo to see the final out and download for your next
web app... see you yeah
Hit me with a comment!