Orange form

by Олексій Рачок

HTML

<div class="signup_frame step_signup" id="signup_142356882254d9efb6dbc93">
    <div class="page">
        <div class="step1" style="">
            <form name="step_1_form" method="POST" action="https://www.encoding.com/signup/step_signup/">
                <input name="action" type="hidden" value="simple_form">
                <div class="header">Start your encoding
                    <br>project in the cloud today.</div>
                <div class="sub_header">Free 1GB Every Month, All Features, NO CC Required.</div>
                <div class="input_block">
                    <div class="input_line email">
                        <input class="input email" type="text" name="email" placeholder="email address" value="">
                        <div class="input_error email"></div>
                    </div>
                    <div class="input_line username">
                        <input class="input username" type="text" name="username" placeholder="username" value="">
                        <div class="input_tooltip username">no spaces please</div>
                        <div class="input_error username"></div>
                    </div>
                    <div class="input_line password">
                        <input class="input password" type="password" name="password" placeholder="password">
                        <div class="input_tooltip password">number or &amp;@!%
                            <br>required</div>
                        <div class="input_error password"></div>
                    </div>
                </div>
                <button class="submit" type="submit" value="Get a free GB monthly!">create my account!</button>
            </form>
        </div>
        <div class="step2" style="display: none;">
            <form name="step_2_form" action="https://www.encoding.com/signup/step_signup/name/" method="POST">
                <input name="action" type="hidden" value="name">
                <input name="user" type="hidden"...

CSS

.entry-content .addthis_toolbox {
    margin:10px 0 10px 0;
}
.addthis_button_tweet {
    min-width: 83px;
    float:left;
}
.login_header_form .login_form_header, .forgot_header_form .forgot_form_header, UNUSED.forgot_header_ok .forgot_ok_header {
    font-size: 16px !important;
    color: #FFFFFF;
    font-family:'Ubuntu';
    font-weight: 500;
    margin-top: 18px;
    margin-bottom: 18px;
}
.login_header_form .login_form_text, .forgot_header_form .forgot_form_text {
    font-size: 16px !important;
    color: #794514;
    font-family:'UbuntuLight';
    letter-spacing: -0.5px;
}
.login_header_form .login_form_text b {
    font-family:'UbuntuBold';
    color: #794514;
}
.login_header_form .login_form_text.collapse_btn, .forgot_header_form .forgot_form_text.collapse_btn {
    color: #6f4514;
    background: url(/images/login/stripe_mark.png) no-repeat;
    background-position: 0px 2px;
    padding-left: 24px;
    cursor: pointer;
    float: left;
    margin-left: 122px;
    margin-top: 8px;
}
.login_header_form .login_form_text.forgot_line, .forgot_header_form .forgot_form_text.forgot_line {
    color: #6f4514;
    background: url(/images/login/question_mark.png) no-repeat;
    background-position: 0px 2px;
    padding-left: 24px;
    cursor: pointer;
    margin-top: 8px;
    width: 211px;
}
.login_header_form .login_form_text.signup_line {
    margin-top: 10px;
    float: left;
}
.login_header_form .login_form_container, .forgot_header_form .forgot_form_container, .forgot_header_ok .forgot_ok_container {
    float: left;
    margin-left: 20px;
    position: relative;
}
.login_header_form .login_logo, .forgot_header_form .forgot_logo, .forgot_header_ok .forgot_logo {
    float: left;
}
.login_header_form input, .forgot_header_form input {
    line-height: 40px;
    height: 40px;
    border: 1px solid #c3b9ab;
    font-family:'Ubuntu';
    color: #c3b9ab;
    -webkit-box-shadow: inset 1px 2px 0px 1px #f0eef0;
    box-shadow: inset 1px 2px 0px 1px #f0eef0;
   ...