KpoOoB

index.html

<div class="container color-home">
  <div class="container-inner-left">
    <div class="column-outside-left">
      <div class="item-row">
        <div class="item">
          <div class="logo">
            <a href="/">
              <div class="logo-image-home"></div>
            </a>
          </div>
          <div class="logo-text">
            seattle
            <br>design
            <br>foundation
          </div>
        </div>
      </div>
      <div class="item-row">
        <div class="item full-height">
          Bacon ipsum dolor amet picanha tail pork belly turducken bacon short ribs jerky sausage meatball cupim meatloaf strip steak. Kevin kielbasa hamburger pork loin, biltong doner pastrami jerky drumstick cow cupim. Short loin meatloaf flank brisket venison jerky hamburger frankfurter tri-tip. Rump porchetta alcatra t-bone spare ribs, meatball sirloin short loin kevin andouille. Leberkas andouille pig short loin strip steak hamburger beef ribs cupim tongue ham hock kevin bacon. Porchetta capicola spare ribs brisket, kielbasa cow corned beef. Shank ball tip swine fatback short loin, pork loin biltong sirloin jerky shoulder flank.
        </div>
      </div>
      <div class="item-row">
        <div class="item">
          <a href="/about">About</a>
        </div>
      </div>
      <div class="item-row">
        <div class="item">
          <a href="/giving">Giving</a>
        </div>
      </div>
      <div class="item-row">
        <div class="item">
          <a href="" target="_blank">News</a>
        </div>
      </div>
      <div class="item-row">
        <div class="social-media">
          <a href="http://facebook.com/" target="_blank">
            <div class="facebook-home"></div>
          </a>
        </div>
        <div class="social-media">
          <a href="http://twitter.com" target="_blank">
            <div class="twitter-home"></div>
          </a>
        </div>
        <div class="social-media">
          <a href="http://plus.google.com/" target="_blank">
            <div class="gplus-home"></div>
          </a>
        </div>
      </div>
      <div class="item-row">
        <div class="item">
          <a href="/updates">Updates</a>
        </div>
      </div>
      <div class="item-row">
        <div class="item">
          <a href="/privacy">Privacy</a>
        </div>
      </div>
    </div>
  </div>

  <!-- center column -->
  <div class="container-inner">
    <div class="column-center">
      <div class="item-row">
        <div class="item">
          what we do
        </div>
      </div>
      <div class="item-row">
        <div class="item half-height">
          <a href="/grants">grants</a>
        </div>
      </div>
      <div class="item-row">
        <div class="item half-height">
          <a href="/mentorship">mentorship</a>
        </div>
      </div>
      <div class="item-row">
        <div class="item">
          {{ entry.centerColumn }}
        </div>
      </div>
    </div>
  </div>

  <!-- right column -->
  <div class="container-inner-right">
    <div class="column-outside-right">
      <div class="item-row">
        <div class="item">
          random proposal or news feed goes here
        </div>
      </div>
    </div>
  </div>
</div>

KpoOoB.markdown

KpoOoB

Forked from Captain Anonymous's Pen eNMxgN.

A Pen by Ian Gilman on CodePen.

License.

style.css

/*Green: #006837
Yellow: #FFA000
Blue: #0050FF*/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.container {
	display: table;
	border: 6px solid;
	width: 100%;
	height: 100%;
}

.container-inner-left {
	display: table-cell;
	width: 25%;
	border-right: 6px solid;
}

.container-inner {
  display: table-cell;
  width: 50%;
  height: 100%;
  vertical-align: top;
}

.container-inner-right {
	display: table-cell;
	width: 25%;
	border-left: 6px solid;
}

.column-outside-left,
.column-outside-right,
.column-center {
	display: table;
  width:100%;
  height: 100%;
}

.item-row {
	display: table-row;
}

.item {
	display: table-cell;
	border-bottom: 6px solid;
  width: 100%;
}

.item-row:last-child .item {
  border-bottom: none;
}

.item.half-height {
  height: 50%;
}

.item.full-height {
  height: 100%;
}

.logo {
	display: inline-block;
	width: 33%;
  border-right: 6px solid;
  height: 100%;
}

.logo-image-home {
  background: url("../img/sdflogo_red.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 92px;
}

.facebook-home {
  background: url("../img/facebook_red.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 46px;
  width: 33%;
}

.twitter-home {
  background: url("../img/twitter_red.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 46px;
  width: 33%;
}

.gplus-home {
  background: url("../img/googleplus_red.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 46px;
  width: 33%;
}

.color-home {
  border-color: #FF0000;
  color: #FF0000;

  a {
    color: #FF0000;
  }
}

.color-current-grant {
  border-color: #6948FF;
  color: #6948FF;

  a {
    color: #6948FF;
  }
}

.color-form {
  border-color: #FF005A;
  color: #FF005A;

  a {
    color: #FF005A;
  }
}

.logo-text {
	display: inline-block;
	width: 66%;
}

.inner-text {
	display: table-cell;
}

.social-media {
	display: table-cell;
}

.container-inner-center {
	display: table;
	width: 100%;
}

@media (max-width: 400px) {
  .container {
    display: block;
  }
}