A Pen by Noe Misael Nieto Arroyo.

A-Pen-by-Noe-Misael-Nieto-Arroyo.markdown

A Pen by Noe Misael Nieto Arroyo

A Pen by Noe Misael Nieto Arroyo on CodePen.

License.

index.html

<div class="wrap">
<div class="row">
  <header><h1>Foo Bar</h1></header>
</div>
<div class="row">
  <div class="cell right">
    <div class="content">
      Advantages
    </div>
  </div>
  <div class="cell left">
    <div class="content">
      Mapa
    </div>
  </div>
</div>
<div class="row">
  <footer>
    Lorem ipsum
  </footer>
</div>  
</div>

style.css

body {
  background: #666;
  color: #aaa;
  font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
}

.wrap {
  width: 960px;
  margin: 0 auto;
  padding:0;
  background: #eee;
}
.row {
  display: block;
  width: 100%;
  clear: both;
}

header {
  display: block;
  text-align: left;
  padding: 1em;
}

footer {
  display: block;
  text-align: center;
}

.cell {
  display: block;
  float: left;
}

.left{
  width: 39.99%;
  background: #456
}

.right{
  width: 59.99%;
  background: #456
}

.content {
  padding:1em;
}

.right .content {
  background: #66F;
}