KodeInfo | Learning resources for web and mobile development

Bootstrap Layered Login Form

November 2nd, 2014 07:30:35 by Irfan Iqbal Comments(0) - Views(8063)

In this section let us design a layered login form using bootstrap .At first you must know what is bootstrap and how to use bootstrap .

Click on the below link to know more about bootstrap.

http://www.kodeinfo.com/post/html-login-page-using-bootstrap#sthash.jBMKqDtC.dpuf

If you are already familiar with bootstrap let me show the design .

Design:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Layered login form</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script>
			$(function() {
				var textfield = $("input[name=user]");
				$('button[type="submit"]').click(function(e) {
					e.preventDefault();
					//little validation just to check username
					if (textfield.val() != "") {
						//$("body").scrollTo("#output");
						$("#output").addClass("alert alert-success animated fadeInUp").html("Welcome back " + "<span style='text-transform:uppercase'>" + textfield.val() + "</span>");
						$("#output").removeClass(' alert-danger');
						$("input").css({
							"height" : "0",
							"padding" : "0",
							"margin" : "0",
							"opacity" : "0"
						});
						//change button text
						$('button[type="submit"]').html("continue").removeClass("btn-info").addClass("btn-default").click(function() {
							$("input").css({
								"height" : "auto",
								"padding" : "10px",
								"opacity" : "1"
							}).val("");
						});

						//show avatar
						$(".avatar").css({
							"background-image" : "url('http://api.randomuser.me/0.3.2/portraits/women/35.jpg')"
						});
					} else {
						//remove success mesage replaced with error message
						$("#output").removeClass(' alert alert-success');
						$("#output").addClass("alert alert-danger animated fadeInUp").html("sorry enter a username ");
					}
					//console.log(textfield.val());

				});
			});

		</script>
		<style>
		body{background: #eee url(http://subtlepatterns.com/patterns/sativa.png);}
		html,body{
		position: relative;
		height: 100%;
		}

		.login-container{
		position: relative;
		width: 300px;
		margin: 80px auto;
		padding: 20px 40px 40px;
		text-align: center;
		background: #fff;
		border: 1px solid #ccc;
		}

		#output{
		position: absolute;
		width: 300px;
		top: -75px;
		left: 0;
		color: #fff;
		}

		#output.alert-success{
		background: rgb(25, 204, 25);
		}

		#output.alert-danger{
		background: rgb(228, 105, 105);
		}

		.login-container::before,.login-container::after{
		content: "";
		position: absolute;
		width: 100%;height: 100%;
		top: 3.5px;left: 0;
		background: #fff;
		z-index: -1;
		-webkit-transform: rotateZ(4deg);
		-moz-transform: rotateZ(4deg);
		-ms-transform: rotateZ(4deg);
		border: 1px solid #ccc;

		}

		.login-container::after{
		top: 5px;
		z-index: -2;
		-webkit-transform: rotateZ(-2deg);
		-moz-transform: rotateZ(-2deg);
		-ms-transform: rotateZ(-2deg);

		}

		.avatar{
		width: 100px;height: 100px;
		margin: 10px auto 30px;
		border-radius: 100%;
		border: 2px solid #aaa;
		background-size: cover;
		}

		.form-box input{
		width: 100%;
		padding: 10px;
		text-align: center;
		height:40px;
		border: 1px solid #ccc;;
		background: #fafafa;
		transition:0.2s ease-in-out;

		}

		.form-box input:focus{
		outline: 0;
		background: #eee;
		}

		.form-box input[type="text"]{
		border-radius: 5px 5px 0 0;
		text-transform: lowercase;
		}

		.form-box input[type="password"]{
		border-radius: 0 0 5px 5px;
		border-top: 0;
		}

		.form-box button.login{
		margin-top:15px;
		padding: 10px 20px;
		}

		.animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		}

		@-webkit-keyframes fadeInUp {
		0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
		}

		100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
		}
		}

		@keyframes fadeInUp {
		0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		-ms-transform: translateY(20px);
		transform: translateY(20px);
		}

		100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		}
		}

		.fadeInUp {
		-webkit-animation-name: fadeInUp;
		animation-name: fadeInUp;
		}
		</style>

	</head>
	<body>

		<div class="container">
			<div class="login-container">
				<div id="output"></div>
				<div class="avatar"></div>
				<div class="form-box">
					<form action="" method="">
						<input name="user" type="text" placeholder="username">
						<input type="password" placeholder="password">
						<button class="btn btn-info btn-block login" type="submit">
							Login
						</button>
					</form>
				</div>
			</div>

		</div>

	</body>
</html>

For more desings on bootstrap be connected with us thanks .

Kodeinfo .

Author

  • Irfan Iqbal
    Irfan Iqbal

    Irfan is a web developer and consultant from India. He is the co-founder of KodeInfo, the PHP and Laravel Community . In the meantime he follows other projects, manages everything related to marketing and seo for kodeinfo , works as a freelance backend consultant for PHP applications and studies IT Engineering . He loves to learn new things, not only about PHP or development but everything.

Related

WHY USE A FRAMEWORK OVER PLAIN PHP

WHY USE A FRAMEWORK OVER PLAIN PHP
read more

GETTING STARTED WITH LARAVEL

GETTING STARTED WITH LARAVEL
read more

UNDERSTANDING LARAVEL STRUCTURE

UNDERSTANDING LARAVEL STRUCTURE
read more

UNDERSTANDING LARAVEL ROUTES

UNDERSTANDING LARAVEL ROUTES
read more

comments powered by Disqus