Login template using Material Design Lite (MDL)

Recently I created Login template using Material Design Lite, Am going to share that template with you guys in this article.Material Design Lite lets you add a Material Design look and feel to your websites. Material Design Lite (MDL) is CSS framework and very easy to integrate into your HTML.

Also, Download List of all Material Design Lite (MDL) classes with the explanation.

Login template using Material Design Lite (MDL)

NOTE:

The below code is for Login Page, Feel free to use this template in both personal and commercial projects.

Find out more Material Design Lite (MDL) example here.

Login.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Design Lite Login From</title>
    <!-- Adding CSS for Alignment -->
    <link rel="stylesheet" href="css/login-form.css">
    <!-- Adding Material Desgin CSS file -->
    <link rel="stylesheet" href="css/material.min.css">
    <link rel="stylesheet" href="css/materialdesignicons.css" media="all" rel="stylesheet" type="text/css">
    <!-- Adding Material Desgin JS file -->
    <script src="js/material.min.js"></script>
    <!-- Adding Material Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
	<div class="mdl-layout mdl-layout--fixed-header mdl-js-layout  mdl-color--white-100">
		<main class="mdl-layout__content main_content">
		    <h3><strong>Material Design Lite Login Template</strong></h3>
			<div class="login-form-div mdl-grid mdl-shadow--2dp">
				<div class="mdl-cell mdl-cell--12-col cell_con">
					<i class="material-icons">person</i>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
						<input class="mdl-textfield__input" type="text" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="sample2">
						<label class="mdl-textfield__label" for="sample2">Enter valid Email</label>
						<span class="mdl-textfield__error">Invalid Email...!</span>
			        </div>
				</div>				
				<div class="mdl-cell mdl-cell--12-col cell_con">
					<i class="material-icons">lock</i>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
						<input class="mdl-textfield__input" type="text" id="sample2">
						<label class="mdl-textfield__label" for="sample2">Enter Password</label>
			        </div>
				</div>				
				<div class="mdl-cell cell_con">
					<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
						<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
						<span class="mdl-checkbox__label">Remember Me</span>
				    </label>
				</div>
				<div class="mdl-cell mdl-cell--12-col  login-btn-con">
					<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary btn">Login</button>
				</div>
				<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet links">
					<a class="mdl-button--primary">Register now !</a>
				</div>
				<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet links">
					<a class="mdl-button--primary">Forgot password ?</a>
				</div>		
			</div>
	    </main>
    </div>	
</body>
</html>

Now adding some alignment using style.css.

Style.css

* div,h5,h3,button{
  font-family: cursive !important;
}
body{
    background: #fff;
}
.main_content h3{
	text-align: center;
}
.login-form-div{
	width: 500px;
	background: #fff;
}
.form-column{
  padding: 20px 35px !important;  
}
.cell_con{
	background: #fff;
	padding-left: 20px;
}
.cell_con div{
	width: 87%;
}
.links{
	margin: auto;
	text-align: center;
}
.btn{
  margin:auto; 
  width:100%;
}

If  you like this template consider sharing with other hoodies.