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;
}
