HTML5 51
Login Form Guest on 12th July 2020 02:08:51 PM
  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1">
  3. body {
  4. background-color:black;
  5. color:white;
  6. font-family: Arial, Helvetica, sans-serif;
  7. font-size:18px;
  8. }
  9. form {
  10. border: 3px solid #f1f1f1;
  11. }
  12. h2
  13. {
  14. margin:4px px 4px 4px;
  15. pdding:2px 2px 2px 2px;
  16. font-size:20px;
  17. boder: 1px solid black;
  18.  
  19. }
  20. input[type=text], input[type=password] {
  21.   width: 100%;
  22.   padding: 12px 20px;
  23.   margin: 8px 0;
  24.   display: inline-block;
  25.   border: 1px solid #ccc;
  26.   box-sizing: border-box;
  27. }
  28.  
  29. button {
  30.   background-color:#08068a;
  31.   color: white;
  32.   padding: 14px 20px;
  33.   margin: 8px 0;
  34.   border: none;
  35.   cursor: pointer;
  36.   width: 100%;
  37. }
  38.  
  39. button:hover {
  40.   opacity: 0.8;
  41. }
  42.  
  43. .cancelbtn {
  44.   width: auto;
  45.   padding: 10px 18px;
  46.   background-color: #f44336;
  47. }
  48.  
  49. .imgcontainer {
  50.   text-align: center;
  51.   margin: 24px 0 12px 0;
  52. }
  53.  
  54. img.avatar {
  55.   max-width: 40%;
  56.   border-radius: 50%;
  57. }
  58.  
  59. .container {
  60.    background-color:white;
  61.    color:black;
  62.    margin:4px 4px 4px 4px;
  63.   padding: 16px  16px 16px 16px;
  64. }
  65.  
  66. span.psw {
  67.   float: right;
  68.   padding-top: 16px;
  69. }
  70.  
  71. /* Change styles for span and cancel button on extra small screens */
  72. @media screen and (max-width: 600px) {
  73.   span.psw {
  74.      display: block;
  75.      float: none;
  76.   }
  77.   .cancelbtn {
  78.      width: 100%;
  79.   }
  80. }
  81. </head>
  82.  
  83.  
  84. <form action="./" method="post">
  85.  
  86.   <div class="container">
  87.   <h2>Login Form</h2>
  88.  
  89.     <label for="uname"><b>Username</b></label>
  90.     <input type="text" placeholder="Enter Username" name="uname" required>
  91.  
  92.     <label for="psw"><b>Password</b></label>
  93.     <input type="password" placeholder="Enter Password" name="psw" required>
  94.        
  95.     <button type="submit">Login</button>
  96.     <label>
  97.       <input type="checkbox" checked="checked" name="remember"> Remember me
  98.     </label>
  99.   </div>
  100. </form>
  101.  
  102. </body>
  103. </html>

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.