Scribd Logo
Upload

Welcome to Scribd!

  • Aula3Paglogin 03 05

    Uploaded by

    raissa2006.tecnicodeti2023
    0 views4 pages

    Original Title

    Aula3Paglogin.03.05

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    0 views4 pages

    Aula3Paglogin 03 05

    Uploaded by

    raissa2006.tecnicodeti2023

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    <!

    DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Tela de longin</title>
    <link rel="stylesheet" href="Aula3.css">
    </head>
    <body>
    <div class="main-login">
    <div class="left-login">
    <h1>Faça login <br> E entre para nosso time.</h1>
    <img src="PntAnimad.svg" alt="Tema login">
    </div>
    <div class="right-login"></div>
    <div class="card-login">
    <h1>Login</h1>
    <div class="textfield">
    <label for="usuário">Usuário</label>
    <input type="text" name="usuário"
    placeholder="Usuário">
    </div>
    <div class="textfield">
    <label for="senha">Senha</label>
    <input type="password" name="senha"
    placeholder="senha">
    </div>

    <button class="btn">Login</button>
    </div>
    </div>
    </body>
    </html>
    Css

    @import url('https://fonts.googleapis.com/css2?
    family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;
    0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'
    );

    /*Configuração geral da pagina*/


    *{
    margin: 0;
    font-family:"Poppins", "sans-serif";
    }
    .main-login {
    width: 100vw;
    height: 100vw;
    background: #b7f3e4;
    display: flex;
    justify-content: center; /*eixo horizontal/principal*/
    align-items: center;
    }

    /*Parte esquerda da pagina*/


    .left-login {
    width: 50vw;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column ; /*alinha em coluna*/
    margin-left: 50px;
    margin-right: -500px;
    }

    .left-login-image{
    width: 50vw;
    }

    .left-login>h1 {
    font-size: 2.2vw;
    color: rgb(0, 0, 0);
    }

    .right-login {
    width: 50vw;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .card-login {
    /* width: 100%;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px 35px;
    background: #1a9e7d;
    border-radius: 20px;
    box-shadow: 0px 10px 40px #00000056;
    }

    .card-login>h1 {
    color: rgb(0, 56, 40);
    font-weight: 800;
    margin: 0;
    }

    .textfield {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 10px 0px;
    }

    .textfield>input {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 15px;
    background: #d4fdef;
    color: #feffffde;
    font-size: 12pt;
    box-shadow: 0px 10px 40px #00000056; /*sombra*/
    }

    .textfield>label {
    color: rgb(0, 56, 40);
    margin-bottom: 10px;
    }

    .textfield > input::placeholder {


    color: rgb(100, 100, 100);
    }
    .btn {
    width: 100%;
    padding: 16px 0px;
    margin: 25px;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgb(0, 56, 40);
    background: #83f0cf;
    cursor: pointer;
    box-shadow: 0px 10px 40px -12px #00000052;
    }
    @media only screen and (max-width: 950px) {
    .card-login {
    width: 85%;

    }
    }
    midia only screen and (max-width: 600px) {
    .main-login{
    flex-direction: column;
    }
    .left-login>h1{
    display: none;
    }
    .left-login{
    width: 100%;
    height: auto;
    }
    .right-login{
    width: 100%;
    height: auto;
    }
    .left-login-image{
    width: 50vw;
    }
    }

    You might also like