Log In

 

LogIn Form

HTML

<div class="from">

<h1 class="header">LOG IN</h1>

<img class="img" src="https://media.istockphoto.com/photos/blue-

abstract-background-or-texture-picture-id1138395421?k=6&m=1138395421&s=

612x612&w=0&h=bJ1SRWujCgg3QWzkGPgaRiArNYohPl7-Wc4p_Fa_cyA="

style="width: 100%; height: 650px;">

<input type="text" placeholder="Username" id="username">

<input type="password" placeholder="password" id="password">

<input onclick="login()" type="submit" value="Log In"

placeholder="Log In">

</div>

CSS

<style>

.body{

margin: 300px;

padding: 300px;

}

.from{

width: 500px;

height: 400px;

margin: auto;

margin-top: 60px;

padding: 80px;

background-color: rgba(117, 117, 117, 0.493);

border-radius: 20px;

}

input[type=text],

input[type=password]{

width: 100%;

height: 20px;

font-size:18px ;

padding: 14px 10px;

margin-bottom: 16px;

background-color: rgb(255, 255, 255);

border-radius: 8px;

}

.header{

text-align: center;

color: white;

font-size: 50px;

}

input[type=submit]{

width: 530px;

height: 50px;

font-size: medium;

text-align: center;

border-radius: 8px;

margin-top: 10px;

}

input[type=submit]:hover{

background-color: rgb(192, 192, 192);

}

.img{

position: absolute;

background-repeat: no-repeat;

z-index: -1;

left: 0;

top: 0;

}

</style>

JS

<script>

function login()

{

var uname=document.getElementById('username').value;

var pass=document.getElementById('password').value;

if(uname=="world" && pass=="123")

{

location.assign("http://127.0.0.1:5500/style/style/

            shopping8.html");

}

else

{

alert("LogIn Failed");

}

}

</script>