Login form

Source Code of its

<html>
<head>
<style>
body{background-image:linear-gradient(hsl(240, 50%, 40%), hsl(240, 52%, 12%)); position: relative; margin: 0px; padding: 0px;}

#main{background-color: rgba(173, 216, 230, 0.19); width: 400px; height: 300px; border-radius: 40px;
transform: translate(-50%, -50%); left: 50%; top: 50%; position: absolute; border: 2px solid gray;
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.31);}

#profile{
width: 150px; height: 150px; background-color: green; border-radius: 50%; position: absolute; top: -75px; left: 125px; border: 3px solid white; background-image: url(21.jpg);
}

#username{position: absolute; top: 100px; width: 250px; height: 40px; left: 75px; padding-left: 15px;
background: rgba(96, 96, 144, 0.47); outline: 0px; border: 1px solid white; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.31), 2px 2px 7px rgba(0, 0, 0, 0.31); font-size: 16px; color: white; font-family: corbel;}

#password{position: absolute; top: 150px; width: 250px; height: 40px; left: 75px; padding-left: 15px; background: rgba(96, 96, 144, 0.47); outline: 0px; border: 0px; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.31), 2px 2px 7px rgba(0, 0, 0, 0.31); font-size: 16px; color: white; font-family: corbel; border: 1px solid white;}

#btn{position: absolute; top: 200px; width: 250px; height: 40px; left: 75px; border: 1px solid gray; color: white; text-align: center; line-height: 40px; font-family: arial; border-radius: 20px; background-image: linear-gradient(#0e1569, #262196); cursor: pointer; }

#btn:hover{background: red;}

#btn:active{background: green;}
::placeholder{color: #a8a8a8;}

#forgot{color: white; position: absolute; bottom: 25px; text-align: center; width: 100%; font-family: corbel;}

</style>
</head>
<body>

<div id="main">
<div id="profile">
</div>
<input type="text" id="username" placeholder="Please Enter Username or Email">
<input type="password" id="password" placeholder="Please Enter Password">
<div id="btn">LOGIN</div>
<div id="forgot">forgot Password?</div>
</div>
</body>
</html>

Login form

1 Comments:

Recent Post

Recent Comments

Blog Archive