Cotonti sign-in page

Sample design for Cotonti CMF login page (http://www.cotonti.com)

by Andrew Matsovkin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<div class="full-bgr parent">
    <div class="login-panel child ontop">
        <div class="row header-block">
            <div class="container">
                <div class="col-sm-4 col-sm-offset-4">
                    <div class="header">
                        	<h1 class="logo-header">Cotonti</h1>

                    </div>
                </div>
            </div>
        </div>
        <div class="row wide-bgr">
            <div class="container">
                <div class="col-sm-4 col-sm-offset-4">
                    	<h3 class="subtitle">Вход в систему <i class="fa fa-sign-in"> </i></h3>

                    <form name="login" method="post" role="form">
                        <div style="display:inline;margin:0;padding:0">
                            <input type="hidden" name="x" value="272661EA" />
                        </div>
                        <div class="form-group">
                            <label class="sr-only">Имя или email:</label>
                            <input class="form-control" name="rusername" type="text" value="" size="12" maxlength="100" placeholder="Имя или email" />
                        </div>
                        <div class="form-group">
                            <label class="sr-only">Пароль:</label>
                            <input class="form-control" name="rpassword" type="password" value="" size="12" maxlength="32" placeholder="Пароль" />
                        </div>
                        <div class="form-group remember-check">
                            <div class="checkbox ">
                                <label>
                                    <input type="checkbox" name="rremember" />Запомнить меня</label>
 ...

CSS

@CHARSET"UTF-8";

/* macik for Cotonti login page */
 html, body, .parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.child {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    zoom:1;
    width: 100%;
    /* margin-left: -10px; */
}
.helper {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    height:100%;
    width:0px;
    zoom:1;
}
div.header-block .logo-header {
    padding-left: 45px;
    background:transparent...

JavaScript

$(document).ready(function () {
    setTimeout(function () {
        $('.login-panel').removeClass('ontop');
    }, 500)
});