Cadastro e Login - #10 Design do Login

No vídeo de hoje vamos fazer o design da tela de login do nosso sistema. Para tanto, vamos criar a pasta css dentro de lib e criar o arquivo style.css.

Design da Tela de Login

Após criar o arquivo css, precisamos linká-lo no método setHead() da nossa ClassLayout criada na última aula:

$html.=" <link rel='stylesheet' href='".DIRPAGE."lib/css/style.min.css'>\n";

O nosso css ficará da seguinte forma:

/*Sistema*/
*{margin:0; padding: 0; box-sizing: border-box; font-family: Arial,sans-serif;}

a{text-decoration: none; color: #333;}


/*Classes auxiliares*/
.float{float:left;}

.w100{width: 100%;}

.h40{height: 40px;}

.center{text-align: center;}

/*Configurações Gerais*/
input[type='email'],input[type='password']{ margin: 15px 0; border: 1px solid #bbb; border-radius: 2px; font-size: 16px; padding: 0 10px; }
input[type='submit']{ width: 30%; background: #025158; font-weight: bold; color: #fff; border: none; border-radius: 2px; cursor:pointer; }
input[type='submit']:hover{ opacity: 0.8; }

.fundo{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/img/login-tecnologia-webdesign-em-foco-L.jpg') center center no-repeat; background-size: cover; }

.login{ position: absolute; width: 30%; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%,-50%); background: #fff; padding: 30px; }
    .loginTextos{ width: 70%; font-weight: bold; line-height:40px; }

/*Extra-small*/
@media screen and (max-width: 480px){
    input[type='submit']{ width: 70%;}

    .fundo{background: url('/img/login-tecnologia-webdesign-em-foco-XS.jpg') center center no-repeat; background-size: cover; }

    .login{ width: 90%;}
        .loginTextos{ width: 100%; margin-top: 10px; text-align: left; }
}

/*Small*/
@media screen and (min-width: 481px) and (max-width: 768px){
    input[type='submit']{ width: 40%;}

    .fundo{background: url('/img/login-tecnologia-webdesign-em-foco-S.jpg') center center no-repeat; background-size: cover; }

    .login{width: 60%;}
        .loginTextos{width: 60%;}
}

/*Medium*/
@media screen and (min-width: 769px) and (max-width: 1199px){
    input[type='submit']{ width: 40%; }

    .fundo{background: url('/img/login-tecnologia-webdesign-em-foco-M.jpg') center center no-repeat; background-size: cover; }

    .login{width: 40%;}
        .loginTextos{ width: 60%;}
}

/*Large*/
@media screen and (min-width: 1200px){

}

Repare que no código acima utilizamos 4 media-queries para trabalharmos com responsividade e trabalhamos com classes auxiliares pra evitar repetições tais como float, w100, h40... Lembre-se sempre de minificar seu CSS e Javascript para ganhar performance.

O nosso código html da página login.php ficará assim:

<?php \Classes\ClassLayout::setHead('Login','Entre com seu usuário e senha'); ?>

<div class="fundo"></div>

<form name="formLogin" id="formLogin" action="<?php echo DIRPAGE.'controllers/controllerLogin'; ?>" method="post">
    <div class="login">
        <div class="loginLogomarca float w100 center">
            <img src="<?php echo DIRPAGE.'img/logomarca-da-wef.png'; ?>" alt="Logomarca da WEF">
        </div>

        <div class="loginFormulario float w100">
            <input class="float w100 h40" type="email" name="email" id="email" placeholder="Email:" required>
            <input class="float w100 h40" type="password" name="password" id="password" placeholder="Senha:" required>
            <input class="float h40 center" type="submit" value="Entrar">
            <div class="loginTextos float center"><a href="<?php echo DIRPAGE.'esqueci-minha-senha'; ?>">Esqueci minha senha</a></div>
        </div>
    </div>
</form>

<?php \Classes\ClassLayout::setFooter(); ?>

Basicamente o html tem uma div fundo que armazenará a imagem de fundo e uma div login que terá o formulário e a logomarca.

Sucesso nos códigos e na vida!!