LandingMockup

by mrjordy

HTML

<html>

  <body>
    <div class="banner">
      <div class="banner-left">
      </div>
      <div class="banner-center">
      </div>
      <div class="banner-right">
      </div>
    </div>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/ftcn">FTCN</a></li>
        <li><a href="/pcrss">PCRSS</a></li>
        <li><a href="/XTR">XTR</a></li>
        <li><a href="/PortalSupport">Portal Support</a></li>
      </ul>
      <div class="search">
        <input placeholder="Search this site">
        <span class="fa fa-search fa-rotate-90"></span>
      </div>
    </nav>
    <section class="missionDescription"><em><b>Mission:</b> Provide detailed MDA asset components and capabilities information; a snapshot of each asset's configuration at any given time, and how that configuration was achieved</em></section>
    <section class="expandableLinkAndMaintenanceCalendar">
      <section class="ExpandableLinkSections">
        <div class="seatsLeft">
          <div class="leftPane leftSection1 leftSectionOpen">
            <div class="orb">
              <svg preserveAspectRatio="xMidYMid" viewBox="0 0 80 80" xmlns="http://falconwood.us/wolfy/phone-receiver.svg">
                <path class="orbSVG firstOrb" d="m30 49s15 21.8 15 23-4.8 5-6 5-34-53-34-53 0.8-2.8 2-4 5 0 5 0 0.4-5 8-5c0.025 0 4 7 4 7s2.171-1 4-1h3l-3-6 7 2 2 6 7 1-3-6h7s5.409 0.326 9-3c5e-3 -5e-3 0.288 0.848 0 1-8.052 4.258-8.974 1.833-9 2-0.011 0.073 4 7 4 7l9-3 4 6-10 3 4 8s2.487-0.246 5-1c2.487-0.746 5-2 5-2l6 8s-3 3-12 3c-0.2 0-4-8-4-8l-7-1 4 8-8-2-4-8-6-1 4 8h-6l-5-8s-3.601 2.33-5 4c-0.645 0.77-1 2-1 2l-5-8s1.156-1.848 3-3c2.135-1.334 4-2 4-2l4 7h7l-4-8 6 2 4 7 8 2-4-7h7l-3-6-8-1 4 7-8-2-3-6-6-2 3 6-7 1-3-6s-2.814 0.028-5 1c-2.31 1.027-4 3-4 3s14.191 21.933 14.223 21.808c1.32-5.135 7.129-4.921 6.777-4.808-4.945 1.586-6 6-6 6z" /></svg>
            </div>
            <div class="leftPaneInner">
            <div>

              <h3 class="leftPaneTitle">Flight Test...

CSS

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

body {
  font-family: kalinga;
}

.banner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.banner div {
  height: 67px;
  background-size: auto 100%;
  background-repeat: no-repeat, repeat;
  background-color: black;
}

.banner-left {
  width: 10%;
  background-image: url("http://falconwood.us/wolfy/NewMDABannerPieces/mda-banner-logo.jpg");
  background-position: left;
  flex-grow: 1
}

.banner-center {
  width: 30%;
  background-image: url("http://falconwood.us/wolfy/NewMDABannerPieces/mda-banner-planet.jpg"), url("http://falconwood.us/wolfy/NewMDABannerPieces/mda-banner-stars.jpg");
  background-position: center, left;
  flex-grow: 8
    /* float: center; */
}

.banner-right {
  width: 20%;
  /* width: 30%; */
  background-image: url("http://falconwood.us/wolfy/NewMDABannerPieces/mda-banner-flag.jpg"), url("http://falconwood.us/wolfy/NewMDABannerPieces/mda-banner-stars.jpg");
  background-position: right, left;
  flex-grow: 1
    /* float: right; */
    /* display: inline-block */
}

.missionDescription {
  text-align: center;
  margin: 10px;
  padding: 5px;
  border: 2px solid navy;
  border-radius: 5px;
  background-color: #aec9f5;
}

/* Expandable link CSS Here */
.ExpandableLinkSections {
  width: 65%;
  display: inline-block;
  vertical-align: top;
}

.seatsLeft {
  height: 270px;
  width: calc(100% - 16px);
  display: block;
  display: inline-block;
  vertical-align: top;
  color: white;
}

.leftPane {
  width: 135px;
  height: calc(100% - 4px);
  cursor: pointer;
  margin: 2px;
  transition: 0.3s;
  overflow: hidden;
  display: inline-block;
  background-size: 100%;
  border-radius: 10px;
  position: relative;
}

.leftPaneInner {
  height: calc(100%);
  border-radius: 10px;
  box-shadow: inset 0 0 30px #444;
}


.leftPane:not(.leftSectionOpen):hover .leftPaneInner {
  box-shadow: inset 0 0 30px...

JavaScript

$(document).ready(function() {
  $('.leftSection1').click(function() {
    $('.leftSection1').addClass('leftSectionOpen');
    $('.leftSection2').removeClass('leftSectionOpen');
    $('.leftSection3').removeClass('leftSectionOpen');
  });
  $('.leftSection2').click(function() {
    $('.leftSection2').addClass('leftSectionOpen');
    $('.leftSection1').removeClass('leftSectionOpen');
    $('.leftSection3').removeClass('leftSectionOpen');
  });
  $('.leftSection3').click(function() {
    $('.leftSection3').addClass('leftSectionOpen');
    $('.leftSection1').removeClass('leftSectionOpen');
    $('.leftSection2').removeClass('leftSectionOpen');
  });
});