Guest User

MTA Login Form

a guest
Dec 16th, 2016
173
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  5.  
  6.     <meta charset="utf-8">
  7.     <title>Login</title>
  8.     <style media="screen">
  9.       .clearfix:after {
  10.         visibility: hidden;
  11.         display: block;
  12.         font-size: 0;
  13.         content: " ";
  14.         clear: both;
  15.         height: 0;
  16.       }
  17.       .clearfix { display: inline-block; }
  18.       /* start commented backslash hack \*/
  19.       * html .clearfix { height: 1%; }
  20.       .clearfix { display: block; }
  21.       /* close commented backslash hack */
  22.  
  23.       .login {
  24.         font-family: 'Raleway', sans-serif;
  25.         width: 400px;
  26.         height: 200px;
  27.         background-color: rgb(52, 52, 52);
  28.         border-radius: 20px;
  29.         position: relative;
  30.       }
  31.  
  32.       .buttonBox-abs {
  33.         background-color: rgb(52, 176, 210);
  34.         border-top-right-radius: 20px;
  35.         border-bottom-right-radius: 20px;
  36.         position: absolute;
  37.         right: 0;
  38.         top: 0;
  39.         width: 20%;
  40.         height: 100%;
  41.       }
  42.  
  43.       .buttonBox-rel {
  44.         position: relative;
  45.         height: 100%;
  46.         width: 100%;
  47.       }
  48.  
  49.       .loginButton {
  50.         border: inherit;
  51.         background-color: inherit;
  52.         width: inherit;
  53.         height: inherit;
  54.         border: none;
  55.       }
  56.  
  57.       .buttonBox-abs:hover {
  58.         background-color: rgb(72, 195, 228);
  59.       }
  60.  
  61.       .buttonBox-abs, .buttonBox-abs * {
  62.         cursor: pointer;
  63.       }
  64.  
  65.       .login > h1 {
  66.         padding: 15px;
  67.         margin: 0;
  68.         color: #FFF;
  69.         font-size: 1.5em;
  70.         width: 80%;
  71.         box-sizing: border-box;
  72.       }
  73.  
  74.       .buttonBox-rel > p {
  75.         font-size: 1.5em;
  76.         position: absolute;
  77.         color: #FFF;
  78.         width: 100%;
  79.         text-align: center;
  80.       }
  81.  
  82.       .login label{
  83.         color: white;
  84.       }
  85.  
  86.       #usernamePassword {
  87.         padding-top: 7%;
  88.         width: 80%;
  89.       }
  90.  
  91.       .labelBox {
  92.         box-sizing: border-box;
  93.         padding: 0 5%;
  94.         width: 50%;
  95.         float: left;
  96.       }
  97.  
  98.       .labelBox label {
  99.         font-size: .8em;
  100.       }
  101.  
  102.       .labelBox input {
  103.         border-radius: 5px;
  104.         padding: 5px 25px 5px 10px;
  105.         box-sizing: border-box;
  106.         width: 100%;
  107.         margin-top: 5%;
  108.       }
  109.  
  110.       .labelImg {
  111.         position: relative;
  112.       }
  113.  
  114.       .labelImg img {
  115.         position: absolute;
  116.         right: 5px;
  117.         top: 10px;
  118.         height: 60%;
  119.       }
  120.     </style>
  121.   </head>
  122.   <body>
  123.       <form class="login">
  124.         <h1>LOGIN</h1>
  125.         <div class="clearfix" id="usernamePassword">
  126.           <div class="labelBox">
  127.             <label for="username">Username:</label>
  128.             <div class="labelImg">
  129.               <input type="text" name="username">
  130.               <img src="user.png" alt="username">
  131.             </div>
  132.           </div>
  133.           <div class="labelBox">
  134.             <label for="password">Password:</label>
  135.             <div class="labelImg">
  136.               <input type="text" name="password">
  137.               <img src="lock.png" alt="password">
  138.             </div>
  139.           </div>
  140.         </div>
  141.  
  142.         <div class="buttonBox-abs">
  143.           <div class="buttonBox-rel">
  144.             <input type="button" name="login" class="loginButton">
  145.             <p style="top: 0; font-size: 3.5em; font-weight: bold; line-height: 0.5em;">&gt;</p>
  146.             <p style="bottom: 0;">GO</p>
  147.           </div>
  148.         </div>
  149.       </form>
  150.   </body>
  151. </html>
RAW Paste Data