<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{margin: 0; padding: 0; font-family: sans-serif; background: url(3.jpg); background-size: cover; } .box{position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); width: 400px; padding: 40px; background: rgba(0,0,0,.8); box-sizing: border-box; box-shadow: 0 15px 15px rgba(0,0,0,.5); border-radius: 10px; } .box h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .box .inputbox { position: relative; } .box .inputbox input{ width:100%; padding: 10px 0; font-size: 16px; color: red; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .box .inputbox label{ position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .box .inputbox input:focus ~ label, .box .inputbox input:valid ~ label { top: -18px; left: 0; color: #00f; font-size: 12px; } .box input[type="submit"] { background: transparent; border: none; outline: none; color: #fff; background:red; padding: 10px 20px; cursor: pointer; border-radius: 10px; } </style> </head> <body> <div class="box"> <h2>login</h2> <farm> <div class="inputbox"> <input type="text" name="" required=""> <label>username</label> </div> <div class="inputbox"> <input type="passwrod" name="" required=""> <label>password</label> </div> <input type="submit" name=""> </farm> </div> </body> </html>
