<header></header>

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

<div>

  <section class="item item-type-a"></section>

  <section class="item item-type-b">

  </section>
  <section class="item item-type-b">

  </section>
  <section class="item">
    <section class="item-inner"></section>
    <section class="item-inner"></section>
    <section class="item-inner"></section>
    <section class="item-inner"></section>
    <section class="item-inner"></section>
  </section>

</div>

<footer></footer>
body {
  font-family: Arial, sans-serif;
}

header,
footer {
  padding: 25px 0;
}

header,
footer,
nav {
  margin: 20px 0;
}

header,
footer {
  background-color: orange;
}

section {
  padding: 10px;
}

section,
li {
  border: 1px dashed white;
}

nav li {
  background-color: black;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.item{
  padding: 0;
  background-color: white;
}

.item-type-a {
  padding-top: 45%;
  background-color: orange;
}

.item-type-b {
  padding-top: 45%;
  background-color: orange;
}

.item-inner {
  padding: 25px 0;
  background-color: black;
}

@media screen and (min-width: 600px) {
  body {
    width: 80%;
    margin: 0 auto;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.