Quad Layout

by Brandon

HTML

<div class="Quads">

  <div class="flexContainer titleArea header">
    <h1 class=" mainTitle">Weekly Staff Meeting Update</h1>
    <h3 class=" subtitle">[Knowledge Management]</h3>
  </div>

  <div class="flexContainer box">
    <div class="flexItem box right">
      <h2>Current Task</h2>
      <ul>

        <li>Lorem ipsum sum
          <ul>
            <li>2 Lorem ipsum sum</li>
            <li>2 Lorem ipsum sum</li>
          </ul>
        </li>
        <li>Lorem ipsum sum</li>
        <li>Lorem ipsum sum</li>
      </ul>
    </div>
    <div class="flexItem box left">
      <h2>Upcoming</h2>
      <ul>
        <li>Lorem ipsum sum
          <ul>
            <li>2 Lorem ipsum sum</li>
            <li>2 Lorem ipsum sum</li>
          </ul>
        </li>
        <li>Lorem ipsum sum</li>
        <li>Lorem ipsum sum</li>
      </ul>
    </div>
    <div class="flexItem box left">
      <h2>Accomplishments</h2>
      <ul>
        <li>Lorem ipsum sum
          <ul>
            <li>2 Lorem ipsum sum</li>
            <li>2 Lorem ipsum sum</li>
          </ul>
        </li>
        <li>Lorem ipsum sum</li>
        <li>Lorem ipsum sum</li>
      </ul>
    </div>
    <div class="flexItem box right">
      <h2>Issues</h2>
      <ul>
        <img class="risk" src="https://navy.deps.mil/peoeis/sites/nen/sandbox/btest/PublishingImages/fire.png" />
        <li>Lorem ipsum sum
          <ul>
            <li>2 Lorem ipsum sum</li>
            <li>2 Lorem ipsum sum</li>
          </ul>
        </li>
        <li>Lorem ipsum sum</li>
        <li>Lorem ipsum sum</li>
      </ul>
    </div>

  </div>
  <div class="flexContainer footer"></div>

CSS

div.header {
  background: url('https://navy.deps.mil/peoeis/sites/nen/sandbox/btest/PublishingImages/header-left-edge.png') left bottom no-repeat, url('https://navy.deps.mil/peoeis/sites/nen/sandbox/btest/PublishingImages/header-slice.png') left top repeat-x;
  height: 146px;
  background-color: #FFFFFF;
}

div.footer {
  background: url('https://navy.deps.mil/peoeis/sites/nen/sandbox/btest/PublishingImages/footer-right-edge.png') right bottom no-repeat, url('https://navy.deps.mil/peoeis/sites/nen/sandbox/btest/PublishingImages/footer-slice.png') left bottom repeat-x;
  height: 58px;
  background-color: #FFFFFF;
}

.flexContainer {
  background-color: #FFFFFF;
  padding: 0;
  margin: 0 0 0 15px;
  /*border: 1px solid #000000;*/
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.titleArea {
  -webkit-flex-direction: column;
  flex-direction: column;
  align-items: flex-end;
  /*width:960px;*/
}

.mainTitle {
  padding: 0;
  margin: 0;
}

.titleArea h1 {
  padding-top: 40px;
  padding-right: 10px;
}

.titleArea h3 {
  padding-right: 10px;
}

.flexItem {
  background: tomato;
  padding: 5px;
  width: 40%;
  margin: 10px;
  color: #000000;
  text-align: left;
  border: 1px solid #000000;
}

.flexItem > h2 {
  padding: 0;
  margin: 0;
  align-items: flex-start;
}

.flexContainer.box {
  align-items: center;
  justify-content: center
}

.box {
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}

.flexItem.box ul {
  list-style-type: none;
}

.flexItem.box ul li {
  padding-top: 15px;
}

.flexItem.box img {
  margin: 0 5px 0 0;
  padding: 0;
  float: left;
}

.flexItem.box.right {
  background: repeating-linear-gradient( -55deg, #fdffe7, #fdffe7 2px, #FFF 2px, #FFF 4px);
}

.flexItem.box.left {
  background: repeating-linear-gradient( 55deg, #edf2f9, #edf2f9 2px, #FFF 2px, #FFF 4px);
}

.subtitle {
  padding: 0;
  margin: 0;
 ...