login.tpl

{extends file="layouts/main.tpl"}
{block name="body"}
<div class="overlay"></div>

<main id="signin_signup_form">
  <div class="card w-25 mx-auto">
    <div class="card-body">
      <form action="#" class="form">
        <div class="form-group">
          <h5 class="text-center mb-4">Log In to Crate Diggers</h5>
          <label for="userNameInput">Username</label>
          <input  type="text" class="form-control form-control-sm mb-3 mt-2" id="userNameInput" aria-describedby="userName" placeholder="Username">
        </div>
        <div class="form-group">
          <label for="passwordInput">Password</label>
          <input  type="text" class="form-control form-control-sm mt-2" id="passwordInput" aria-describedby="password" placeholder="Password">
        </div>
        <button class="btn w-100 btn-sm">Submit</button>
      </form>

      <div id="sign_in_divider">
        <div id="divider_left" class="divider_line"></div>
        <p id="divider_or">OR</p>
        <div id="divider_right" class="divider_line"></div>
      </div>

      <p class="text-center text-white">Sign-in with</p>

      <div class="d-flex flex-row justify-content-center">
        <button class="btn btn-sm mr-1"><i class="fab fa-facebook-square"></i></button>
        <button class="btn btn-sm mr-1"><i class="fab fa-twitter"></i></button>
        <button class="btn btn-sm mr-1"><i class="fab fa-instagram"></i></button>
        <button class="btn btn-sm mr-1"><i class="fab fa-soundcloud"></i></button>
        <button class="btn btn-sm mr-1"><i class="fab fa-mixcloud"></i></button>
        <button class="btn btn-sm"><i class="fab fa-pinterest"></i></button>
      </div>

      <p class="text-center text-white mt-3 mb-2">Dont have an account? <a class="ml-1" href="-signup.html">Create an account now.</a></p>
      <p class="text-center"><a href="-forgot_password.html">Forgot your password?</a></p>
    </div>
  </div>
</main>
{/block}