<div id="wrap">
  <header id="header">
    <div class="container"></div>
  </header>
  <nav id="nav">
    <div class="container"></div>
  </nav>
  <main id="main">
    <div class="contents container">
      <div class="cont1"></div>
      <div class="cont2"></div>
      <div class="cont3"></div>
      <div class="cont4"></div>
    </div>
  </main>
  <footer id="footer">
    <div class="container"></div>
  </footer>
</div>
*{
  margin: 0;
}
#wrap{}
#header{
  height: 100px;
  background-color: #EEEBE9;
}
#nav{
  height: 100px;
  background-color: #B9AAA5;
}
#main{
  height: 780px;
  background-color: #886F65;
}
#footer{
  height: 100px;
  background-color: #4E342E;
}
.container{
  width: 1200px;
  margin: 0 auto;
  height: inherit;
  background-color: rgba(0, 0, 0, 0.3);
}
.contents{
  display: grid;
  grid-template-areas: 
    "cont1 cont1"
    "cont2 cont2"
    "cont3 cont4"
    ;
  grid-template-columns: 50% 50%;
  grid-template-rows: 100px 200px 480px;
}
.contents .cont1{
  background-color: #74574A;
  grid-area: cont1;
}
.contents .cont2{
  background-color: #684D43;
  grid-area: cont2;
}
.contents .cont3{
  background-color: #594139;
  grid-area: cont3;
}
.contents .cont4{
  background-color: #4A352F;
  grid-area: cont4;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.