Articles
Snippets
Categories
Quiz
Encryption
Base64 Encode
Base64 Decode
MD5 Hash
SHA1 Hash
SHA256 Hash
SHA512 Hash
URL Encode
URL Decode
Tools
Password generator
IP Locator
Website Down Detector
Character count
Json Formatter
JavaScript Formatter
HTML Formatter
CSS Formatter
Convert
XML to Json
Json to XML
Works with Us
Simple responsive Login form in light mode
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Simple Login form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="container"> <div class="container-login100"> <h1 class="form-title">Login</h1> <form action="#"> <div class="text-center" id="form-avatar"> <i class="fa fa-user-circle fa-5x" aria-hidden="true"></i> </div> <div class="text-center" id="center"> <div class="wrap-input" data-validate="Enter username"> <input class="input100" type="text" name="username" placeholder="Username"> <span class="focus-input100" data-placeholder="Username"></span> </div> <div class="wrap-input" data-validate="Enter password"> <input class="input100" type="password" name="pass" placeholder="Password"> <span class="focus-input100" data-placeholder="Password"></span> </div> </div> <div class="container-login100-form-btn"> <button class="login100-form-btn"> Login </button> </div> <div class="login-more"> <li class="m-b-8"> <span class="txt1">Forgot</span> <a href="#" class="txt2"> Username / Password? </a> </li> <li> <span class="txt1">Don’t have an account?</span> <a href="#" class="txt2"> Sign up </a> </li> </div> </form> </div> </div> </div> </div> </div> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; font-family: 'Raleway', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; } .container-login100 { text-align: center; } .form-title { display: block; font-family: inherit; font-size: 42px; color: #333333; text-align: center; padding-top: 40px; } #form-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: auto; margin-top: 30px; text-align: center; } #center { margin-top: 40px; } .wrap-input { position: relative; margin-bottom: 35px; position: relative; } .input100 { font-family: 'Raleway', sans-serif; font-size: 1.5vw; color: #555; line-height: 1.2; width: 35%; padding: 5px; outline: none; border: none; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #D9D9D9; } .login100-form-btn{ width: 35%; height: 40px; border-radius: 30px; font-size: 25px; background-color: #999999; border: none; margin-top: 18px; color: white; } .login-more { margin-top: 35px; margin-right: 19px; } .login-more > li { list-style-type: none; } .login100-form-btn:hover { background-color: #555555; }
Javascript
Run Code
Copyright 2022 HackTheStuff