
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Login Form</title> <!-- using google font --> <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet"> <!-- using font awesome for icons --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> <!-- reset and custom css --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <!-- form holder --> <div class="formholder"> <!-- title holder --> <div class="titleHolder"> <i class="far fa-user-circle"></i> <h1>Sign in</h1> <p>Login using your username and password.</p> </div> <!-- login form --> <form action="#" class="loginForm"> <div class="row"> <input type="text" placeholder="Username" required /> <i class="fas fa-user"></i> </div> <div class="row"> <input type="password" placeholder="Password" required> <i class="fas fa-key"></i> </div> <div class="row"> <input type="checkbox" id="rememberMe"> <label for="rememberMe">Remember me</label> </div> <div class="row"> <button type="submit" class="btn">Login</button> </div> <div class="row"> <a href="forgot-password.html">Forgot Password?</a> <br> <a href="register.html">Not registered? Click to register</a> </div> </form> </div> </div> </body> </html>
HTML (forgot-password.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Forgot Password Form</title> <!-- using google font --> <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet"> <!-- using font awesome for icons --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> <!-- reset and custom css --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <!-- form holder --> <div class="formholder"> <!-- title holder --> <div class="titleHolder"> <i class="far fa-user-circle"></i> <h1>Forgot Password?</h1> <p>Don't worry! Just fill in your email and we'll help you reset your password.</p> </div> <!-- forgot password form --> <form action="#" class="forgotPwdForm"> <div class="row"> <input type="email" placeholder="Enter your email address" required> <i class="fas fa-envelope"></i> </div> <div class="row"> <button type="submit" class="btn">Send Email</button> </div> <div class="row"> <a href="index.html">Back to Login</a> </div> </form> </div> </div> </body> </html>
HTML Code (register.html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Register Form</title> <!-- using google font --> <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet"> <!-- using font awesome for icons --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> <!-- reset and custom css --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <!-- form holder --> <div class="formholder"> <!-- title holder --> <div class="titleHolder"> <i class="far fa-user-circle"></i> <h1>Sign up</h1> <p>It's free and only takes a minute.</p> </div> <!-- register form --> <form action="#" class="registerForm"> <div class="row"> <input type="text" placeholder="Name" required> <i class="fas fa-user"></i> </div> <div class="row"> <input type="email" placeholder="Email" required> <i class="fas fa-envelope"></i> </div> <div class="row"> <input type="text" placeholder="Username" required> <i class="fas fa-user"></i> </div> <div class="row"> <input type="password" placeholder="Password" required> <i class="fas fa-key"></i> </div> <div class="row"> <input type="checkbox" id="signedIn"> <label for="signedIn">Keep me signed in</label> </div> <div class="row"> <button type="submit" class="btn">Register</button> </div> <div class="row"> <a href="index.html">Already have an account? Sign in</a> </div> </form> </div> </div> </body> </html>
CSS (css/reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } * { max-height: 1000000px; margin: 0; padding: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
CSS(css/main.css)
/* GENERAL ------------------------------------------------ */ body { background: url('../images/bg.jpg') no-repeat; background-size: cover; font: 400 18px/1.5 'Quicksand', sans-serif; color: #333; } .container { margin: 60px auto; max-width: 640px; padding: 0 15px; } /* INPUT BOX ------------------------------------------------ */ input[type="text"], input[type="password"], input[type="email"] { background: none; border: none; border-bottom: 1px solid #666; padding: 15px 15px 15px 35px; width: 100%; height: 50px; color: #333; transition: border 0.3s linear, color 0.3s linear; font: 400 18px/1.5 'Quicksand', sans-serif; } input[type="text"] + .fas, input[type="password"] + .fas, input[type="email"] + .fas { position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: color 0.3s linear; color: #333; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { outline: none; border-color: #1E8BC3; color: #1E8BC3; } input[type="text"]:focus + .fas, input[type="password"]:focus + .fas, input[type="email"]:focus + .fas { color: #1E8BC3; } /* BUTTON ------------------------------------------------ */ .btn { background: #1E8BC3; border: none; color: #fff; padding: 20px; letter-spacing: 1px; text-transform: uppercase; width: 100%; cursor: pointer; font: 400 18px/1.5 'Quicksand', sans-serif; transition: background 0.3s linear; } .btn:hover { background: #2574A9; } .btn:focus, .forgotPwd:focus { outline: 1px dotted #333; } /* INPUT BOX PLACEHOLDER COLORS ------------------------------------------------ */ ::placeholder { color: #333; opacity: 1; } :-ms-input-placeholder { color: #333; } ::-ms-input-placeholder { color: #333; } /* CUSTOM CHECKBOX ------------------------------------------------ */ input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked) { position: absolute; left: -9999px; } input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label { position: relative; cursor: pointer; padding: 0 0 0 30px; } input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before { content: ''; background: #ddd; width: 20px; height: 20px; position: absolute; top: 0; left: 0; } input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #1E8BC3; position: absolute; top: -4px; left: 2px; opacity: 0; transition: opacity 0.3s linear, transform 0.3s linear; transform: scale(1.5); } input[type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } input[type="checkbox"]:checked:focus + label:before, input[type="checkbox"]:not(:checked):focus + label:before { border: 1px dotted #333; } /* LOGIN FORM ------------------------------------------------ */ .formholder { background: rgba(255,255,255,0.6); padding: 80px 40px; text-align: center; } .formholder .titleHolder { margin: 0 0 50px; } .formholder .titleHolder .far { font-size: 70px; margin: 0 0 20px; } .formholder h1 { font-size: 40px; margin: 0 0 10px; } .formholder a { color: #333; transition: color 0.3s linear; } .formholder a:hover { color: #2574A9; } .formholder .row { position: relative; margin: 0 0 20px; } .formholder form { max-width: 360px; margin: 0 auto; } .formholder form a { font-size: 14px; }
Background Image (images/bg.jpg)
