segunda-feira, 23 de dezembro de 2019

Tela de Login - Exemplo de tela de login padrão com Bootstrap 4



<?php
session_start();
include('conexao.php');
require 'conexao.php';
//conecta();
 ?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>PHP Login</title>
   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<script src="https://kit.fontawesome.com/2def53e3c7.js"></script>
      <style type="text/css"></style>
  <style type="text/css">
  #botao{
  background-color: #0059d6;
  }

    #botao2{
  background-color: #f6f77d;
  }
        * { margin: 0; padding: 0; font-family:Tahoma; font-size:12pt;}
        #divCenter {
                background-color: transparent;
               
                width: 500px;
                height: 350px;
                left: 50%;
                margin: -130px 0 0 -240px;
                padding:30px;
                position: absolute;
                top: 40%; 
                border-radius: 10px 10px 10px 10px;
            }

                .box{
         
                background-image: url('img/camada2.jpg');
                }
                html{
background: url(img/camada2.jpg) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}
body{
color: #FFFFFF;
}
    </style>
</head>
<body>
<div class="container" id="divCenter" id="box">
<div class="login">
        <center>
<?php
                    if(isset($_SESSION['nao_autenticado'])):
                    ?>
                    <div class="btn btn btn-block" id="botao2">
                      <p>ERRO: Usuário ou senha inválidos.</p>
                    </div>
                    <?php
                    endif;
                    unset($_SESSION['nao_autenticado']);
                    ?>
                    </center>
<h2>AREA RESTRITA</h2>
<form action="login.php" class="form" method="post" name="form_login">
<div class="form-group">
<label for="login">Login</label>
<input type="text" name="usuario" class="form-control input-lg" placeholder="login"autofocus="">
</div>
<div class="form-group">
<label for="exampleImputPassword1">Senha</label>
<input type="password" name="senha" class="form-control input-lg" placeholder="Senha">
</div>
<center>
<div class="field">
<a href="cadastro_usuario.php">Cadastro de Usuario</a>
</div>
</center><br>
<button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fas fa-sign-in-alt"></i>&nbsp;Entrar</button>

</form>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

Nenhum comentário:

Postar um comentário