This is the login.hml and also create login.css
[SOURCE CODE]
just copy and paste
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="login.css">
<link href='https://fonts.googleapis.com/css?family=Bungee Inline' rel='stylesheet'></head>
<body>
<div class="block" id="changecolor">
<h2>Log-In (^_^)</h2>
<p>Please fill in your credential login.</p>
<div class="wrapper">
<!--action still need to connect for secure-->
<form action="######" method="post">
<div class="form-group"><!--need to connect php area-->
<label>Username</label>
<input type="text" name="username" class="form-control" value="#####">
<span class="help-block"><!--php area--></span>
</div>
<div class="form-group"><!--need to connect php area-->
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block"><!--php area--></span>
</div>
<div class="form-group"></div>
<input type="submit" class="btn" value="LOGIN">
</div>
<div class="sign"><p>Need account? <a href="Register.php">Sign up now!</a></p></div>
</form>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-image: linear-gradient(0deg, rgb(64, 6, 170), rgb(0, 0, 0));
overflow: hidden;
font-family: 'Bungee Inline';
}
.btn{
background-color: rgb(24, 158, 4);
position: relative;
float: right;
right: 43%;
color: #025502;
}
.btn:hover{
color: rgb(0, 255, 64);
}
.block h2{
position: relative;
text-align: center;
color: rgb(255, 145, 0);
padding-top: 20px;
padding-left: 20px;
font-size: 50px;
font-weight: bolder;
text-shadow: 5px 5px 5px rgb(255, 2, 141);
}
#changecolor h2{
animation: changecolor 5s infinite;
}
@keyframes changecolor {
from {color: rgb(21, 255, 0);}
to {color: #ffff00;}
}
.block p{
color: rgb(18, 253, 18);
padding-left: 20px;
font-size: 20px;
text-align: center;
}
label {
font-size: 15px;
right: 42%;
float: right;
position: relative;
color: rgb(0, 255, 0);
text-align: center;
}
.sign p{
color: rgb(26, 243, 7);
position: relative;
text-align: center;
padding: 40px;
}
.sign p a{
text-decoration: none;
}
.sign p a:hover{
color: #0000ff;
}
/*background area*/
.block {
top: -160px;
position: relative;
margin: 300px auto 0;
width: 40%;
height: 500px;
background: linear-gradient(0deg, #000, #292929);
}
.block:before, .block:after {
content: '';
position: absolute;
left: -2px;
top: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094,
#0000ff, #00ff00,#ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.block:after {
filter: blur(50px);
}
.wrapper{
padding: 20px;
}
