Animated Login Form with Avatar Picture in HTML5 CSS3 & JS – Harshad Chopra

Animated Login Form with Avatar Picture in HTML5 CSS3 & JS – Harshad Chopra

Source Code

index.html

<html>
	<head>
		<title>Cool Loader</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	</head>
	<body>
		<div class="main-container">
			<div class="container">
				<h2>Login</h2>
				<div class="wraper">
					<label for="Name">Username</label>
					<input type="text" placeholder="Username" name="name" id="name"/>
				</div>
				<div class="wraper">
					<label for="password">Password</label>
					<input type="password" name="password" id="password" placeholder="Password"/>
				</div>
				<div class="wraper">
					<button id="btn">Login</button>
				</div>
			</div>
			<div class="welcome">
				<div class="image"></div>
				<h3></h3>
				<a href="">Reset</a>
			</div>
		</div>
	</body>
</html>

style.css

body{
	margin:0;
	padding:0;
	background-color:#FFEFC5;
	font-family:"Roboto", sans-serif;
}
label{
	display:block;
	text-align:left;
	padding:5px 0;
	font-weight:bold;
	letter-spacing:.5px;
}
input[type="text"], input[type="password"]{
	width:100%;
	height:35px;
	border-radius:5px;
	border:transparent;
	padding:5px;
	margin-bottom:15px;
	outline:none;
	font-family:"Roboto", sans-serif;
	font-size:.95em;
}
.main-container{
	margin:40px auto;
	width:400px;
	height:320px;
	border-radius:5px;
	text-align:center;
	background-color:#f8f8f8;
	padding:40px;
	box-shadow: 5px 5px 128px -18px rgba(0,0,0,0.75);
	overflow:hidden;
}
.container{
	padding:0px 20px;
	transition:all .5s;
}
button{
	padding:10px 50px;
	border-radius:5px;
	border:2px solid #27ae60;
	background:transparent;
	font-size:1.25em;
	transition:all 0.4s;
	cursor:pointer;
	margin-bottom:60px;
}
button:hover{
	color:white;
	background-color:#27ae60;
	
}
h2{
	font-size:2.25em;
}
.image{
	width:220px;
	height:220px;
	border-radius:50%;
	margin-top:40px;
	margin:0 auto;
	background:url(https://s-media-cache-ak0.pinimg.com/736x/d0/b4/d8/d0b4d8535a71e97f5836b429f164398a.jpg) center no-repeat;
	background-size:100% 100%;
}
h3{
	padding:30px 0;
}
a{
	font-size:14px;
	padding:20px;
}

script.js

$(function(){
	$('#btn').click(function(){
		$('.container').css({
			'margin-top' : '-400px'
		});
		var name = $('#name').val();
		$('h3').html("Welcome!"+" "+name);
	});
	$('a').click(function(){
		$('.container').css({
			'margin-top' : '0px'
	
		});
		name = " ";
	});
});

Leave a Reply

Close Menu