Using javascript Need help creating a data base that stores login detail from my html page. Please use code below and integrate to it. main.html login design Login Here Username Password Forgot Password? Register Here > ------------------------------------------------------------------------------------------ style.css .body{ margin: 0; padding: 0; background: linear-gradient(rgba(5, 0, 136, 0.5),rgba(5, 0, 136, 0.5)); background-size:cover; background-position: center; font-family: sans-serif; } .loginbox{ width:320px; height: 420px; background: #000; color:#fff; top:50%; left:50%; position: absolute; transform: translate(-50%,-50%); box-sizing: border-box; padding: 70px 30px; } .avatar{ width:100px; height: 100px; position: absolute; top:-15%; left:calc(50% - 50px); } h1{ margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px; } .loginbox p{ margin: 0; padding: 0 ; font-weight: bold; } .loginbox input{ width:100%; margin-bottom: 20px; } .loginbox input[type ="text"], input[type = "password"]{ border: none; border-bottom: 1px solid #fff; background = transparent; outline: none; height: 40px; font-size: 16px; } .loginbox input[type ="submit"]{ border: 0 ; outline: none; height:40px; background:#fb2525; color:#fff; font-size: 18px; } .loginbox input[type ="submit"]:hover{ cursor: pointer; background:#ffc107; color:#000; } .loginbox a{ text-decoration: none; font-size: 12px; line-height: 20px; color:darkgrey; } .loginbox a:hover{ color:#ffc107; }
Using javascript Need help creating a data base that stores login detail from my html page. Please use code below and integrate to it.
main.html
<html>
<head>
<title> login design </title>
<link rel = "stylesheet" type = "text/css" href= "style.css">
<link rel="icon" type="image/png" href="image/blog.png">
<script src= "login2.js"> </script>
<body>
<div class="loginbox">
<img src="avatar.png" class="avatar">
<h1> Login Here </h1>
<form action="login.php" method="post">
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder=" Enter Password">
<input type="submit" name="" value="Login" onclick="validate()">
<a href="#">Forgot Password? </a>
<a href="register.html">Register Here</a>
</form>
</div>>
</body>
</head>
</html>
------------------------------------------------------------------------------------------
style.css
.body{
margin: 0;
padding: 0;
background: linear-gradient(rgba(5, 0, 136, 0.5),rgba(5, 0, 136, 0.5));
background-size:cover;
background-position: center;
font-family: sans-serif;
}
.loginbox{
width:320px;
height: 420px;
background: #000;
color:#fff;
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar{
width:100px;
height: 100px;
position: absolute;
top:-15%;
left:calc(50% - 50px);
}
h1{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox p{
margin: 0;
padding: 0 ;
font-weight: bold;
}
.loginbox input{
width:100%;
margin-bottom: 20px;
}
.loginbox input[type ="text"], input[type = "password"]{
border: none;
border-bottom: 1px solid #fff;
background = transparent;
outline: none;
height: 40px;
font-size: 16px;
}
.loginbox input[type ="submit"]{
border: 0 ;
outline: none;
height:40px;
background:#fb2525;
color:#fff;
font-size: 18px;
}
.loginbox input[type ="submit"]:hover{
cursor: pointer;
background:#ffc107;
color:#000;
}
.loginbox a{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color:darkgrey;
}
.loginbox a:hover{
color:#ffc107;
}
Step by step
Solved in 4 steps with 1 images
