<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
  text-align: center;
  margin: 0;
}

div {
  height: 50vh;
  width: 50vw;
  float: left;
}

.a {
  background: #ffddbb;
}

.b {
  background: #ddbb99;
}

.c {
  background: #bb9977;
}

.d {
  background: #997755;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.