18-A Login Overlay

Login uses the plugin aau-login and can be opened anywhere in the site.

The Button

To include the login button add the data attribute data-aau="loginbtn"

<a data-aau="loginbtn" href="javascript:void(0);"><span class="icon-user"></span> Login</a>

Example:

Login

The Overlay

The overlay needs to be added outside of #page-wrapper so when the overlay opens the window scrollbar reflects the size of the overlay and not the underlying page. Refer to Overlay for more details.

Example

Sign In

Html Structure of the Overlay

<div data-aau="login" class="overlay-content">
  <div class="row content-wrapper">
    <a href="#" class="icon-close-large"></a>
    <div class="content">
      <div class="marged padded text-centered">
        <div class="logo">
          <span class="icon-logo"></span>
          <span class="icon-wordmark"></span>
        </div>
        <h2>Sign In</h2>
        <div class="columns tablet-4 tablet-centered">
          <div class="row form-elt">
            <input type="text" placeholder="Username"/>
            <input type="password" placeholder="Password"/>
          </div>
          <div class="row">
            <div class="chkbox float-left_small">
              <div class="bg">
                <input type="checkbox" value="None" id="chkbox1" name="check" />
                <div class="square"></div>
                <label class="cross"></label>
              </div>
              <label class="text" unselectable="on" for="chkbox1">Keep me signed in</label>
            </div>
            <input class="right" type="submit" value="Submit">
          </div>
          <div class="row text-left">
            <a href="#">Forgot?</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
18-A Create an Account

Admissions Application

Create an Account

Html Structure

<div class="row">
  <div class="marged padded text-centered">
    <h2>Admissions Application</h2>
    <h4>Create an Account</h4>
    <div class="columns tablet-4 tablet-centered">
      <div class="row form-elt">
        <input type="text" placeholder="Email"/>
        <input type="password" placeholder="Password"/>
        <input type="password" placeholder="Confirm Password"/>
      </div>
      <div class="row text-left">
        <div class="column tablet-7 small-6">
          <div class="row">
            <a class="link-btn" href="#">Already have an account?</a>
          </div>
        </div>
        <div class="column tablet-5 small-6">
          <div class="row">
            <input class="right" type="submit" value="Register">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="six_spacing"></div>
</div>

Sign In