Neonix Login

<!DOCTYPE html>
<html>
<head>
    <title>Neonix - Login</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        a {text-decoration: none;color:red;}
        body {
            margin: 0;
            background: #f2f1ef;
        }
        @font-face {
            font-family: "Open Sans";
            font-style: normal;
            font-weight: 400;
            src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
        }
        .base {
            display: flex;
            justify-content: center;
        }
        .conteudo {
    background: white;
    width: 29%;
    height: 551px;
    margin-top: 6%;
}
        .box {
            width: 80%;
            margin: auto;
        }
        .logo {
            text-align: center;
            font-size: 63px;
            font-family: sans-serif;
            font-weight: bold;
            color: #3184da;
            margin: 81px auto auto auto;
        }
        .loginregistrese {
            height: 73px;
        }
.login {
    float: left;
    text-transform: uppercase;
    font-family: Open sans;
    color: #3184da;
    border-bottom: 1px solid #3184da;
    width: 50%;
    text-align: center;
    cursor: context-menu;
}
.registrese {
    float: left;
    text-transform: uppercase;
    font-family: Open sans;
    color: #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    width: 50%;
    text-align: center;
    cursor: pointer;
}
.alert {
    color: #ff3c3c;
    font-family: open sans;
    font-size: 14px;
    width: 50%;
    height: 25px;
    line-height: 2;
    text-indent: 8px;
    border: 1px solid #ff3c3c;
    border-radius: 5px;
}
.alert:before {
    content: '\f05c';
    font: normal normal normal 14px/1 FontAwesome;
    margin: 0 4px 0 0;
    line-height: 0;
}
.forms {
    width: 100%;
    height: 87px;
    margin: 20px auto auto auto;
}
input.loginput {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #e2e2e2;
    width: 70%;
    height: 22px;
    margin-bottom: 22px;
    font-size: 19px;
    font-family: Open Sans;
    padding: 4px 10px;
}
.loginput:focus {
    outline: none;
}
input.passput {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #e2e2e2;
    width: 70%;
    height: 22px;
    margin-bottom: 22px;
    font-size: 19px;
    font-family: Open Sans;
    padding: 4px 10px;
}
.passput:focus {
    outline: none;
}
i.fa.fa-user {
    width: 23px;
    height: 26px;
    border-bottom: 1px solid #e2e2e2;
    padding: 0 13px 0px 17px;
    font-size: 21px;
    color: #3184da;
}
i.fa.fa-lock {
    width: 23px;
    height: 26px;
    border-bottom: 1px solid #e2e2e2;
    padding: 0 13px 0px 17px;
    font-size: 21px;
    color: #3184da;
}
button.buttonput {
    background: #3184da;
    color: #fff;
    font-family: Open Sans;
    width: 67%;
    border: 0;
    height: 39px;
    margin: auto;
    display: flex;
    justify-content: center;
    border-radius: 33px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.51, 0.85);
}
button.buttonput:hover {
    background: #19497b;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.51, 0.85);
}
.conteudo {
    background: white;
    width: 29%;
    height: 551px;
}
span.forgpass {
    color: #e2e2e2;
    font-family: Open Sans;
    font-size: 12px;
    float: right;
    margin: 0 10px 25px 0;
}
</style>
</head>
<body>
<div class="base">
    <div class="conteudo">
        <div class="logo">NEONIX</div>

<div class="box">
        <div class="loginregistrese">
            <div class="login">Login</div>
            <div class="registrese">Registre-se</div>
        </div>
        <div class="alert">Senha Incorreta</div>

        <div class="forms">
            <span class="loginput1"><i class="fa fa-user" aria-hidden="true"></i><input type="text" name="login" placeholder="Usuário" class="loginput" tabindex="1"></span>
            <span class="passput1"><i class="fa fa-lock" aria-hidden="true"></i><input type="password" name="login" placeholder="Senha" class="passput" tabindex="1"></span>
            <a href="#"><span class="forgpass">Esqueceu sua senha?</span></a>
            <span class="buttonput1"><button type="submit" class="buttonput">Log In</button></span>

        </div>
</div>


    </div>

</div>
</body>
</html>