Login & Registration Page In html & css
HTML LOGIN PAGE
index.html (save file)
<html>
<head>
<title>Pawan Login & Registration page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="log-form">
<h2>Login to your account</h2>
<form>
<input type="text" title="username" placeholder="username" />
<input type="password" title="username" placeholder="password" />
<button type="submit" class="btn">Login</button>
<a class="Registration" href="register.html">New User Register Here?</a>
</form>
</div>
<a href="https://www.pawanks.tk" style="color: firebrick; font-size: 14px" ;>www.pawanks.tk</a>
</body>
</html>
HTML REGISTRATION PAGE
register.html (save file)
<html>
<head>
<title>Pawan Login & Registration page </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="log-form">
<h2>New User Register Here?</h2>
<form>
<input type="text" title="username" placeholder="username" />
<input type="email" title="email" placeholder="email" />
<input type="number" title="number" placeholder="number" />
<input type="password" title="username" placeholder="password" />
<input type="password" title="re-password" placeholder="re-password" />
<button type="submit" class="btn">Login</button>
<a class="Registration" href="index.html">Login Here?</a>
</form>
</div>
<a href="https://www.pawanks.tk" style="color: firebrick; font-size: 14px">www.pawanks.tk</a>
</body>
</html>
STYLE PAGE
style.css (save file)
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,300,600);
*{box-sizing:border-box;}
@grey:#2a2a2a;
@blue:#1fb5bf;
.log-form {
width: 50%;
min-width: 320px;
max-width: 475px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
box-shadow: 2px 4px 6px gray;
@media(max-width: 40em){
width: 95%;
position: relative;
margin: 2.5% auto 0 auto;
left: 0%;
}
}
form {
display: block;
width: 100%;
padding: 2em;
}
h2 {
width: 100%;
color: lighten(@grey, 20%);
font-family: 'open sans condensed';
font-size: 22px;
display: block;
background:@grey;
width: 100%;
text-transform: uppercase;
padding: .75em 1em .75em 1.5em;
box-shadow: 2px 4px 6px gray;
border: 1px solid darken(@grey, 5%);
text-shadow: 0px 1px 1px darken(@grey, 5%);
margin: 0;
font-weight: 200;
}
input {
display: block;
margin: auto auto;
width: 100%;
margin-bottom: 2em;
padding: .5em 0;
border: none;
border-bottom: 1px solid #eaeaea;
padding-bottom: 1.25em;
color: #757575;
box-shadow: 2px 2px 1px gray;
&:focus {
outline: none;
}
}
.btn {
display: inline-block;
background: @blue;
border: 1px solid darken(@blue, 5%);
padding: .5em 2em;
color: white;
margin-right: .5em;
box-shadow: 5px 12px 1px lightgray;
&:hover {
background: lighten(@blue, 5%);
}
&:active {
background: @blue;
box-shadow: inset 0px 1px 1px fadeout(black, 90%);
}
&:focus {
outline: none;
}
}
.Registration {
color: lighten(@blue, 10%);
line-height: .5em;
position: relative;
top: 2.5em;
text-decoration: none;
font-size: 12px;
margin:0;
padding: 0;
float: right;
&:hover {
color:darken(@blue, 5%);
}
&:active{
}
}
}
