<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;
}