karthikruiux/animated-and-responsive-login-page.markdown

## animated-and-responsive-login-page.markdown

      
    Raw
  

              animated-and-responsive-login-page.markdown
            
          
    Animated and Responsive Login Page

A Pen by Karthik Rajeev on CodePen.
License.

  
## index.html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Animated Login Page</title>
	<link href="https://fonts.googleapis.com/css?family=Lemonada&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js" ></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<img class="wave" src="http://camlent.com/login_page/img/wave.png">
	<div class="container">
		<div class="img">
			<img src="http://camlent.com/login_page/img/img.svg">
		</div>
		<div class="login-container">
			<form action="index.html">
				<img class="avatar" src="http://camlent.com/login_page/img/profile.svg">
				<h2>Welcome</h2>
				<div class="input-div one">
					<div class="i">
						<i class="fas fa-user"></i>
					</div>
					<div>
						<h5>Username</h5>
						<input class="input" type="text">
					</div>
				</div>
				<div class="input-div two">
					<div class="i">
						<i class="fas fa-lock"></i>
					</div>
					<div>
						<h5>Password</h5>
						<input class="input" type="password">
					</div>
				</div>
				<a href="forgot_password.html">Forgot Password?</a>
				<input type="submit" class="btn" value="Login">
			</form>
		</div>
	</div>
	<script text="text/javascript" src="main.js"></script>
</body>
</html>

## script.js
const inputs = document.querySelectorAll('.input');

function focusFunc(){
	let parent = this.parentNode.parentNode;
	parent.classList.add('focus');
}

function blurFunc(){
	let parent = this.parentNode.parentNode;
	if(this.value == ""){
		parent.classList.remove('focus');
	}
}

inputs.forEach(input => {
	input.addEventListener('focus', focusFunc);
	input.addEventListener('blur', blurFunc);
});

## style.css
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
	font-family: 'Lemonada', cursive;
}

.wave{
	position: fixed;
	height: 100%;
	left: 0;
	bottom: 0;
	z-index: -1;
}

.container{
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 7rem;
	padding: 0 2rem;
}

.img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.img img{
	width: 800px;
}

.login-container{
	display: flex;
	align-items: center;
	text-align: center;
}

.avatar{
	width: 100px;
}

form{
	width: 360px;
}

form h2{
	font-size: 2.9rem;
	text-transform: uppercase;
	margin: 15px 0;
	color: #333;
}

.input-div{
	position: relative;
	display: grid;
	grid-template-columns: 7% 93%;
	margin: 25px 0;
	padding: 5px 0;
	border-bottom: 2px solid #c5c4c4;
}

.input-div.focus .i i{
	color: #7AC943;
}

.input-div.focus div h5{
	top: -5px;
	font-size: 15px;
}

.input-div:after, .input-div:before{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0;
	height: 2px;
	/* background-color: #7AC943; */
	border-bottom: 2px solid #7AC943;
	transition: .3s;
}

.input-div:after{
	right: 50%;
}

.input-div:before{
	left: 50%;
}

.input-div.focus:after, .input-div.focus:before{
	width: 50%;
}

.input-div.one{
	margin-top: 0;
}

.input-div.two{
	margin-bottom: 4px;
}

.i{
	display: flex;
	justify-content: center;
	align-items: center;
}

.i i{
	color: #c5c4c4;
	transition: .3s;
}

.input-div > div{
	position: relative;
	height: 45px;
}

.input-div > div h5{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	transition: .3s;
}

.input{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: none;
	outline: none;
	background: none;
	padding: 0.5rem 0.7rem;
	font-family: 'Lemonada', cursive;
	font-size: 1.2rem;
	color: #555;
}

a{
	display: block;
	text-align: right;
	text-decoration: none;
	color: #999;
	font-size: 0.9rem;
	transition: .3s;
}

a:hover{
	color: #7AC943;
}

