- Get link
- X
- Other Apps
Login and Register page in HTML
Download Links for images: http://gestyy.com/ee8Jch
#HTML Code save file as login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="loginBox">
<img src="user.jpg" class="user">
<h2>Log In Here</h2>
<form method="post" action="login.html" onsubmit="return Validate()" name="vform">
<p>Email</p>
<input type="text" name="email" placeholder="Enter Email" >
<div id="email_error" class="errorbox"></div>
<p>Password</p>
<input type="password" name="password" placeholder="*********" >
<div id="password_error" class="errorbox"></div>
<a href="main.html">
<input type="button" name="submit" value="LOGIN" onclick="main.html" >
</a><br>
<a href="#">Forget Password</a><br>
<a href="register.html">Register a new account!</a>
</form>
</div>
<div class="box">
<img src="user.jpg" class="user1">
<h1>Register Here</h1>
<form name="vform2" action="" >
<p>Username</p>
<input type="text" name="uname1" placeholder="Enter Username" required="">
<p>Email</p>
<input type="Email" name="email" placeholder="Enter email id" required="">
<p>Password</p>
<input type="password" name="upswd1" placeholder="Enter Password" required="">
<p>Retype Password</p>
<input type="password" name="upswd2" placeholder="Re-Enter Password" required="">
<input type="submit" onclick="return reg()" name="" value="Register">
<br><br>
</form>
</div>
</body>
</html>
#Css save file as style.css
body
{
margin: 0;
padding: 0;
background: url(bg12.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox
{
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0,0,0,.7);
border-radius: 20px;
}
.user
{
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px/2);
left: calc(50% - 50px);
}
.user1{
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: -50px;
left: calc(50% - 50px);
border-radius: 50px;
}
h2
{
margin: 0;
padding: 0 0 20px;
color: #efed40;
text-align: center;
}
.loginBox p
{
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input
{
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"],
.loginBox input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
::placeholder
{
color: rgba(255,255,255,.5)
}
.loginBox input[type="button"]
{
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: #ff267e;
cursor: pointer;
border-radius: 20px;
}
.loginBox input[type="button"]:hover
{
background: #efed40;
color: #262626;
}
.loginBox a
{
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.errorbox
{
font-weight: bold;
font-size: 14px;
color: red;
}
.box{
position: absolute;
top: 50%;
left: 75%;
transform: translate(-50%,-50%);
width: 350px;
height:450px;
box-sizing: border-box;
padding: 70px 30px;
border-radius: 20px;
background: rgba(0,0,0,.7); }
h1{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
color: #efed40; }
p{
color: white;
margin: 0;
padding: 0;
font-weight: bold; }
::placeholder {
color: rgba(255,255,255,.5) }
input{
width: 100%;
margin-bottom: 10px; }
input[type="text"], input[type="password"] ,input[type="email"] {
border: none;
border-bottom: 1px solid skyblue;
background: transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px; }
input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ff267e;
color: #fff;
font-size: 18px;
border-radius: 20px; }
input[type="submit"]:hover {
cursor: pointer;
background: #efed40;
color: #262626; }
#Javascript save file as js.js
function Validate()
{
var email=document.forms["vform"]["email"].value;
var password=document.forms["vform"]["password"].value;
if (email==null || email=="")
{
document.getElementById("email_error").innerHTML="Enter the user name";
return false;
}
if (password==null || password=="")
{
document.getElementById("password_error").innerHTML="Enter the password";
return false;
}
if (email!='' && password!='')
{
window.location.assign("main.html");
}
}
function reg() {
alert("Registered Successfully.!");
}
%3Cscript%3Ealert%281%29%3C%2Fscript%3E
ReplyDelete