Aeon Dual Auth Page

by iamtimmo

HTML

<html>

  <head>
    <title>Registration and Request System</title>
    <link rel="stylesheet" type="text/css" href="https://request-special.library.jhu.edu/aeonauth/css/main.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="https://request-special.library.jhu.edu/aeonauth/css/custom.css" media="screen" />
  </head>

  <body>

    <script type="text/javascript">
      <!--
      showheader("find")
      //-->

    </script>

    <div id="locationbar">
      <script type="text/javascript">
        <!--
        showtree("find", "requests")
        //-->

      </script>
    </div>

    <!--<img id="logo" src="https://request-special.library.jhu.edu/aeonauth/css/images/sheridan-libraries.logo.small.horizontal.blue.png">
<h1 id="logo-caption">Special Collections Request</h1>-->

    <!-- JHU branding HTML -->
    <div class="branding-container container">
      <div class="row-fluid">
        <div class="container">
          <div class="jhu-branding-org">
            <a href="https://www.library.jhu.edu/library-departments/special-collections/" target="_blank"><img alt="Johns Hopkins University logo" src="https://request-special.library.jhu.edu/aeonauth/css/images/sheridan-libraries.logo.small.horizontal.blue.png"></a>
          </div>
          <div class="jhu-branding-app">
            <span class="jhu-branding-app-text">Special Collections Requests</span>
          </div>
        </div>
      </div>
    </div>

    <div id="header" role="heading" aria-label="Search">
      <div id="title-name">Aeon</div>
    </div>


    <div class="jhu-wrapper ">
      <div class="content">
        <h1>
          <div class="heading-block">
            <div class="heading-chunk">Johns Hopkins University</div>
            <div class="heading-chunk">Special Collections Request System</div>
          </div>
        </h1>

        <p>For more information about Johns Hopkins Special Collections, visit <a...

SCSS

.jhu-wrapper { 
  display: table;
  position: relative;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  
  h1 {
    border-bottom: 0;
    margin-top: 0;
  }
  .heading-block {
    display: inline-block;
    border-bottom: 1px solid #eee;
    position: relative;
  }
  .heading-chunk {
    display: inline-block;
  }
  a:link, a:visited, a:hover {
  color: blue;
  }
}

.jhu-wrapper > .content {
    margin: auto;
    display: inline-block;
    width: 100%;
    max-width: 800px;
}

.dualAuth {
  width: 100%;
}

.buttonBox {
  text-align: center;
  float: left;
  position: relative;
  width: 365px;
  height: 180px;
  border: 2px solid #565656; 
  margin-right: 20px;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  
  .box-heading {
    color:#000;
    margin-bottom:10px;
    margin-top: 10px;
    font: bold 15px 'Gentona', Arial, Verdana, sans-serif;
  }
  .box-text {
    margin-left: 10px;
    margin-right: 10px;
  }
  .box-button {
    letter-spacing: 2px;
    font: bold 15px 'Gentona', Arial, Verdana, sans-serif;
    width: 200px;
    height: 40px;
    border: 1px solid #003082;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 0px;
    cursor: pointer;
    background-color: #003082;
    color: #FFFFFF;
    margin-top: 6px;
  }
  
}

@media (max-width: 768px) {
    .panel-footer .span4 p {
        text-align: left;
    }
}

@media (min-width: 1000px) {
  .jhu-wrapper:before {
      content: '';
      display: inline-block;
      max-width: 230px;
      min-width: 0;
      width: 10%;
  }
  .jhu-wrapper:after {
      content: '';
      display: inline-block;
      width: 10%;
  }
}