daily pastebin goal
92%
SHARE
TWEET

Untitled

a guest Mar 13th, 2018 47 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <title>TruckIt</title>
  4.  
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
  8. <meta name="author" content="Ashton Fedler">
  9. <meta name="application-name" content="TruckIt">
  10. <meta name="keywords" content="">
  11. <meta name="description" content="">
  12.  
  13. <style>
  14.     body {
  15.         display: flex;
  16.         margin: 0;
  17.         padding: 2rem 0 0 0;
  18.         border: 1px solid transparent;
  19.         min-height: 100vh;
  20.         min-width: 100vw;
  21.         justify-content: center;
  22.         align-items: flex-start;
  23.         box-sizing: border-box;
  24.         font: 16px Arial;
  25.         color: #333;
  26.     }
  27.     #loginForm {
  28.         width: 20rem;
  29.         padding: 2rem;
  30.         font-size: 0;
  31.     }
  32.     #loginHeader {
  33.         font-size: 0;
  34.         padding: 0.5rem;
  35.         text-align: center;
  36.     }
  37.     #loginContent {
  38.         display: flex;
  39.         flex-direction: column;
  40.         font-size: 0;
  41.         border-radius: 5px;
  42.         margin: 1rem 0;
  43.         overflow: hidden;
  44.         box-shadow:
  45.                 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  46.                 0 1px 5px 0 rgba(0, 0, 0, 0.12),
  47.                 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  48.     }
  49.     #loginFooter {
  50.         font-size: 0;
  51.         padding: 0.5rem;
  52.         text-align: center;
  53.     }
  54.     #loginTitle {
  55.         font-size: 1.1rem;
  56.         font-weight: bold;
  57.         margin: 0;
  58.     }
  59.     #loginForgotCredentials {
  60.         font-size: 0.9rem;
  61.         font-weight: lighter;
  62.         text-decoration: none;
  63.     }
  64.     #loginForgotCredentials:hover {
  65.         text-decoration: underline;
  66.     }
  67.     #loginSubmit {
  68.         display: none;
  69.     }
  70.     .login-field {
  71.         font-size: 0;
  72.     }
  73.     .login-field:first-child {
  74.         border-bottom: 1px solid #f3f3f3;
  75.     }
  76.     .login-field:nth-child(2) {
  77.         border-top: 1px solid #f3f3f3;
  78.     }
  79.     .login-label { display: none; }
  80.     .login-tooltip { display: none; }
  81.     .login-input {
  82.         display: block;
  83.         box-sizing: border-box;
  84.         width: 100%;
  85.         font-size: 1rem;
  86.         border: 0;
  87.         padding: 1rem 0.5rem;
  88.         background-color: #fff;
  89.     }
  90.     .login-input:focus {
  91.         outline: 3px ridge rgba(0,151,240,.7);
  92.     }
  93. </style>
  94.  
  95. <form id="loginForm">
  96.     <header id="loginHeader">
  97.         <h2 id="loginTitle">Sign in</h2>
  98.     </header>
  99.     <section id="loginContent">
  100.         <div class="login-field">
  101.             <label id="loginIdLabel" class="login-label" for="loginIdInput">Id</label>
  102.             <input id="loginIdInput" class="login-input" name="id" type="text" placeholder="TruckIt ID" aria-describedby="loginIdTooltip" required autofocus>
  103.             <div id="loginIdTooltip" class="login-tooltip" role="tooltip">Id tooltip</div>
  104.         </div>
  105.         <div class="login-field">
  106.             <label id="loginPasswordLabel" class="login-label" for="loginPasswordInput">Password</label>
  107.             <input id="loginPasswordInput" class="login-input" name="password" type="password" placeholder="Password" aria-describedby="loginPasswordTooltip" required>
  108.             <div id="loginPasswordTooltip" class="login-tooltip" role="tooltip">Password tooltip</div>
  109.         </div>
  110.         <input id="loginSubmit" type="submit" value="Login">
  111.     </section>
  112.     <footer id="loginFooter">
  113.         <a id="loginForgotCredentials" href="javascript: void 0">Forgot TruckIt ID or password?</a>
  114.     </footer>
  115. </form>
RAW Paste Data
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
 
Top