Blog login box

body part

<div class="login">
		<h2 class="title">Login</h2>
		<form class="login-content" action="">
			<input type="text" placeholder=" Please enter a user name ">
			<input type="password" placeholder=" Please input a password ">
			<input type="submit" value="sign In">
		</form>
	</div>

css part

  	*{
		margin: 0;
		padding: 0;
	}
	html{
		height: 100%;
	}
	body{
		display: grid;/* Grid layout */
		height: 100%;
		background: url(../images/7.jpg) no-repeat center/cover;
	}
	.login{
		width: 300px; 
		height: 300px;
		background-color: #ebf0f1;
		margin: auto;
		border-radius: 8px;
	}
	.login:before{
		display: block;
		content:'';
		width: 100%;
		height: 10px;
		background-image: -webkit-linear-gradient(left,#27ae60 0%,#27ae60 
		20%,#8e44ad 20%, #8e44ad 40%,#3498db 40%,#3498db 60%, #e74c3c 60%,
		#e74c3c 80%, #f1c40f 80%,#f1c40f 100%);/* css3 gradient */
		border-radius: 8px 8px 0 0;
	}
	.title{
		font-size: 2em;
		color: #096;
		line-height: 80px;
		text-align: center;
	}
	.login-content{
		display: flex;	/* Elastic box model */
		flex-direction: column;	/* Change the direction of the spindle   vertical */
		justify-content: space-around;/* Equal distribution of residual space */
		align-items: center;/* Center the secondary shaft */
		height: 200px;
		/*background-color: #096;*/
	}
	.login-content input{
		width: 80%;
		height: 40px;
		outline: none;
		border: 1px solid #bbb;
		border-radius: 8px;
		text-indent: 1em;
	}
	.login-content input[type='submit']{
		background-color: #e74c3c;
		text-indent: 0;
		color: #fff;
	}