出典 : https://www.facebook.com/groups/programmershub1/
作者 : Rãhmát Àfghán氏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hoge</title>
<!--<link rel="stylesheet" type="text/css" href="tt.css">-->
<!-- ▼▼▼tt.css▼▼▼ -->
<style>
body{
margin:0;
padding:0;
background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sirakabaararagi/20200403/20200403042518.jpg);
background-size:cover;
font-family:sans-serif;
}
.login{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:350px;
height:420px;
padding:80px 40px;
box-sizing:border-box;
background:rgba(0,0,0,.3);
border-radius:10px;
}
h2{
margin:0;
padding:0 0 20px;
color:#efed40;
text-align:center;
}
.login p{
margin:0;
padding:0;
font-weight:bold;
color:#fff;
}
.login input{
width:100%;
margin-bottom:20px;
}
.login input[type="text"],
.login input[type="password"]
{
border:none;
border-bottom:1px solid #fff;
background:transparent;
outline:none;
height:40px;
color:#fff;
font-size:16px;
}
.login input[type="submit"]
{
border:none;
outline:none;
height:35px;
color:#fff;
font-size:16px;
background:orange;
cursor:pointer;
border-radius:10px;
}
.login input[type="submit"]:hover
{
background:#efed40;
color:#262626;
}
.login a{
color:#fff;
text-decoration:none;
font-size:14px;
font-weight:bold;
}
::placeholder{
color:rgba(255,255,255,.5);
}
</style>
<!-- ▲▲▲tt.css▲▲▲ -->
</head>
<body>
<div class="login">
<h2>Login Here</h2>
<form>
<p>Email</p>
<input type="Password" name="" placeholder="***">
<input type="submit" name="" value="Sign in">
<a href="#">Forget Password</a>
</form>
</div>
</body>
</html>
