Шаблон страницы входа на сайт

by Andrey Dobrovoi

HTML

<div class="login">
        <div class="create">
            <span>У вас ещё нет учетной записи на Dbmast.ru?</span> <a href=
            "/join">Создать аккаунт</a>
        </div>

        <div class="login-form no-touchify">
            <div class="image">
                <div>
                    <a class="logo" href="/"></a>

                    <div class="avatar"></div>
                </div>
            </div>

            <form action="" id="login" method="post" name="login">
                <div class="err" style="display: none;"></div><label class=
                ""><span>Email адрес</span> <input autofocus="" id="u"
                spellcheck="false" type="email"></label> <label class=
                ""><span>Пароль</span> <input id="p" type="password"></label>
                <button class="btn btn-primary disabled" formnovalidate=""
                type="submit"><span>Войти</span>

                <div class="spinny"></div></button>

                <div class="">
                    <p class="forgot" tabindex="0">Вы забыли пароль?</p>
                </div>
            </form>

            <form action="" id="reset_change" method="post" name="reset_change"
            style="display: none;">
                <div class="err preroll" style="display: none;">
                </div><label class="preroll"><span>New password</span>
                <input id="np" type="password"></label> <label class=
                "preroll"><span>Confirm password</span> <input id="np2" type=
                "password"></label> <button class=
                "btn btn-primary preroll disabled" formnovalidate="" type=
                "submit"><span>Change password and sign in</span>

                <div class="spinny"></div></button>
            </form>

            <form action="" id="mfa" method="post" name="mfa" style=
            "display: none;">
                <div class="preroll">
                    <h2>Enter your authentication code</h2>

                    <p...

CSS

a,label {
    color:inherit
}

h1,h2,h3,h4,h5,h6,input {
    width:auto
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin:0;
    padding:0;
    border:0;
    font:inherit;
    vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block
}

body {
    line-height:1;
    margin:0;
    font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif!important;
    font-size:13px;
    font-weight:400;
    color:#404040;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased
}

body.retina.dpr-2 {
    zoom:2
}

body.retina.dpr-3 {
    zoom:3
}

ol,ul {
    list-style:none
}

blockquote,q {
    quotes:none
}

blockquote:after,blockquote:before,q:after,q:before {
    content:"";
    content:none
}

table {
    border-collapse:collapse;
    border-spacing:0
}

body,html {
    background-color:#fff;
    width:100%;
    height:100%;
    overflow:hidden
}

a {
    text-decoration:none
}

input {
    height:auto;
    line-height:normal;
    padding:1px 0;
    box-shadow:none
}

button,input,select,textarea {
    font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif
}

code,pre {
    font-family:'Source Code Pro',monospace
}

pre {
    line-height:1.3em
}

label {
    display:inline
}

strong {
    font-weight:700
}
/* Стили лого-формы */
.btn-plain,.btn-primary,.btn-success {
    text-shadow:0 1px 1px rgba(0,0,0,.15)
}

.btn,.create a {
    cursor:pointer
}

.btn,.create a,h2 {
    font-weight:500
}

.error-message,button,form>.err .msg,input {
    box-sizing:border-box
}

button,input {
    appearance:none;
   ...