<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body
{
display: flex;
justify-content: center;
align-items: center;
background-image: url('https://makify1234.rf.gd/bg1.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed;
min-height: 100vh;
}
input:-internal-autofill-selected {
background-color: none;
}
body form
{
border: 2px solid rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
background:transparent ;
padding: 10px;
border-radius: 5px;
height: 400px;
width: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
}
body form .box
{
margin:5px;
color: white;
position: relative;
width: 300px;
border-bottom: 2px solid white;
margin: 30px 0px;
}
body form .box label
{
position: absolute;
left:5px;
top:20%;
transform: translateY(-50%);
transition:0.5s;
font-size: 1em;
}
form .box input:valid~label,form .box input:focus~label
{
top:-5px;
}
body form .box input
{
background: transparent;
padding:0px 8px 0px 5px;
outline: none;
border: none;
color:white;
height: 50px;
width: 100%;
font-size: 1em;
}
input[type="submit"]
{
background: transparent;
color: white;
backdrop-filter: blur(5px);
font-size: 25px;
border: 2px solid red;
border-radius: 5px;
padding: 2px 9px;
}
</style>
</head>
<body>
<form method="post">
<div class="box">
<input type="email" name="email" required>
<label>email</label>
</div>
<div class="box">
<input type="password" name="password" required>
<label>password</label>
</div>
<div >
<input type="submit" name="save" value="login">
</div>
</form>
</body>
</html>
0 Comments