HTML

HTML Projects

HTML Project

Login Page using HTML with CSS
Previous Home Next

This is the Html code for login page as given below. Save this code with any name.html .

Html code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Login Page</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
 <!-- Begin Page Content -->
<div id="container">
<form action="login_process.php" method="post">
<label for="loginmsg" style="color:hsla(0,100%,50%,0.5); font-family:
"Helvetica Neue",Helvetica,sans-serif;"><?php  echo @$_GET['msg'];?></label>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
<input type="submit" value="Login">
</div><!--/ lower-->
</form>
</div><!--/ container-->
<!-- End Page Content -->
</body>
</html>

 

CSS Code

Save this code with any style.css and call in html page.


<style>
/* Basics */
html, body {
width: 100%;
height: 100%;
font-family: 
"Helvetica Neue", Helvetica, sans-serif;
 color: #444;
-webkit-font-smoothing: antialiased;
background: #f0f0f0;
 }
#container {
 position: fixed;
width: 340px;
height: 280px;
 top: 50%;
left: 50%;
margin-top: -140px;
 margin-left: -170px;
background: #fff;
 border-radius: 3px;
border: 1px solid #ccc;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 }
 form {
margin: 0 
auto;
 margin-top: 20px;
}
 label {
 color: #555;
 display: inline-block;
 margin-left: 18px;
 padding-top: 10px;
font-size: 14px;
 }
 p a {
 font-size: 11px;
 color: #aaa;
float: right
;
margin-top: -13px;
margin-right: 20px;
 -webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
 }
p a:hover {
 color: #555;
 }
input {
font-family: "Helvetica Neue", Helvetica, sans-serif;
 font-size: 12px;
outline: none;
}
input[type=text],
 input[type=password] ,input[type=time]{
color: #777;
padding-left: 10px;
 margin: 10px;

margin-top: 12px;
 margin-left: 18px;
width: 290px;
height: 35px;
 border: 1px solid #c7d0d2;
 border-radius: 2px;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
 -moz-transition: all .4s ease;
transition: all .4s ease;
 }
input[type=text]:hover,
        input[type=password]:hover,input[type=time]:hover {
border: 1px solid #b6bfc0;
 box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
 }
input[type=text]:focus,
input[type=password]:focus,input[type=time]:focus {
 border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20px;
box-shadow: inset 0 1px 1px #fff;
border-top: 1px solid #ccc;
border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
}
input[type=checkbox] {
  margin-left: 20px;
 margin-top: 30px;
}
.check {
 margin-left: 3px;
font-size: 11px;
color: #444;
text-shadow: 0 1px 0 #fff;
}
 input[type=submit] {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
 height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
<center></center>background-image: -webkit-gradient(linear, 
left top, left bottom, from(#acd6ef), to(#6ec2e8));
 background-image: -moz-linear-gradient(top left 90deg,
 #acd6ef 0%, #6ec2e8 100%);
 background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
border-radius: 30px;
border: 1px solid #66add6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
  }
input[type=submit]:hover {
 background-image: -webkit-gradient(linear, left top, left
 bottom, from(#b6e2ff), to(#6ec2e8));
 background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
 }
input[type=submit]:active {
 background-image: -webkit-gradient(linear, left top, left
 bottom, from(#6ec2e8), to(#b6e2ff));
 background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}
 </style>

Output:

Previous Home Next

Tolal:0 Click:

Show All Comments

Did not find what you were looking for leave your name and message. We will revert within 24 hours
Name:
eMail:
Comment / Feedback: