joalbertg/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Form login</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
	<div class="content">
		<h1>Login to site</h1>

		<form class="login-form">
			<input class="login-form__input" type="text" id="username" name="username" placeholder="Username">
			<input class="login-form__input" type="password" id="password" name="password" placeholder="Password">
			<input class="login-form__submit" type="submit" value="login">
			<a class="login-form__forgot" href="#">Forgot your password?</a>
		</form>
	</div>
</body>
</html>

## styles.css
* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(220deg, purple, rgba(0, 0, 0, .8));
	min-height: 100vh;
	font-family: sans-serif;
}

h1 {
	text-align: center;
	color: white;
}

.content {
	margin-top: 20%;
}

.login-form {
	width: 60%;
	background-color: rgba(255, 255, 255, .2);
	margin: auto;
	padding: 2em 1em;
	border: 1px solid rgba(255, 255, 255, 0.4);
}

.login-form__input {
	display: block;
	width: 100%;
	margin-bottom: 1em;
	border: none;
	line-height: 2.5;
	padding: 0 1em;
}

.login-form__input:focus {
	border: 2px solid purple;
	outline: none;
}

.login-form__submit {
	display: block;
	width: 100%;
	background-color: teal;
	color: white;
	border: none;
	line-height: 2.5;
	text-transform: uppercase;
	font-size: 1.1em;
	cursor: pointer;
}

.login-form__submit:hover {
	background-color: #005252;
}

.login-form__forgot {
	text-align: center;
	display: block;
	padding-top: 1.5em;
	color: white;
	text-decoration: none;
}

.login-form__forgot:hover {
	color: #ccc;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Form login</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	</head>
	<body>
	<div class="content">
	<h1>Login to site</h1>

	<form class="login-form">
	<input class="login-form__input" type="text" id="username" name="username" placeholder="Username">
	<input class="login-form__input" type="password" id="password" name="password" placeholder="Password">
	<input class="login-form__submit" type="submit" value="login">
	<a class="login-form__forgot" href="#">Forgot your password?</a>
	</form>
	</div>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body {
	background-image: linear-gradient(220deg, purple, rgba(0, 0, 0, .8));
	min-height: 100vh;
	font-family: sans-serif;
	}

	h1 {
	text-align: center;
	color: white;
	}

	.content {
	margin-top: 20%;
	}

	.login-form {
	width: 60%;
	background-color: rgba(255, 255, 255, .2);
	margin: auto;
	padding: 2em 1em;
	border: 1px solid rgba(255, 255, 255, 0.4);
	}

	.login-form__input {
	display: block;
	width: 100%;
	margin-bottom: 1em;
	border: none;
	line-height: 2.5;
	padding: 0 1em;
	}

	.login-form__input:focus {
	border: 2px solid purple;
	outline: none;
	}

	.login-form__submit {
	display: block;
	width: 100%;
	background-color: teal;
	color: white;
	border: none;
	line-height: 2.5;
	text-transform: uppercase;
	font-size: 1.1em;
	cursor: pointer;
	}

	.login-form__submit:hover {
	background-color: #005252;
	}

	.login-form__forgot {
	text-align: center;
	display: block;
	padding-top: 1.5em;
	color: white;
	text-decoration: none;
	}

	.login-form__forgot:hover {
	color: #ccc;
	}