API tools faq
paste
LucianoCharles2017

Login CSS3

LucianoCharles2017
Jan 3rd, 2018
472
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Área de Login</title>
  6. <style>
  7. /*
  8.     Created on : 03/01/2018, 19:47:11
  9.     Author     : Luciano Charles
  10. */
  11. *{
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. body{
  16.     background-image: url(aguas.jpg);
  17.     -webkit-background-size: cover;
  18.     background-size: cover;
  19.     font-family: Tahoma, sans-serif;
  20. }
  21. .form-area{
  22.     position: absolute;
  23.     top: 50%;
  24.     left: 50%;
  25.     transform: translate(-50%,-50%);
  26.     width: 400px;
  27.     height: 500px;
  28.     box-sizing: border-box;
  29.     background-color: rgba(0,0,0,0.5);
  30.     padding: 40px;
  31.     border-radius: 5px;
  32. }
  33. h3{
  34.     padding: 0 0 20px;
  35.     font-weight: bold;
  36.     color: #fff;
  37.     text-align: center;
  38. }
  39. .form-area p{
  40.     font-weight:  bold;
  41.     color: #fff;
  42. }
  43. .form-area input{
  44.     margin-bottom: 20px;
  45.     width: 100%;
  46. }
  47. .form-area input[type=email],
  48. .form-area input[type=password]{
  49.     border: none;
  50.     border-bottom: 1px solid #fff;
  51.     background-color: transparent;
  52.     outline: none;
  53.     height: 40px;
  54.     color: #fff;
  55.     display: 16px;
  56.     padding: 5px;
  57. }
  58. ::placeholder{
  59.     color: #fff;
  60. }
  61. .form-area input[type=submit]{
  62.     border: none;
  63.     height: 40px;
  64.     outline: none;
  65.     color: #fff;
  66.     font-size: 15px;
  67.     background-color: #0F272E;
  68.     cursor: pointer;
  69.     border-radius: 10px;
  70. }
  71. .form-area input[type=submit]:hover{
  72.     background-color: #40433E;
  73.     color: #fff;
  74. }
  75. .form-area a{
  76.     color: #fff;
  77.     text-decoration: none;
  78.     font-size: 14px;
  79.     font-weight: bold;
  80. }
  81.  
  82. </style>
  83.     </head>
  84.     <body>
  85.         <div class="form-area">
  86.             <h3>Área de Login</h3>
  87.             <form method="POST">
  88.                 <p>Email:</p>
  89.                 <input type="email" name="email" id="email" placeholder="Digite seu e-mail..." />
  90.                 <p>Senha:</p>
  91.                 <input type="password" name="senha" id="senha" placeholder="Digite sua senha..." />
  92.                 <p></p>
  93.                 <input type="submit" value="Logar" />
  94.                 <a href="#">Recuperar Senha?</a>
  95.             </form>
  96.         </div>
  97.     </body>
  98. </html>
Advertisement
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!