<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css'>
    <link href='https://fonts.googleapis.com/css?family=Anton' rel='stylesheet'>
    <link rel="stylesheet" href="/styles/login-page.css">
</head>
<body>
    <main id="main-holder">
        <h2 id="login-logo">Welcome to CourseInsider</h2>
        <span class="title" id="navbar-brand">
        <img class="circular--square" src="/images/course_insider_logo_white.png" alt="CourseInsider" style="width: 200px;">
      </span>
        <h3 id="login-header">Please Login</h3>
        
        <!-- <div id="login-error-msg-holder">
          <p id="login-error-msg">Invalid username <span id="error-msg-second-line">and/or password</span></p>
        </div> -->
        
        <form method="get" action="/index" id="login-form">
          <input type="text" name="username" id="username-field" class="login-form-field" placeholder="Username">
          <input type="password" name="password" id="password-field" class="login-form-field" placeholder="Password">
          <input type="submit" value="Login" id="login-form-submit">
          <a href="#" target="_blank" id="forgot"><u>Forgot Password?</u></a>
        </form>
      
      </main>

       <script defer src="scripts/login-page.js"></script>
</body>
</html>