html form

by Nabaraj Saha

HTML

<form class="container">
  <h2 class="centerAlign">Login</h2>
  <div class="formItems">
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" class="formControl" placeholder="email">
  </div>
  <div class="formItems">
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" class="formControl" placeholder="password">
  </div>
  <div class="formItems">
    <input type="checkBox" id="showPass">
    <label for="showPass">Show Password</label>
  </div>
  <div class="formItems"><button class="formControl submitButton">Submit</button></div>
  <div class="formItems">
    <h4 class="centerAlign grayText"> or Login with</h4>
  </div>
  <div class="formItems"><button class="formControl facebookButton">Facebook</button></div>
  <div class="formItems">
    <h4 class="centerAlign grayText">Not a new member? Signup now</h4>
  </div>
</form>

SCSS

@import url("https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap");
* {
  box-sizing: border-box;
}
body {
  font-family: "PT Sans Narrow", sans-serif;
  background-image: linear-gradient(blue, #ff0056);
  background-repeat: no-repeat;
  height: 100vh;
}
.centerAlign {
  text-align: center;
}
.grayText{
  color:#505050
}
form {
  width: 80%;
  background-color: #ffffff;
  padding: 10px 15px;
  margin: 0 auto;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 5px 1px #787878;
  box-shadow: 0 0 5px 1px #787878;
  h4{
    font-weight:normal;
  }
}
.formControl {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-family: inherit;
}
.formItems {
  margin-bottom: 1rem;
  label {
    display: inline-block;
    margin-bottom: 0.5rem;
  }
  input {
    &:focus {
      outline: none;
    }
  }
  .submitButton {
    background-color: #ff0056;
    color: white;
    font-weight: bold;
    border: 1px solid #ff0056;
    transition: all 0.2s linear;
    &:hover {
      background: white;
      color: #ff0056;
    }
  }
  .facebookButton {
    background-color: blue;
    color: white;
    font-weight: bold;
    border: 1px solid blue;
    transition: all 0.2s linear;
    &:hover {
      background: white;
      color: blue;
    }
  }
}