HTML+CSS登录界面

今天学习了一个HTML+CSS登录界面
效果图如下：

背景图片可以选取自己喜欢的，以下是实现代码：

login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>  
    <link rel="stylesheet" href="../css/login.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
	<div id="login-box">
		<h1>Login</h1>
		<div class="form">
			<div class="item">
			   <i class="fa fa-github-alt" style="font-size:24px"></i>
			   <input type="text" placeholder="Username">		   
			</div>
			<div class="item">
			   <i class="fa fa-search" style="font-size:24px"></i>
			   <input type="text" placeholder="Password">		   
			</div>
		</div>
		<button>Login</button>
	</div>
	
</body>
</html>

login.css

body{
    		background:url('../image/2.jpg');
    		background-repeat:no-repeat;
    		background-size:100% auto;
    	}
    	#login-box{
			width:30%;
			height:auto;
			margin:0 auto ;
			margin-top:13%;
			text-align:center;
			background:#00000060;
			padding:20px 50px;
			}
		#login-box h1{
			color:#fff;
		}
		#login-box .form .item{
			margin-top:15px;
		}
		#login-box .form .item i{
			font-size:18px;
			color:#fff;
		}
		#login-box .form .item input{
			width:180px;
			font-size:18px;
			border:0;
			border-bottom:2px solid #fff;
			padding:5px 10px;
			background:#ffffff00;
			color:#fff;
		}
		#login-box 	button{
			margin-top:20px;
			width:190px;
			height:30px;
			font-size:20px;
			font-weight:700;
			color:#fff;
			background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
			border:0;
			border-radius:15px;
		}