navigation.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-between hodor-nav" style="background-color:#101010;">
    <div class="container-fluid">
        <div class="row">
            <a class="navbar-brand nav-hodor float-sm-left" href="#">
                <img src="{{ url_for('static', filename='img/hodor.png') }}" width="25" class="d-inline-block align-top" alt="">
                Hodor Project
            </a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="nav navbar-nav mr-auto"></ul> <!-- Stupid Bootstrap -->
            <ul class="nav navbar-nav">
                <span class="navbar-text">
                    <!-- TO DO: Change Guest to a variable -->
                    Welcome, <span style="font-weight: bolder; color: white;"> Guest</span>
                </span>
                <ul class="nav-item">
                    <button class="btn btn-outline-success my-2 my-sm-0 mr-3 cd-signin" >Sign In</button>
                    <button class="btn btn-outline-info my-2 my-sm-0 mr-3 cd-signup" >Register</button>
                </ul>
            </ul>
    </div>
    </div>
</nav>
<!-- Navigation Ends here -->

<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
<div class="cd-user-modal-container"> <!-- this is the container wrapper -->
<ul class="cd-switcher">
<li><a href="#0">Sign in</a></li>
<li><a href="#0">New account</a></li>
</ul>

<div id="cd-login"> <!-- log in form -->
<form class="cd-form">
  <p class="fieldset">
    <label class="image-replace cd-email" for="signin-email">E-mail</label>
    <input class="full-width has-padding has-border" id="signin-email" required type="email" placeholder="E-mail">
    <span class="cd-error-message">Invalid E-mail</span>
  </p>

  <p class="fieldset">
    <label class="image-replace cd-password" for="signin-password">Password</label>
    <input class="full-width has-padding has-border" id="signin-password" required type="text"  placeholder="Password">
    <a href="#0" class="hide-password">Hide</a>
    <span class="cd-error-message">Hmm, that doesn't look right!</span>
  </p>

  <p class="fieldset">
    <input type="checkbox" id="remember-me" checked>
    <label for="remember-me">Remember me</label>
  </p>

  <p class="fieldset">
    <input class="full-width" type="submit" value="Login">
  </p>
</form>

<p class="cd-form-bottom-message"><a href="#0">Forgot your password?</a></p>
</div> <!-- cd-login -->
<div id="cd-signup"> <!-- sign up form -->
<form class="cd-form">
  <p class="fieldset">
    <label class="image-replace cd-username" for="signup-username">Username</label>
    <input class="full-width has-padding has-border" id="signup-username" required type="text" placeholder="Username">
    <span class="cd-error-message">Error message here!</span>
  </p>