body{ margin: 0; padding: 0; background-position: center; background: url(image.jpg); background-size: cover;  font-family: sans-serif; } 


.login-box{ width: 320px; height: 420px; background: rgba(0,0,0,0.5); color: #fff; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); box-sizing: border-box; padding: 70px 30px;} 
.avatar{ width: 100px; height: 100px; border-radius: 50%; position: absolute; top: calc(50px - 30%); left: calc(50% - 50px);} 

 h1{ margin: 0; padding: 0 0 20px; text-align: center; font-size: 22px;} 
.login-box p{ margin: 0; padding: 0; font-weight: bold; }   .login-box input{ width: 100%; margin-bottom: 20px; }  .login-box input[type="text"], [type="password"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; }  .login-box input[type="submit"] { border: none; outline: none; height: 40px; background: #1c8adb; color: #fff: font-size: 18px; border-radius: 20px; } ?