cex banner

by mrjordy

HTML

<div class="BannerContainer">
  <div class="Banner">
    <div class="BannerBackground absolute"></div>
    <div class="BannerOceanMirrored">
      <div class="OceanMidToRight absolute"></div>
      <div class="OceanMidToLeft absolute"></div>
    </div>
    <div class="BannerSunSquished absolute"></div>
    <div class="BannerSunReflect absolute"></div>
    <div class="BannerLH absolute"></div>
    <div class="BannerTitle absolute"><a class="nolinkstyle" href="https://navy.deps.mil/peoeis/sites/nen/onesource/CEX/Pages/Home.aspx"><span class="BigTitle">Customer<br>Exchange<br></span></a><span class="LittleTitle">Spring 2017</span></div>
    <div class="BannerRH absolute"></div>
    <div class="BannerSubtitle absolute">Washington, D.C.
      <br>Sheraton Tysons Corner
      <br>April 4-6, 2017</div>
    <div class="BannerBottomMenu absolute">
      <div class="navbar">
        <ul class="navbar-nav">
          <a class="nolinkstyle" href="https://navy.deps.mil/peoeis/sites/nen/onesource/CEX/Pages/Home.aspx">
            <li class="dropdown horizontalmenu NavStyle">Home</li>
          </a>
          <a class="nolinkstyle" href="https://navy.deps.mil/peoeis/sites/nen/onesource/CEX/Pages/Info.aspx">
            <li class="dropdown horizontalmenu NavStyle">Information</li>
          </a>
          <a class="nolinkstyle" href="https://navy.deps.mil/peoeis/sites/nen/onesource/CEX/Pages/Register.aspx">
            <li class="dropdown horizontalmenu NavStyle">Register</li>
          </a>
          <li class="dropdown horizontalmenu NavStyle">Agenda
            <ul class="dropdown-menu">
              <a class="nolinkstyle" href="https://navy.deps.mil/peoeis/sites/nen/onesource/CEX/Pages/Agenda.aspx">
                <li class="NavStyle UnderNav">Day One</li>
              </a>
              <a class="nolinkstyle" href="#">
                <li class="NavStyle UnderNav DeadLink">Day Two</li>
              </a>
              <a class="nolinkstyle" href="#">
                <li...

CSS

.absolute {
  position: absolute;
}

.displaynone {
  display: none;
}

.nolinkstyle {
  color: white !important;
  list-style-type: none !important;
  text-decoration: none !important;
}

.DeadLink {
  color: #888;
  text-shadow: none !important;
  background: #444 !important;
  cursor: not-allowed !important;
}

.DeadLink:hover {
  background: #444 !important;
  box-shadow: inset 0 0 2px #fff !important;
}

@media screen and (max-width: 924px) {
  .TruncateOnSmallScreen {
    display: none;
  }
}

.BannerContainer {
  overflow-x: hidden;
  height: 374px;
  min-width: 870px;
  max-width: 1300px;
}

@media screen and (min-width: 1300px) {
  .BannerContainer {
    margin-left: calc(50% - 650px);
  }
}

.Banner {
  height: 300px;
  width: 100%;
  position: relative;
}

.BannerBackground {
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/CEX_Banner_Back.png');
  background-repeat: repeat-x;
  width: 100%;
  height: 300px;
}

.OceanMidToRight {
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/CEX_Banner_OceanMirror.png');
  background-repeat: repeat-x;
  width: 50%;
  background-size: 100% 138px;
  margin-left: 50%;
  height: 138px;
  margin-top: 162px;
  opacity: .7;
}

.OceanMidToLeft {
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/CEX_Banner_OceanMirror.png');
  background-repeat: repeat-x;
  width: 50%;
  background-size: 100% 138px;
  transform: scaleX(-1);
  height: 138px;
  margin-top: 162px;
  opacity: .7;
}

.BannerSunReflect {
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/CEX_Banner_CenterReflect.png');
  width: 251px;
  height: 129px;
  margin-top: 171px;
  margin-left: calc(50% - 125px);
}

.BannerSunSquished {
  background-image: url('https://navy.deps.mil/peoeis/sites/nen/res/CEX_Banner_SunSquished.png');
  width: 920px;
  transform: scaleX(2);
  height: 225px;
  margin-top: 1px;
  margin-left: calc(50% - 0px);
  background-repeat: no-repeat;
}

.BannerLH {
  background-image:...

JavaScript

$(document).ready(function() {
  $('.navbar .navbar-nav > li.dropdown').click(function() {
    if ($(this).hasClass('open')) {
      $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
      $(this).removeClass('open');
    } else {
      $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
      $(this).addClass('open');
    }
  });
});