تا حدودی بهتر شد:
ضمیمه 155939
<!DOCTYPE html>
<html lang="fa">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title></title>
<style media="screen">
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background: linear-gradient(to bottom, #323232 0%, #3F3F3F 40%, #1C1C1C 150%), linear-gradient(to top, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.25) 200%);
background-blend-mode: multiply;
/* background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);
background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
/*
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); */
}
/* background-color: #080710;
height: 100% !important;
background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}
.background{
width: 100%;
height: 100%;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
}
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: -80px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -30px;
bottom: -80px;
} */
form{
height: 520px;
width: 400px;
background-color: rgba(255,255,255,0.13);
position: absolute;
/* transform: translate(-100%,-50); */
top: 50px;
/* left: 50%; */
border-radius: 10px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.1);
box-shadow: 0 0 40px rgba(8,7,16,0.6);
padding: 50px 35px;
}
form *{
font-family: 'Poppins',sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
outline: none;
border: none;
}
form h3{
font-size: 32px;
font-weight: 500;
line-height: 42px;
text-align: center;
}
label{
display: block;
margin-top: 30px;
font-size: 16px;
font-weight: 500;
}
input{
display: block;
height: 50px;
width: 100%;
background-color: rgba(255,255,255,0.07);
border-radius: 3px;
padding: 0 10px;
margin-top: 8px;
font-size: 14px;
font-weight: 300;
}
::placeholder{
color: #e5e5e5;
}
button{
margin-top: 50px;
width: 100%;
background-color: #ffffff;
color: #080710;
padding: 15px 0;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
cursor: pointer;
}
.social{
margin-top: 30px;
display: flex;
}
.social div{
background: red;
width: 150px;
border-radius: 3px;
padding: 5px 10px 10px 5px;
background-color: rgba(255,255,255,0.27);
color: #eaf0fb;
text-align: center;
}
.social div:hover{
background-color: rgba(255,255,255,0.47);
}
.social .fb{
margin-right: 25px;
}
.social i{
margin-left: 4px;
}
</style>
</head>
<body dir="rtl">
<!--<div class="background">
<div class="shape"></div>
<div class="shape"></div>
</div>-->
<table style="width: 100%; height: 100%">
<col width="50%;"/><col width="50%;"/>
<tr>
<td>
</td>
<td align="center" valign="middle">
<form >
<h3>ورود به گنجه کلید</h3>
<label for="username">نام کاربری</label>
<input type="text" placeholder="Email or Phone" id="username">
<label for="password">رمز ورود</label>
<input type="password" placeholder="Password" id="password">
<button>ورود</button>
<div class="social">
<div class="go"><i class=""></i>بازیابی رمز!</div>
<div class="fb"><i class="fab"></i>ایجاد حساب جدید</div>
</div>
</form>
</td>
</tr>
</table>
</body>
</html>
