<!DOCTYPE html>
<html>
<head>
<title>CREATE LOGIN</title>
<link rel="stylesheet" type="text/css" href="login.css">
</head>
<body>
<div class="login">
<img src="admin.jpg" class="logo">
<form>
<h3>Email</h3>
<input type="email" name="" placeholder="Email">
<h3>Password</h3>
<input type="Password" name="" placeholder="Password">
<br>
<button>Login</button>
</form>
</div>
</body>
</html>CSS COODING
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body
{
background: linear-gradient(to bottom right,red,#6257f4);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login{
width: 300px;
height: 350px;
padding: 20px;
border-radius: 8px;
box-shadow: -10px -10px 15px rgba(255,255,255,0.4), 10px 10px 15px rgba(45,52,54,0.9);
}
.logo{
width: 30%;
margin-left: 100px;
border: 1px solid white;
border-radius: 50%;
box-shadow: -5px -5px 10px rgba(255,255,255,0.4), 5px 5px 10px rgba(45,52,54,0.9),
inset -5px -5px 10px rgba(255,255,255,0.4),inset 5px 5px 10px rgba(45,52,54,0.9);
}
h3{
color: white;
margin-bottom: 8px;
}
form{
margin:10px 20px;
}
input{
border-radius: 8px;
border: none;
outline: none;
padding: 10px;
width: 90%;
margin-bottom: 20px;
box-shadow: -5px -5px 10px rgba(255,255,255,0.4), 5px 5px 10px rgba(45,52,54,0.9),
inset -5px -5px 10px rgba(255,255,255,0.4),inset 5px 5px 10px rgba(45,52,54,0.9);
}
button{
width: 50%;
padding: 10px;
border: none;
outline: none;
background: linear-gradient(to bottom right,#c357f4,#6257f4);
background: rgba(7 247 203 / 48%);
color: white;
border-radius: 8px;
box-shadow: -5px -5px 10px rgba(255,255,255,0.4), 5px 5px 10px rgba(45,52,54,0.9),
inset -5px -5px 10px rgba(255,255,255,0.4),inset 5px 5px 10px rgba(45,52,54,0.9);
}
.login:hover{
box-shadow: -5px -5px 10px rgba(255,255,255,0.4), 5px 5px 10px rgba(45,52,54,0.9),
inset -5px -5px 10px rgba(255,255,255,0.4),inset 5px 5px 10px rgba(45,52,54,0.9);
transition: 0.4s linear;
}
