html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Made By VEDANG -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login Form</title>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
</head>
<body>
<header>
</header><br><br>
<main id="form">
<section style="display: inline;" id="ma">
<i class='far fa-user-circle' style='font-size:84px;padding: 5px; color: #27a5df'></i>
<h1> Login </h1><hr><br>
Username
<input id="un" placeholder="Enter username..." type="text" /><br><br>
Password
<input type="password" id="psw" placeholder="Enter password..." /><br><br>
<i class="far fa-check-circle" style="font-size: 20px;color: #27a5df" onclick="uc()" id="1"></i>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Made By VEDANG */
@media screen and (min-width: 480px) {
#form {
width:400px;
}
}
@-webkit-keyframes animatebottom {
0% {
opacity:0;
margin-top:500px;
}
100% {
opacity:1;
margin-top:0px;
}
}
@keyframes animatebottom {
0% {
opacity:0;
margin-top:500px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Made By VEDANG */
function $(id){
return document.getElementById(id);
}
function ch(){
$("2").style.display="none";
$("1").style.display="inline";
}
function uc(){
$("1").style.display="none";
$("2").style.display="inline";
}
function login(){
var x = $("un").value;
var y = $("psw").value;
if(x.trim()!=""&&y.trim()!=""){
alert("welcome back user : "+x);
$("info").innerHTML="You are logged in as:<br><br>Username: <b>"+x+"</b><br>Password: <b>"+y+"</b>";
$("ma").style.display="none";
$("out").style.display="inline";
}else {
alert("Invalid user name or password")
}
}
function logout(){
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run