05 | Tutorial: Conexión pt2.

/*CSS EDITADO 2*/
.titulo-login {
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 600;
    outline: 1px solid #e1c556;
    background: #ecdb97;
    color: #ffffff;
    padding: 4px;
    text-shadow: 1px 1px 0 #e1c556, -1px 1px 0 #e1c556, 1px -1px 0 #e1c556, -1px -1px 0 #e1c556;
}
.etiquetas label {
    cursor: pointer;
}
.etiquetas input {
    display: none;
}
.titulo-foro {
    background: #f0f0f0;
    border: 1px solid #eaeaea;
    text-transform: lowercase;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    padding: 20px;
    margin: -1px;
    margin-top: 1px;
    font-size: 19px;
    color: #e1c556;
    text-shadow: 1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
}
.imagen-login {
    height: 150px;
    background: url(https://via.placeholder.com/307x150);
    border: 10px solid #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.frase-capciosa {
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 600;
    outline: 1px solid #e1c556;
    background: #ecdb97;
    color: #ffffff;
    padding: 4px;
    text-shadow: 1px 1px 0 #e1c556, -1px 1px 0 #e1c556, 1px -1px 0 #e1c556, -1px -1px 0 #e1c556;
}

.conexion form {
    background: #e9e9e999;
    border-top: 1px solid #eaeaea;
    height: 146px;
    position: relative;
}
.formulario {
    position: absolute;
    top: 20px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.formulario input {
    background: #fefefe;
    border: 1px solid #eaeaea;
    width: 270px!important;
    font-size: 12px;
    color: #676767;
}
.formulario .nombreusuario, .formulario .clave {
    display: flex;
    flex-direction: column;
}
.formulario label {
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 600;
    border: 1px solid #e1c556;
    background: #ecdb97;
    color: #ffffff;
    padding: 4px;
    text-shadow: 1px 1px 0 #e1c556, -1px 1px 0 #e1c556, 1px -1px 0 #e1c556, -1px -1px 0 #e1c556;
}
.formulario {
    position: absolute;
    top: 20px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 85px;
}
.etiquetas a, .etiquetas label {
    background: #ecdb97;
    outline: 1px solid #e1c556;
    color: #fff;
    font-size: 9px;
    width: 10px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 0 #e1c556, -1px 1px 0 #e1c556, 1px -1px 0 #e1c556, -1px -1px 0 #e1c556;
    margin: 5px;
}
.etiquetas {
    position: absolute;
    bottom: 6px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/**HTML**/

<!-- BEGIN switch_login_small -->

<div class="contenedor-login">
<div class="titulo-login"> Te damos la bienvenida a </div>
<div class="titulo-foro">Nombre Chulito de Foro</div>
<div class="imagen-login"> <div class="frase-capciosa">¿Quieres entrar?</div>  </div>

<form action="{S_LOGIN_ACTION}" method="post">

<div class="formulario">
<div class="nombreusuario"><label for="username">Nombre de Usuario</label>
<input type="text" name="username" id="username" size="15" maxlength="40" value="{USERNAME}" class="inputbox autowidth" />
</div>

<div class="clave"><label for="password">Contraseña</label>
<input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" />
</div>
</div>

<div class="etiquetas"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} />
<label for="autologin" title="recordar ingresar"><i class="fas fa-key"></i></label>
<a href="{U_SEND_PASSWORD}" rel="nofollow" title="recuperar contraseña"><i class="fas fa-question"></i></a>
<input type="submit" name="login" tabindex="6" id="login"/>
<label for="login" title="Ingresar"><i class="fas fa-sign-in-alt"></i></label>
</div>
</form>
</div>
<!-- END switch_login_small -->