API tools faq
paste
estevaorada

Form Login

estevaorada
Oct 9th, 2020 (edited)
252
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 4.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Login</title>
  6.     <style>
  7.         @import url(https://fonts.googleapis.com/css?family=Roboto:300);
  8.  
  9.         .login-page {
  10.             width: 360px;
  11.             padding: 8% 0 0;
  12.             margin: auto;
  13.         }
  14.  
  15.         .form {
  16.             position: relative;
  17.             z-index: 1;
  18.             background: #FFFFFF;
  19.            max-width: 360px;
  20.             margin: 0 auto 100px;
  21.             padding: 45px;
  22.             text-align: center;
  23.             box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  24.         }
  25.  
  26.         .form input {
  27.             font-family: "Roboto", sans-serif;
  28.             outline: 0;
  29.             background: #f2f2f2;
  30.            width: 100%;
  31.             border: 0;
  32.             margin: 0 0 15px;
  33.             padding: 15px;
  34.             box-sizing: border-box;
  35.             font-size: 14px;
  36.         }
  37.  
  38.         .form button {
  39.             font-family: "Roboto", sans-serif;
  40.             text-transform: uppercase;
  41.             outline: 0;
  42.             background: #4CAF50;
  43.            width: 100%;
  44.             border: 0;
  45.             padding: 15px;
  46.             color: #FFFFFF;
  47.            font-size: 14px;
  48.             -webkit-transition: all 0.3 ease;
  49.             transition: all 0.3 ease;
  50.             cursor: pointer;
  51.         }
  52.  
  53.         .form button:hover,
  54.         .form button:active,
  55.         .form button:focus {
  56.             background: #43A047;
  57.        }
  58.  
  59.         .form .message {
  60.             margin: 15px 0 0;
  61.             color: #b3b3b3;
  62.            font-size: 12px;
  63.         }
  64.  
  65.         .form .message a {
  66.             color: #4CAF50;
  67.            text-decoration: none;
  68.         }
  69.  
  70.         .form .register-form {
  71.             display: none;
  72.         }
  73.  
  74.         .container {
  75.             position: relative;
  76.             z-index: 1;
  77.             max-width: 300px;
  78.             margin: 0 auto;
  79.         }
  80.  
  81.         .container:before,
  82.         .container:after {
  83.             content: "";
  84.             display: block;
  85.             clear: both;
  86.         }
  87.  
  88.         .container .info {
  89.             margin: 50px auto;
  90.             text-align: center;
  91.         }
  92.  
  93.         .container .info h1 {
  94.             margin: 0 0 15px;
  95.             padding: 0;
  96.             font-size: 36px;
  97.             font-weight: 300;
  98.             color: #1a1a1a;
  99.        }
  100.  
  101.         .container .info span {
  102.             color: #4d4d4d;
  103.            font-size: 12px;
  104.         }
  105.  
  106.         .container .info span a {
  107.             color: #000000;
  108.            text-decoration: none;
  109.         }
  110.  
  111.         .container .info span .fa {
  112.             color: #EF3B3A;
  113.        }
  114.  
  115.         body {
  116.             background: #76b852;
  117.            /* fallback for old browsers */
  118.             background: -webkit-linear-gradient(right, #76b852, #8DC26F);
  119.            background: -moz-linear-gradient(right, #76b852, #8DC26F);
  120.            background: -o-linear-gradient(right, #76b852, #8DC26F);
  121.            background: linear-gradient(to left, #76b852, #8DC26F);
  122.            font-family: "Roboto", sans-serif;
  123.             -webkit-font-smoothing: antialiased;
  124.             -moz-osx-font-smoothing: grayscale;
  125.         }
  126.     </style>
  127. </head>
  128.  
  129. <body>
  130.     <div class="login-page">
  131.         <div class="form">
  132.             <form class="register-form">
  133.                 <input type="text" name="cadNome" placeholder="Nome Completo" />
  134.                 <input type="text" name="cadEmail" placeholder="E-mail" />
  135.                 <input type="password" name="cadSenha1" placeholder="Senha" />
  136.                 <input type="password" name="cadSenha2" placeholder="Confirmar Senha" />
  137.                 <button>Cadastrar</button>
  138.                 <p class="message">Já possui conta? <a href="#">Entrar</a></p>
  139.             </form>
  140.             <form class="login-form">
  141.                 <input type="text" placeholder="E-mail" />
  142.                 <input type="password" placeholder="Senha" />
  143.                 <button>entrar</button>
  144.                 <p class="message">Ainda não tem conta? <a href="#">Efetuar cadastro.</a></p>
  145.             </form>
  146.         </div>
  147.     </div>
  148. </body>
  149. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  150. <script>
  151.     $('.message a').click(function() {
  152.         $('form').animate({
  153.             height: "toggle",
  154.             opacity: "toggle"
  155.         }, "slow");
  156.     });
  157. </script>
  158.  
  159. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!