Login Form Click Here to Sign In code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Form Click Here to Sign In</title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.signIn').click(function(){ $('.fold').toggleClass('active') }) }) </script> </head> <body> <div class="container"> <div class="signIn">Click Here to Sign In</div> <div class="fold"> <form> <input type="text" name="" placeholder="Username"> <input type="password" name="" placeholder="Password"> <input type="submit" name="" name="Login"> <a href="#">Forget Password</a> </form> </div> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: url(1.png); background-size: cover; font-family: Verdana, Geneva, Tahoma, sans-serif; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; border-radius: 5px; box-sizing: border-box; overflow: hidden; } .signIn { position: relative; width: 100%; height: 50px; background: blue; color: white; text-align: center; line-height: 50px; font-size: 20px; cursor: pointer; box-shadow: 0 5px 10px rgba(0,0,0,0.5); } .fold { position: relative; width: 100%; background: rgba(17,24,340,0.8); transform-origin: top; padding: 30px 20px; box-sizing: border-box; transition: 0.5s; transform: perspective(2000px) rotateX(90deg); } .fold.active { transform: perspective(2000px) rotateX(0deg); } .fold form input[type="text"], .fold form input[type="password"] { width: 100%; margin-bottom: 20px; height: 40px; padding: 10px 20px; box-sizing: border-box; border-radius: 40px; box-shadow: none; outline: none; color: white; background: transparent; border: 1px solid white; } ::placeholder { color: white; } .fold form input[type="submit"] { display: block; padding: 12px 40px; border-radius: 40px; box-shadow: none; outline: none; cursor: pointer; background: blue; color: white; box-shadow: 0 5px 10px rgba(0,0,0,0.5); } .fold form input[type="submit"]:hover { background: black; } .fold form a { color: white; margin-top: 20px; display: block; font-size: 14px; text-align: right; text-decoration: none; font-weight: bold; }
