---
title: Login
slug: guest-login
prefix: student-
---
{% extends "layouts/guest/login.html" %}

{% block page %}
<div class="d-flex align-items-center" style="min-height: 100vh">
  <div class="col-sm-8 col-md-6 col-lg-4 mx-auto" style="min-width: 300px;">
    <div class="text-center mt-5 mb-1">
      <div class="avatar avatar-lg">
        <img src="assets/images/logo/primary.svg" class="avatar-img rounded-circle" alt="LearnPlus" />
      </div>
    </div>
    <div class="d-flex justify-content-center mb-5 navbar-light">
      <a href="{{ prefix }}dashboard.html" class="navbar-brand m-0">LearnPlus</a>
    </div>
    <div class="card navbar-shadow">
      <div class="card-header text-center">
        <h4 class="card-title">Login</h4>
        <p class="card-subtitle">Access your account</p>
      </div>
      <div class="card-body">

        <a href="{{ prefix }}dashboard.html" class="btn btn-light btn-block">
          <span class="fab fa-google mr-2"></span>
          Continue with Google
        </a>

        <div class="page-separator">
          <div class="page-separator__text">or</div>
        </div>

        <form action="student-dashboard.html" novalidate method="get">
          <div class="form-group">
            <label class="form-label" for="email">Your email address:</label>
            <div class="input-group input-group-merge">
              <input id="email" type="email" required="" class="form-control form-control-prepended" placeholder="Your email address">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span class="far fa-envelope"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label" for="password">Your password:</label>
            <div class="input-group input-group-merge">
              <input id="password" type="password" required="" class="form-control form-control-prepended" placeholder="Your password">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <span class="far fa-key"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group ">
            <button type="submit" class="btn btn-primary btn-block">Login</button>
          </div>
          <div class="text-center">
            <a href="guest-forgot-password.html" class="text-black-70" style="text-decoration: underline;">Forgot Password?</a> 
          </div>
        </form>
      </div>
      <div class="card-footer text-center text-black-50">
        Not yet a student? <a href="guest-signup.html">Sign Up</a> 
      </div>
    </div>
  </div>
</div>
{% endblock %}