Posandu/loginform.html

## loginform.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

	* , :before , :after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: inherit;
	}


	body {
		font-family: "Poppins",sans-serif;
	}

	.main {
		height: 100vh;
		width: 100%;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		background: url(https://images.unsplash.com/photo-1506452305024-9d3f02d1c9b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80);
		background-size: cover;
		background-repeat: no-repeat;
	}
	.login {
		position: relative;
		background: #686d6f7a;
		padding: 35px 40px;
		border-radius: 4px;
		z-index: 1;
		overflow: hidden;
		box-shadow: 0px 12px 31px #ffffff52 , 0px 36px 31px #000000a1;
		animation: login 0.88s ease;
	}
	@keyframes login {
		0% {
			transform: translateY(-10%) scale(.8);
			opacity: 0;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
	.login:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: url(https://images.unsplash.com/photo-1506452305024-9d3f02d1c9b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80);
		width: 100%;
		z-index: -1;
		background-size: 182vh;
		background-position: 28% , 83%;
		filter: blur(24px);
		background-repeat: no-repeat;
		opacity: 0.8;
	}
	.heading {
		font-size: 24px;
		font-weight: 400;
		text-align: center;
		margin-bottom: 18px;
		color: white;
	}
	.input {
		display: block;
		margin-bottom: 13px;
		margin-top: 11px;
	}
	.input label {
		display: block;
		margin-bottom: 3px;
		font-size: 13px;
		color: white;
		cursor: pointer;
	}
	.input input {
		width: 100%;
		padding: 10px;
		outline: none;
		border: none;
		font-size: 15px;
		border-radius: 4px;
		background: #0000002b;
		color: white;
		transition: all 0.2s ease;
	}
	.input input:hover {
		background: #3d434c;
	}
	.input input:focus {
		box-shadow: 0px 2px 2px #0000002b , 0px 5px 10px #00000036;
		background: #434343;
	}
	.login-btn {
		margin-top: 10px;
		margin-bottom: 15px;
		padding: 8px 15px;
		font-size: 14px;
		background: #00000038;
		border: 2px solid #38363654;
		color: #e1e1e1;
		border-radius: 4px;
		width: 100%;
		transition: all 0.2s cubic-bezier(.79,.14,.15,.86);
		cursor: pointer;
	}
	.login-btn:hover {
		background: #0663b4;
		transition: all 0.1s ease;
	}
	.login-btn:focus {
		box-shadow: 0px 0px 0px 2px #a7a7a7b5;
		background: #00000061;
	}
	.meta-text {
		font-size: 13px;
		margin-bottom: 15px;
		color: white;
	}
	.social-icons {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.social-icon {
		min-height: 40px;
		background: var(--c);
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		max-width: 40px;
		max-height: 40px;
		border-radius: 28px;
		box-shadow: 0px 4px 8px #0c0b0b00;
		transition: all 0.2s ease;
		border: none;
		outline: none;
	}
	.social-icon:hover {
		box-shadow: 0px 4px 14px #0000007a;
	}
	.social-icon:focus {
		box-shadow: 0px 0px 0px 2px currentColor;
		transform: scale(.9);
	}
	.social-icon * {
		pointer-events: none;
		fill: #fff;
	}
	.social-icon.fb {
		--c: #4267B2;
	}
	.social-icon.pr {
		--c: #E60023;
	}
	.social-icon.in {
		--c: #5B51D8;
	}

</style>
</head>
<body>

	<div class="main">
		<div class="login">
			<h1 class="heading">Login to your account</h1>

			<div class="input">
				<label for="username">Username</label>
				<input type="text" id="username" autocomplete="false" />
			</div>

			<div class="input">
				<label for="password">Password</label>
				<input type="password" id="password" autocomplete="false" />
			</div>

			<div class="divider"></div>

			<button class="login-btn">Log In</button>

			<p class="meta-text">Too lazy ? Login with a social media account</p>

			<div class="social-icons">
				<button class="social-icon fb"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">    <path d="M15,3C8.373,3,3,8.373,3,15c0,6.016,4.432,10.984,10.206,11.852V18.18h-2.969v-3.154h2.969v-2.099c0-3.475,1.693-5,4.581-5 c1.383,0,2.115,0.103,2.461,0.149v2.753h-1.97c-1.226,0-1.654,1.163-1.654,2.473v1.724h3.593L19.73,18.18h-3.106v8.697 C22.481,26.083,27,21.075,27,15C27,8.373,21.627,3,15,3z"/></svg></button>
				<button class="social-icon pr"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px"><path d="M25,2C12.318,2,2,12.317,2,25s10.318,23,23,23s23-10.317,23-23S37.682,2,25,2z M27.542,32.719c-3.297,0-4.516-2.138-4.516-2.138s-0.588,2.309-1.021,3.95s-0.507,1.665-0.927,2.591c-0.471,1.039-1.626,2.674-1.966,3.177c-0.271,0.401-0.607,0.735-0.804,0.696c-0.197-0.038-0.197-0.245-0.245-0.678c-0.066-0.595-0.258-2.594-0.166-3.946c0.06-0.88,0.367-2.371,0.367-2.371l2.225-9.108c-1.368-2.807-0.246-7.192,2.871-7.192c2.211,0,2.79,2.001,2.113,4.406c-0.301,1.073-1.246,4.082-1.275,4.224c-0.029,0.142-0.099,0.442-0.083,0.738c0,0.878,0.671,2.672,2.995,2.672c3.744,0,5.517-5.535,5.517-9.237c0-2.977-1.892-6.573-7.416-6.573c-5.628,0-8.732,4.283-8.732,8.214c0,2.205,0.87,3.091,1.273,3.577c0.328,0.395,0.162,0.774,0.162,0.774l-0.355,1.425c-0.131,0.471-0.552,0.713-1.143,0.368C15.824,27.948,13,26.752,13,21.649C13,16.42,17.926,11,25.571,11C31.64,11,37,14.817,37,21.001C37,28.635,32.232,32.719,27.542,32.719z"/></svg></button>
				<button class="social-icon in"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">    <path d="M 8 3 C 5.239 3 3 5.239 3 8 L 3 16 C 3 18.761 5.239 21 8 21 L 16 21 C 18.761 21 21 18.761 21 16 L 21 8 C 21 5.239 18.761 3 16 3 L 8 3 z M 18 5 C 18.552 5 19 5.448 19 6 C 19 6.552 18.552 7 18 7 C 17.448 7 17 6.552 17 6 C 17 5.448 17.448 5 18 5 z M 12 7 C 14.761 7 17 9.239 17 12 C 17 14.761 14.761 17 12 17 C 9.239 17 7 14.761 7 12 C 7 9.239 9.239 7 12 7 z M 12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"/></svg></button>
			</div>
		</div>
	</div>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

	* , :before , :after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: inherit;
	}


	body {
	font-family: "Poppins",sans-serif;
	}

	.main {
	height: 100vh;
	width: 100%;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	background: url(https://images.unsplash.com/photo-1506452305024-9d3f02d1c9b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80);
	background-size: cover;
	background-repeat: no-repeat;
	}
	.login {
	position: relative;
	background: #686d6f7a;
	padding: 35px 40px;
	border-radius: 4px;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0px 12px 31px #ffffff52 , 0px 36px 31px #000000a1;
	animation: login 0.88s ease;
	}
	@keyframes login {
	0% {
	transform: translateY(-10%) scale(.8);
	opacity: 0;
	}
	100% {
	transform: scale(1);
	opacity: 1;
	}
	}
	.login:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: url(https://images.unsplash.com/photo-1506452305024-9d3f02d1c9b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80);
	width: 100%;
	z-index: -1;
	background-size: 182vh;
	background-position: 28% , 83%;
	filter: blur(24px);
	background-repeat: no-repeat;
	opacity: 0.8;
	}
	.heading {
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	margin-bottom: 18px;
	color: white;
	}
	.input {
	display: block;
	margin-bottom: 13px;
	margin-top: 11px;
	}
	.input label {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	color: white;
	cursor: pointer;
	}
	.input input {
	width: 100%;
	padding: 10px;
	outline: none;
	border: none;
	font-size: 15px;
	border-radius: 4px;
	background: #0000002b;
	color: white;
	transition: all 0.2s ease;
	}
	.input input:hover {
	background: #3d434c;
	}
	.input input:focus {
	box-shadow: 0px 2px 2px #0000002b , 0px 5px 10px #00000036;
	background: #434343;
	}
	.login-btn {
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 8px 15px;
	font-size: 14px;
	background: #00000038;
	border: 2px solid #38363654;
	color: #e1e1e1;
	border-radius: 4px;
	width: 100%;
	transition: all 0.2s cubic-bezier(.79,.14,.15,.86);
	cursor: pointer;
	}
	.login-btn:hover {
	background: #0663b4;
	transition: all 0.1s ease;
	}
	.login-btn:focus {
	box-shadow: 0px 0px 0px 2px #a7a7a7b5;
	background: #00000061;
	}
	.meta-text {
	font-size: 13px;
	margin-bottom: 15px;
	color: white;
	}
	.social-icons {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	.social-icon {
	min-height: 40px;
	background: var(--c);
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	max-width: 40px;
	max-height: 40px;
	border-radius: 28px;
	box-shadow: 0px 4px 8px #0c0b0b00;
	transition: all 0.2s ease;
	border: none;
	outline: none;
	}
	.social-icon:hover {
	box-shadow: 0px 4px 14px #0000007a;
	}
	.social-icon:focus {
	box-shadow: 0px 0px 0px 2px currentColor;
	transform: scale(.9);
	}
	.social-icon * {
	pointer-events: none;
	fill: #fff;
	}
	.social-icon.fb {
	--c: #4267B2;
	}
	.social-icon.pr {
	--c: #E60023;
	}
	.social-icon.in {
	--c: #5B51D8;
	}

	</style>
	</head>
	<body>

	<div class="main">
	<div class="login">
	<h1 class="heading">Login to your account</h1>

	<div class="input">
	<label for="username">Username</label>
	<input type="text" id="username" autocomplete="false" />
	</div>

	<div class="input">
	<label for="password">Password</label>
	<input type="password" id="password" autocomplete="false" />
	</div>

	<div class="divider"></div>

	<button class="login-btn">Log In</button>

	<p class="meta-text">Too lazy ? Login with a social media account</p>

	<div class="social-icons">
	<button class="social-icon fb"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path d="M15,3C8.373,3,3,8.373,3,15c0,6.016,4.432,10.984,10.206,11.852V18.18h-2.969v-3.154h2.969v-2.099c0-3.475,1.693-5,4.581-5 c1.383,0,2.115,0.103,2.461,0.149v2.753h-1.97c-1.226,0-1.654,1.163-1.654,2.473v1.724h3.593L19.73,18.18h-3.106v8.697 C22.481,26.083,27,21.075,27,15C27,8.373,21.627,3,15,3z"/></svg></button>
	<button class="social-icon pr"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30px" height="30px"><path d="M25,2C12.318,2,2,12.317,2,25s10.318,23,23,23s23-10.317,23-23S37.682,2,25,2z M27.542,32.719c-3.297,0-4.516-2.138-4.516-2.138s-0.588,2.309-1.021,3.95s-0.507,1.665-0.927,2.591c-0.471,1.039-1.626,2.674-1.966,3.177c-0.271,0.401-0.607,0.735-0.804,0.696c-0.197-0.038-0.197-0.245-0.245-0.678c-0.066-0.595-0.258-2.594-0.166-3.946c0.06-0.88,0.367-2.371,0.367-2.371l2.225-9.108c-1.368-2.807-0.246-7.192,2.871-7.192c2.211,0,2.79,2.001,2.113,4.406c-0.301,1.073-1.246,4.082-1.275,4.224c-0.029,0.142-0.099,0.442-0.083,0.738c0,0.878,0.671,2.672,2.995,2.672c3.744,0,5.517-5.535,5.517-9.237c0-2.977-1.892-6.573-7.416-6.573c-5.628,0-8.732,4.283-8.732,8.214c0,2.205,0.87,3.091,1.273,3.577c0.328,0.395,0.162,0.774,0.162,0.774l-0.355,1.425c-0.131,0.471-0.552,0.713-1.143,0.368C15.824,27.948,13,26.752,13,21.649C13,16.42,17.926,11,25.571,11C31.64,11,37,14.817,37,21.001C37,28.635,32.232,32.719,27.542,32.719z"/></svg></button>
	<button class="social-icon in"><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"> <path d="M 8 3 C 5.239 3 3 5.239 3 8 L 3 16 C 3 18.761 5.239 21 8 21 L 16 21 C 18.761 21 21 18.761 21 16 L 21 8 C 21 5.239 18.761 3 16 3 L 8 3 z M 18 5 C 18.552 5 19 5.448 19 6 C 19 6.552 18.552 7 18 7 C 17.448 7 17 6.552 17 6 C 17 5.448 17.448 5 18 5 z M 12 7 C 14.761 7 17 9.239 17 12 C 17 14.761 14.761 17 12 17 C 9.239 17 7 14.761 7 12 C 7 9.239 9.239 7 12 7 z M 12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"/></svg></button>
	</div>
	</div>
	</div>


	</body>
	</html>