NEN Home 5 Non-pizza

by mrjordy

HTML

<div id="preload">
   <img src="https://navy.deps.mil/peoeis/sites/nen/res/Banner_TL-Hov.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/res/Banner_TR-Hov.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/res/Banner_C-Hov.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/res/Banner_BR-Hov.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/res/Banner_BL-Hov.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/res/Banner_Text-Overlay.png" width="1" height="1"/>
</div>
<div id ="HeaderContainer">
     <div class="HeaderTitle">Captain's Priorities</div>
     <div class="HeaderSub"></div>
     <div class="GUI"></div>
     <div class="Background-Image"></div>
     <div class="Floating-Image"></div>
     <div class="Floating-Image2"></div>
     <div class="diag-noselect"></div>
     <div class="center-noselect"></div>
     <div class="C toggle"></div>
     <div class="C-popup hidden">
		<a href="https://navy.deps.mil/peoeis/sites/nen/ITSSMD/NPSI/home.aspx">
		 <div class="PopupTitle">About NEN PMW 205</div>
		</a>
         <div class="PopupText">Blurb about NEN.
		    <div class="sp-button">
                <a href="https://navy.deps.mil/peoeis/sites/nen/strat/NPSI/SitePages/Pilots.aspx">
                    <div class="three-button">
                        <img src="https://navy.deps.mil/peoeis/sites/nen/res/gearcycle-yellow.png" />
                        <p>Pilots</p>
                    </div>
                </a>
                <a href="https://navy.deps.mil/peoeis/sites/nen/strat/NPSI/InCell">
                    <div class="three-button">
                        <img src="https://navy.deps.mil/peoeis/sites/nen/res/nucleus-yellow.png" />
                        <p>Innovation Cell</p>
                    </div>
                </a>
                <a...

CSS

#preload {
    display: none; 
}
#HeaderContainer {
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
}
#HeaderContainer > .HeaderTitle {
    font-family: helvetica;
    position: absolute;
    z-index: 4;
    margin-top: 8px;
    padding-left: 16px;
    padding-top: 2px;
    width: calc(100% - 24px);
    height: 32px;
    color: white;
    vertical-align: middle;
    line-height: normal;
    font-size: 24px;
    background: #3E628F;
}
#HeaderContainer > .HeaderSub {
  font-family: helvetica;
  position: absolute;
  z-index: 4;
  margin-top: 16px;
  margin-left: 355px;
  width: auto;
  height: 32px;
  color: #ddd;
  vertical-align: middle;
  line-height: normal;
  font-size: 16px;
}
@media screen and (min-width: 900px) {
#HeaderContainer > .Background-Image {
    background: url("https://navy.deps.mil/peoeis/sites/nen/res/NENHome_Banner_Image-rpt.png");
    width: calc(100% - 8px);
    height: 279px;
    margin-top: 40px;
    position: absolute;
    z-index: 1;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
    background-position: right;
}
}
@media screen and (max-width: 900px) {
#HeaderContainer > .Background-Image {
    background: url("https://navy.deps.mil/peoeis/sites/nen/res/NENHome_Banner_Image-S.png");
    width: calc(100% - 8px);
    height: 279px;
    margin-top: 40px;
    position: absolute;
    z-index: 1;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
    background-position: right;
}
}
@media screen and (min-width: 900px) {
#HeaderContainer > .Floating-Image {
    background: url("https://navy.deps.mil/peoeis/sites/nen/res/NENHome_Banner_Jet.png");
    width: 225px;
    height: 85px;
    margin-top: 104px;
    margin-left: calc(20% + 190px);
    position: absolute;
    z-index: 1;
    position: absolute;
}
}
@media screen and (min-width: 901px)...

JavaScript

jQuery(document).ready(function() {
    jQuery(".toggle").next(".hidden").hide();
    jQuery(".toggle").click(function() {
        $('.active').not(this).toggleClass('active').next('.hidden').fadeToggle(100);
        $(this).toggleClass('active').next().fadeToggle(500);

    });
});

//<meta http-equiv="X-UA-Compatible" content="IE=8" />