Login, Register and Forgot Password Form using HTML and CSS

HTML (index.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>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)

Share this

Related Posts