.btn{
	display: block;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	margin: 1rem 0;
	font-size: 1.2rem;
	outline: none;
	border: none;
	background-image: linear-gradient(to right, #026937, #7AC943, #026937);
	cursor: pointer;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Lemonada', cursive;
	background-size: 200%;
	transition: .5s;
}

.btn:hover{
	background-position: right;
}

@media screen and (max-width: 1050px){
	.container{
		grid-gap: 5rem;
	}
}

@media screen and (max-width: 1024px){
	.container{
		grid-template-columns: 1fr;
	}

	.wave{
		display: none;
	}

	.login-container{
		justify-content: center;
	}
}

@media screen and (max-width: 900px){
	.img{
		display: none;;
	}

	.container{
		grid-template-columns: 1fr;
	}

	.wave{
		display: none;
	}

	.login-container{
		justify-content: center;
	}
}

@media screen and (max-width: 700px){
	.img{
		display: none;;
	}

	.container{
		grid-template-columns: 1fr;
	}

	.wave{
		display: none;
	}

	.login-container{
		justify-content: center;
	}
}

@media screen and (max-width: 400px){
	.img{
		display: none;;
	}

	.container{
		grid-template-columns: 1fr;
	}

	.wave{
		display: none;
	}

	.login-container{
		justify-content: center;
	}
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Animated Login Page</title>
	<link href="https://fonts.googleapis.com/css?family=Lemonada&display=swap" rel="stylesheet">
	<script src="https://kit.fontawesome.com/a81368914c.js" ></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<img class="wave" src="http://camlent.com/login_page/img/wave.png">
	<div class="container">
	<div class="img">
	<img src="http://camlent.com/login_page/img/img.svg">
	</div>
	<div class="login-container">
	<form action="index.html">
	<img class="avatar" src="http://camlent.com/login_page/img/profile.svg">
	<h2>Welcome</h2>
	<div class="input-div one">
	<div class="i">
	<i class="fas fa-user"></i>
	</div>
	<div>
	<h5>Username</h5>
	<input class="input" type="text">
	</div>
	</div>
	<div class="input-div two">
	<div class="i">
	<i class="fas fa-lock"></i>
	</div>
	<div>
	<h5>Password</h5>
	<input class="input" type="password">
	</div>
	</div>
	<a href="forgot_password.html">Forgot Password?</a>
	<input type="submit" class="btn" value="Login">
	</form>
	</div>
	</div>
	<script text="text/javascript" src="main.js"></script>
	</body>
	</html>
	const inputs = document.querySelectorAll('.input');

	function focusFunc(){
	let parent = this.parentNode.parentNode;
	parent.classList.add('focus');
	}

	function blurFunc(){
	let parent = this.parentNode.parentNode;
	if(this.value == ""){
	parent.classList.remove('focus');
	}
	}

	inputs.forEach(input => {
	input.addEventListener('focus', focusFunc);
	input.addEventListener('blur', blurFunc);
	});
	*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	body{
	font-family: 'Lemonada', cursive;
	}

	.wave{
	position: fixed;
	height: 100%;
	left: 0;
	bottom: 0;
	z-index: -1;
	}

	.container{
	width: 100vw;
	height: 100vh;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 7rem;
	padding: 0 2rem;
	}

	.img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	}

	.img img{
	width: 800px;
	}

	.login-container{
	display: flex;
	align-items: center;
	text-align: center;
	}

	.avatar{
	width: 100px;
	}

	form{
	width: 360px;
	}

	form h2{
	font-size: 2.9rem;
	text-transform: uppercase;
	margin: 15px 0;
	color: #333;
	}

	.input-div{
	position: relative;
	display: grid;
	grid-template-columns: 7% 93%;
	margin: 25px 0;
	padding: 5px 0;
	border-bottom: 2px solid #c5c4c4;
	}

	.input-div.focus .i i{
	color: #7AC943;
	}

	.input-div.focus div h5{
	top: -5px;
	font-size: 15px;
	}

	.input-div:after, .input-div:before{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0;
	height: 2px;
	/* background-color: #7AC943; */
	border-bottom: 2px solid #7AC943;
	transition: .3s;
	}

	.input-div:after{
	right: 50%;
	}

	.input-div:before{
	left: 50%;
	}

	.input-div.focus:after, .input-div.focus:before{
	width: 50%;
	}

	.input-div.one{
	margin-top: 0;
	}

	.input-div.two{
	margin-bottom: 4px;
	}

	.i{
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.i i{
	color: #c5c4c4;
	transition: .3s;
	}

	.input-div > div{
	position: relative;
	height: 45px;
	}

	.input-div > div h5{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
	font-size: 18px;
	transition: .3s;
	}

	.input{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: none;
	outline: none;
	background: none;
	padding: 0.5rem 0.7rem;
	font-family: 'Lemonada', cursive;
	font-size: 1.2rem;
	color: #555;
	}

	a{
	display: block;
	text-align: right;
	text-decoration: none;
	color: #999;
	font-size: 0.9rem;
	transition: .3s;
	}

	a:hover{
	color: #7AC943;
	}

	.btn{
	display: block;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	margin: 1rem 0;
	font-size: 1.2rem;
	outline: none;
	border: none;
	background-image: linear-gradient(to right, #026937, #7AC943, #026937);
	cursor: pointer;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Lemonada', cursive;
	background-size: 200%;
	transition: .5s;
	}

	.btn:hover{
	background-position: right;
	}

	@media screen and (max-width: 1050px){
	.container{
	grid-gap: 5rem;
	}
	}

	@media screen and (max-width: 1024px){
	.container{
	grid-template-columns: 1fr;
	}

	.wave{
	display: none;
	}

	.login-container{
	justify-content: center;
	}
	}

	@media screen and (max-width: 900px){
	.img{
	display: none;;
	}

	.container{
	grid-template-columns: 1fr;
	}

	.wave{
	display: none;
	}

	.login-container{
	justify-content: center;
	}
	}

	@media screen and (max-width: 700px){
	.img{
	display: none;;
	}

	.container{
	grid-template-columns: 1fr;
	}

	.wave{
	display: none;
	}

	.login-container{
	justify-content: center;
	}
	}

	@media screen and (max-width: 400px){
	.img{
	display: none;;
	}

	.container{
	grid-template-columns: 1fr;
	}

	.wave{
	display: none;
	}

	.login-container{
	justify-content: center;
	}
	}