Responsive Super Simple Login Window Using Material

HTML
<link href="//cdn.muicss.com/mui-0.9.12/css/mui.min.css" rel="stylesheet" type="text/css" /> <script src="//cdn.muicss.com/mui-0.9.12/js/mui.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700|Oswald:400,500,600,700" rel="stylesheet"> <div class="main-content"> <div class="login-box"> <div class="login-window"> <form class="mui-form"> <div class="login-title">Login</div> <div class="mui-textfield mui-textfield--float-label"> <input type="text"> <label>Username</label> </div> <div class="mui-textfield mui-textfield--float-label"> <input type="text"> <label>Password</label> </div> <button type="submit" class="mui-btn">Submit</button> </div> </div> </div>
CSS
body{ background-color: #333 !important; margin:0; padding:0; } .main-content{ display:table; height:100vh; width:100%; text-align: center; background-color: transparent; } .login-box{ display:table-cell; vertical-align: middle; max-width: 400px; } .login-window{ font-family:'Lato', sans-serif; display:block; position:relative; margin: 0 auto; background-color:#efefef; max-width:400px; width:calc(90vw - 60px); text-align:left; padding:20px; border-radius:12px; -webkit-border-radius:12px; -webkit-box-shadow: 0 20px 40px 0 #000000; box-shadow: 0 20px 40px 0 #000000; } form label{ font-family:'Oswald', sans-serif; } .login-title{ text-transform: uppercase; text-align:center; font-weight:700; font-size:24px; letter-spacing:0.5em; font-family:'Lato', sans-serif; } .mui-btn{ color:#fff !important; background-color:#336699 !important; border-radius:6px !important; -webkit-border-radius:6px !important; -webkit-box-shadow: 0 0 10px 0 #000000; box-shadow: 0 0 10px 0 #000000; }
JAVASCRIPT
Expand for more options Login