Performance Management Masthead

by mrjordy

HTML

<div id="preload">
   <img src="http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_TL-Hov.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_TR-Hov.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_BR-Hov.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_BL-Hov.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_C-Hov.png" width="1" height="1"/>
   <img src="http://techstatic.org/falconwood-pitch/PfM-header-thin_20150701/PfM_Header_Text-Overlay.png" width="1" height="1"/>
</div>
<div id ="HeaderContainer">
     <div class="HeaderTitle">CDRL Management</div>
     <div class="HeaderSub"></div>
     <div class="GUI"></div>
     <div class="Background-Image"></div>
     <div class="diag-noselect"></div>
     <div class="PMcenter-noselect"></div>
     <div class="C toggle"></div>
     <div class="C-popup hidden">
         <div class="PopupTitle">Track &amp; Report</div>
         <div class="PopupText">Ensure timely delivery while providing accurate metrics</div>
    </div>
     <div class="TL toggle"></div>
     <div class="TL-popup hidden">
         <div class="PopupTitle">Deliver</div>
         <div class="PopupText">Maintain a central repository for contracted deliverables</div>
    </div>
     <div class="TR toggle"></div>
     <div class="TR-popup hidden">
         <div class="PopupTitle">Review</div>
         <div class="PopupText">Assess contracted deliverables for accuracy</div>
    </div>
     <div class="BR toggle"></div>
     <div class="BR-popup hidden">
         <div class="PopupTitle">Change</div>
         <div class="PopupText">Facilitate responses to service provider regarding requested changes to contracted deliverables</div>
    </div>
     <div class="BL toggle"></div>
     <div class="BL-popup...

CSS

#preload {
    display: none; 
}
#HeaderContainer {
    width: 850px;
    height: 260px;
    overflow: hidden;
    border-radius: 2px;
    margin-left: auto;
    margin-right: auto;
}
#HeaderContainer > .HeaderTitle {
  font-family: helvetica;
  position: absolute;
  z-index: 4;
  margin-top: 9px;
  margin-left: 60px;
  width: auto;
  height: 32px;
  color: white;
  vertical-align: middle;
  line-height: normal;
  font-size: 24px;
}
#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;
}
#HeaderContainer > .Background-Image {
    background: url("http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_Image.png");
    width: 850px;
    height: 220px;
    margin-top: 40px;
    position: absolute;
    z-index: 1;
}
#HeaderContainer > .GUI {
    background: url("http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_GUI.png");
    width: 850px;
    height: 260px;
    overflow: hidden;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
}
#HeaderContainer > .PMcenter-noselect {
    height: 120px;
    width: 120px;
    display: block;
    border-radius: 80px;
    position: absolute;
    margin-top: 91px;
    margin-left: 80px;
    cursor: auto;
    z-index: 5;
}
#HeaderContainer > .diag-noselect {
    height: 220px;
    width: 610px;
    display: block;
    position: absolute;
    transform: skewX(-23deg);
    margin-left: 292px;
    margin-top: 40px;
    cursor: auto;
    z-index: 5;
}
#HeaderContainer > .C {
    height: 113px;
    width: 113px;
    display: block;
    position: absolute;
    margin-top: 95px;
    margin-left: 83px;
    cursor: pointer;
    z-index: 6;
}
#HeaderContainer > .C:hover {
    background: url("http://techstatic.org/falconwood-pitch/CDRL_circle_header/CDRL_Header_C-Hov.png");
    z-index:...

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" />