Advertisement
estevaorada

Untitled

Mar 28th, 2023
632
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.08 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="pt-br">
  3. <head>
  4.     <title>Login</title>
  5.     <!-- Required meta tags -->
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.     <!-- Bootstrap CSS v5.2.1 -->
  10.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  11.     <style>
  12.         body {
  13.             background-image: url('https://i.imgur.com/zQjbzzF.jpg');
  14.             background-attachment: fixed;
  15.             background-size: cover;
  16.         }
  17.  
  18.         .conteudo {
  19.             background-color: #fff;
  20.             padding: 30px;
  21.             border-radius: 10px;
  22.         }
  23.         #formCadastro{
  24.             display: none;
  25.         }
  26.     </style>
  27. </head>
  28.  
  29. <body>
  30.  
  31.     <div class="container-fluid">
  32.         <div class="row justify-content-center mt-5">
  33.             <div class="col-4">
  34.                 <h1 class="display-4 text-white" id="titulo">Login</h1>
  35.             </div>
  36.         </div>
  37.         <div class="row justify-content-center mt-3">
  38.             <div class="col-4 conteudo">
  39.                 <form id="formLogin">
  40.                     <div class="mb-3">
  41.                         <label for="email" class="form-label">Email</label>
  42.                         <input type="email" class="form-control" id="email" aria-describedby="emailHelp" name="email">
  43.                         <div id="emailHelp" class="form-text">Seu e-mail cadastrado no sistema.</div>
  44.                     </div>
  45.                     <div class="mb-3">
  46.                         <label for="senha" class="form-label">Senha</label>
  47.                         <input type="password" class="form-control" id="senha" name="senha">
  48.                     </div>
  49.                     <div class="form-group">
  50.                         <button type="button" id="btnEntrar" class="form-control btn btn-primary rounded submit px-3">Entrar</button>
  51.                     </div>
  52.                     <div class="mb-3 mt-3">
  53.                         <p class="text-center">Não possui conta no sistema? <a href="#" id="btnCadastroToggle">Cadastre-se</a></p>
  54.                     </div>
  55.                 </form>
  56.                 <!-- Formulário de cadastro -->
  57.                 <form id="formCadastro">
  58.                     <div class="mb-3">
  59.                         <label for="nomeCad" class="form-label">Nome Completo:</label>
  60.                         <input type="text" class="form-control" id="nomeCad" aria-describedby="nomeCadHelp" name="nome">
  61.                         <div id="nomeCadHelp" class="form-text">Como você deseja ser chamado(a).</div>
  62.                     </div>
  63.                     <div class="mb-3">
  64.                         <label for="emailCad" class="form-label">Email</label>
  65.                         <input type="text" class="form-control" id="emailCad" aria-describedby="emailCadHelp" name="email">
  66.                         <div id="emailCadHelp" class="form-text">E-mail que será utilizado para acessar o sistema.</div>
  67.                     </div>
  68.                     <div class="mb-3">
  69.                         <label for="senhaCad" class="form-label">Senha</label>
  70.                         <input type="password" class="form-control" id="senhaCad" name="senha">
  71.                     </div>
  72.                     <div class="form-group">
  73.                         <button type="button" class="form-control btn btn-primary rounded submit px-3" id="btnCadastrar">Cadastrar</button>
  74.                     </div>
  75.                     <div class="mb-3 mt-3">
  76.                         <p class="text-center">Já possui conta? <a href="#" id="btnLoginToggle">Entrar</a></p>
  77.                     </div>
  78.                 </form>
  79.             </div>
  80.         </div>
  81.     </div>
  82.  
  83.  
  84.     <!-- Bootstrap JavaScript Libraries -->
  85.     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
  86.     </script>
  87.  
  88.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
  89.     </script>
  90.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  91.     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  92.     <script>
  93.         // Alternar entre formulários login x cadastro:
  94.         $("#btnCadastroToggle").click(function(){
  95.             $("#formLogin").hide();
  96.             $("#formCadastro").fadeIn();
  97.             $("#titulo").text('Cadastro');
  98.         });
  99.         $("#btnLoginToggle").click(function(){
  100.             $("#formCadastro").hide();
  101.             $("#formLogin").fadeIn();
  102.             $("#titulo").text('Login');
  103.         });
  104.  
  105.     </script>
  106. </body>
  107.  
  108. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement