Bootstrap snippet and html example. timekeeper login

<div id="page">
    <div class="account-pages"></div>
    <div class="clearfix"></div>
    <div class="wrapper-page">
        <div class="panel-heading">
            <h3 class="text-center">
                <a href="#"><strong>Timekeeper</strong></a>
            </h3>
        </div>
        <div class="card-box">
            <div class="panel-body">
                <form class="form-horizontal m-t-20" action="#" method="post" role="form">
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <label for="login" class="control-label">Your Email *</label>
                            <input class="form-control" type="text" id="id_login" name="login" placeholder="Enter your email" autofocus="autofocus">
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="col-xs-12">
                            <label for="password" class="control-label">Your Password *</label>
                            <input class="form-control" type="password" id="id_password" name="password" placeholder="Enter your password">
                        </div>
                    </div>
                    <div class="form-group text-center m-t-40">
                        <div class="col-xs-12">
                            <button class="btn btn-custom btn-bordered btn-block waves-effect waves-light" type="submit">
                                Sign In
                            </button>
                        </div>
                    </div>
                    <div class="form-group m-t-20 m-b-0">
                        <div class="col-sm-12">
                            <p class="text-muted">Forget your password?
                                <a href="#">
                                    Reset Now
                                </a>
                            </p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 text-center">
                Don't have an account? <a href="#" class="text-primary m-l-5"><b>Sign Up</b></a>
                <p></p>
            </div>
        </div>
    </div>
</div>

body {
    background: #ebeff2;
    font-family: 'WeblySleek UI','Segoe UI','Helvetica Neue',Arial,sans-serif;
    margin: 0;
    padding-bottom: 60px;
    overflow-x: hidden;
    color: #797979;
}
.account-pages {
    background: url(https://timekeeper.io/static/app/images/big/bg1.jpg?2d017e8580cb) center;
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
}
.wrapper-page {
    margin: 5% auto;
    position: relative;
    width: 420px;
}
.wrapper-page .card-box {
    box-shadow: 0 0 24px 0 rgba(0,0,0,0.06), 0 1px 0 0 rgba(0,0,0,0.02);
}

.card-box {
    padding: 20px;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.06), 0 1px 0 0 rgba(0,0,0,0.02);
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin-bottom: 20px;
    background-color: #ffffff;
}
.form-control {
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    color: #565656;
    padding: 7px 12px;
    height: 38px;
    max-width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}