iamaamir/index.html

## index.html
<html>
	<title>Login</title>

	<head>
		<link rel="stylesheet" href="style.css" />
		<link
			href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
			rel="stylesheet"
		/>
		<script src='script.js'></script>
	</head>

	<body>
		<div class="loginFormWrapper" id="lgw">
			<form id="loginForm">
				<input type="email" placeholder="Enter Email" id="email" />
				<input type="password" placeholder="Password" id="pass" />
				<input type="number" placeholder="OTP" id="otp" />
				<input type="submit" value="Login" />
			</form>
		</div>


		<div class= "loginFormWrapper hide" id="result">
			<h1>Thanks for submiting your details, we will get back to you soon</h1>
		</div>
	</body>
</html>

## script.js
window.onload = function(){
	const loginForm = document.getElementById('loginForm');
	const result = document.getElementById('result');
	const lgw = document.getElementById('lgw');


	// on form submit

	loginForm.onsubmit = function(e){
		e.preventDefault();
		result.classList.toggle('hide');
		lgw.classList.add('hide');
	}
}

## style.css

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}


body{
	background-color: #454545;
	font-family: 'Poppins', sans-serif;
}


.loginFormWrapper{
	width: 520px;
	margin: 10% auto;
	background-color: #eee;
	padding: 25px;
	border: 1px solid #efefef;
	animation: jump 0.3s cubic-bezier(0.61, 1, 0.88, 1);
}


.loginFormWrapper form{
	width: 420px;
	margin: 0 auto;
}

.loginFormWrapper input{
	margin: 5px;
	padding: 8px;
	width: 100%;
	transition: all ease 0.3s;
}


.loginFormWrapper input[type=submit]{
	background-color: #38c;
	border: 1px solid #fff;
	color: #fff;
	cursor: pointer;
}


.hide{
	display: none;
	animation: fadeIn 0.3 ease;

}

.show{
	display: block;
	animation: fadeIn 0.3 ease;
}


@keyframes fadeIn{
	0%{
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}


@keyframes jump {
	0%{
		opacity: 0;
		transform: scale(0.5) translateY(250px) rotate(20deg);
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
	<html>
	<title>Login</title>

	<head>
	<link rel="stylesheet" href="style.css" />
	<link
	href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"
	rel="stylesheet"
	/>
	<script src='script.js'></script>
	</head>

	<body>
	<div class="loginFormWrapper" id="lgw">
	<form id="loginForm">
	<input type="email" placeholder="Enter Email" id="email" />
	<input type="password" placeholder="Password" id="pass" />
	<input type="number" placeholder="OTP" id="otp" />
	<input type="submit" value="Login" />
	</form>
	</div>


	<div class= "loginFormWrapper hide" id="result">
	<h1>Thanks for submiting your details, we will get back to you soon</h1>
	</div>
	</body>
	</html>
	window.onload = function(){
	const loginForm = document.getElementById('loginForm');
	const result = document.getElementById('result');
	const lgw = document.getElementById('lgw');



	// on form submit

	loginForm.onsubmit = function(e){
	e.preventDefault();
	result.classList.toggle('hide');
	lgw.classList.add('hide');
	}
	}

	*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}




	body{
	background-color: #454545;
	font-family: 'Poppins', sans-serif;
	}




	.loginFormWrapper{
	width: 520px;
	margin: 10% auto;
	background-color: #eee;
	padding: 25px;
	border: 1px solid #efefef;
	animation: jump 0.3s cubic-bezier(0.61, 1, 0.88, 1);
	}



	.loginFormWrapper form{
	width: 420px;
	margin: 0 auto;
	}

	.loginFormWrapper input{
	margin: 5px;
	padding: 8px;
	width: 100%;
	transition: all ease 0.3s;
	}



	.loginFormWrapper input[type=submit]{
	background-color: #38c;
	border: 1px solid #fff;
	color: #fff;
	cursor: pointer;
	}


	.hide{
	display: none;
	animation: fadeIn 0.3 ease;

	}

	.show{
	display: block;
	animation: fadeIn 0.3 ease;
	}


	@keyframes fadeIn{
	0%{
	opacity: 0;
	}

	100%{
	opacity: 1;
	}
	}


	@keyframes jump {
	0%{
	opacity: 0;
	transform: scale(0.5) translateY(250px) rotate(20deg);
	}
	100%{
	opacity: 1;
	transform: none;
	}
	}