Embed

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0, user-scalable=yes">
    <title>MICROPRO LOGIN</title>
	<style type="text/css">
	.top{
    min-width:1280px;
    margin:0 auto;
    overflow:hidden;
	}
	.login_box{
		width:100%;
		height:650px;
		background:url("Contents/images/login_bg.jpg") no-repeat center;
		overflow:hidden;
	}
	.login_nav{
		position:relative;
		width:1280px;
		height:650px;
		margin:0 auto;
		overflow:hidden;
	}
	.layui-same{
		position:absolute;
		right:0;
		width:375px;
		min-height:400px;
		padding:30px;
		background:#fff;
		border-radius:8px;
		overflow:hidden;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#login{
		top:50%;
		margin-top:-200px;
	}
	.layui-same h2{
		width:100%;
		height:50px;
		line-height:50px;
		font-size:20px;
		font-weight:300;
		text-align:center;
		margin-bottom:20px;
		overflow:hidden;
	}
	.layui-same .layui-input{
		height:50px;
	}
	.layui-same .layui-input:focus{
		border-color:#3b64ea!important;
	}
	.layui-same .layui-form-item{
		margin-bottom:20px;
	}
	.re_pwd{
		width:100%;
		margin-bottom:20px;
		overflow:hidden;
	}
	.re_pwd input{
		float:left;
		color:#6b6d72;
	}
	.re_pwd a{
		float:right;
		color:#6b6d72;
	}
	.layui-same .layui-form-item .layui-form-checkbox[lay-skin=primary]{
		margin-top:0;
	}
	.layui-same .layui-form-checkbox[lay-skin=primary]:hover i{
		border-color:#d2d2d2;
	}
	.layui-same .layui-form-checked[lay-skin=primary] i {
		border-color:#d2d2d2!important;
		background-color:#fff;
		color:#3b64ea;
		font-weight:bold;
	}
	#login_btn{
		width:100%;
		height:50px;
		line-height:50px;
		font-size:16px;
		background:#3b64ea;
	}
	.layui-container{ 
		width: 1280px!important;;
		padding:0;
	}
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0);}
	.layui-form-item{margin-bottom: 15px; clear: both; *zoom: 1;}
	.layui-input, .layui-textarea{display: block; width: 100%; padding-left: 10px;}
	.layui-btn{display: inline-block; vertical-align: middle; height: 38px; line-height: 38px; border: 1px solid transparent; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border-radius: 2px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
	</style>
</head>
<body>

<div class="layui-container-fiuld login_box">
    <div class="login_nav">
        <form id="login" class="layui-form layui-same" action="" method="post">
            <h2>Sign in to MICROPRO</h2>
            <div class="layui-form-item">
                <input type="text" name="username" id="username" lay-verify="required|username" autocomplete="off" placeholder="Username" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="password" id="password" lay-verify="required|pass" placeholder="Password" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button   id="login_btn">Sign in </button>
            </div>
        </form>
    </div>
</div>

 <script>
    		window.onload=function(){
    			var o_btn=document.getElementById("login_btn");
    			o_btn.addEventListener("click",function(){
    			alert("The account or password is incorrect!")
    			},true)
    		}  
    </script>
</body>