login.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 8 <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet"> 9 <style type="text/css"> 10 html { box-sizing: border-box; } 11 *, *:before, *:after { box-sizing: inherit; } 12 body { 13 position: relative; 14 background: #0b0b0b; 15 width: 100vw; 16 height: 100vh; 17 margin: 0; 18 padding: 0; 19 } 20 form { 21 position: absolute; 22 top: 50%; left: 50%; 23 transform: translate(-50%, -50%); 24 display: block; 25 width: 30vmax; 26 font-size: 1.5vmax; 27 border-radius: 0.5vmax; 28 overflow: hidden; 29 border: 0.25vmax solid #0b0b0b; 30 } 31 form input, 32 form button { 33 width: 100%; 34 height: 35 display: inline-block; 36 padding: 1vmax 0.75vmax; 37 font-size: 1.5vmax; 38 outline: 0; 39 border: 0; 40 border-bottom: 0.25vmax solid #0b0b0b; 41 font-family: "Inter Tight", sans-serif; 42 font-weight: 600; 43 color: #0b0b0b; 44 background-color: ghostwhite; 45 } 46 form button { 47 margin-bottom: 0; 48 border-bottom: 0; 49 background-color: linen; 50 cursor: pointer; 51 } 52 form button:hover, 53 form button:active { background-color: #FFCA65; } 54 55 </style> 56 </head> 57 <body> 58 <form method="post" action="/login" autocomplete="off"> 59 <input name="username" placeholder="username" type="text"> 60 <input name="password" placeholder="password" autocomplete="new-password" type="password"> 61 <button>Submit</button> 62 </form> 63 </body> 64 </html>