<div class="container">
  <div class="tower">
    <div class="tower_body"></div>
    <div class="tower_porch"></div>
    <div class="tower_roof"></div>
  </div>
  <div class="house house--to-left one">
    <div class="house_side"></div>
    <div class="house_roof"></div>
    <div class="house_front"></div>
  </div>
  <div class="house house--to-right three">
    <div class="house_side"></div>
    <div class="house_roof"></div>
    <div class="house_back"></div>
  </div>
  <div class="house house--to-left two">
    <div class="house_side"></div>
    <div class="house_roof"></div>
    <div class="house_front"></div>
    <div class="house_top"></div>
    <div class="house_chimney"></div>
  </div>
  <div class="land"></div>
  <div class="sea"></div>
  <div class="moon"></div>
</div>
div,
::before,
::after {
  position: absolute;
  box-sizing: border-box;
}

.container {
  width: 90vmin;
  height: 70vmin;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: linear-gradient(
    #60859f 34%,
    #68889f 34% 49%,
    #7f95a0 49% 59%,
    #8c9eac 59% 65%,
    #425774 65%
  );
}

.land {
  height: 27%;
  width: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(#b9bec2 15%, #434340 15% 29%, #1f1b12 29%);
}

.land::before {
  content: "";
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 6%;
  background-color: #343235;
  clip-path: polygon(0 0, 47% 0, 48% 100%, 0 100%);
}

.sea {
  height: 18%;
  width: 100%;
  left: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    #556678 14%,
    #3e546b 14% 22%,
    #617284 22% 34%,
    #556678 34% 44%,
    #40566b 44% 51%,
    #485464 51% 55%,
    #3d4c5f 55% 65%,
    #3b4356 65% 73%,
    #43596e 73% 90%,
    #617284 90%
  );
}

.house {
  width: 16vmin;
  height: 10vmin;
}

.house_front {
  width: 58%;
  height: 100%;
  bottom: 0;
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
}

.house_side {
  width: 42%;
  height: 57.8%;
  bottom: 0;
}

.house_roof {
  width: 71%;
  height: 42%;
  top: 0;
}

.house_top {
  width: 38%;
  height: 30%;
  top: -5%;
  left: 45%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%);
}

.house_top::before {
  content: "";
  width: 60%;
  height: 75%;
  right: 0;
  bottom: 0;
  background-color: inherit;
}

.house_back {
  width: 23%;
  height: 58%;
  right: 100%;
  bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 60%);
}

.house_chimney {
  width: 10%;
  height: 21%;
  top: -20%;
  left: 42%;
}

.house--to-left .house_front {
  left: 0;
}

.house--to-left .house_side {
  right: 0;
}

.house--to-left .house_roof {
  right: 0;
  clip-path: polygon(0 0, 60% 0, 100% 100%, 0 100%);
}

.house--to-right .house_front {
  right: 0;
}

.house--to-right .house_side {
  left: 0;
}

.house--to-right .house_roof {
  left: 0;
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}

.house.one {
  bottom: 27%;
  right: 27%;
}

.house.one .house_front {
  background-color: #8c505c;
}

.house.one .house_side {
  background-color: #260b12;
}

.house.one .house_roof {
  background-color: #1b2d45;
}

.house.two {
  bottom: 27%;
  right: 48.5%;
}

.house.two .house_front {
  background-color: #617284;
}

.house.two .house_side {
  background-color: #46586c;
}

.house.two .house_roof {
  background-color: #16263d;
}

.house.two .house_top {
  background-color: #4f5c6c;
  background-image: linear-gradient(#011029 25%, #adb2b6 25%);
}

.house.two .house_chimney {
  background-color: #14263c;
}

.house.three {
  bottom: 27%;
  right: 56%;
}

.house.three .house_side {
  background-color: #b2b9bf;
}

.house.three .house_roof {
  background-color: #777775;
}

.house.three .house_front {
  background-color: #14263c;
}

.house.three .house_back {
  background-image: linear-gradient(#777775 60%, #b2b9bf 60%);
}

.tower {
  width: 9vmin;
  height: 39vmin;
  bottom: 27%;
  right: 39.8%;
}

.tower_body,
.tower_porch,
.tower_roof {
  left: 50%;
  transform: translateX(-50%);
}

.tower_body {
  width: 74%;
  height: 83%;
  bottom: 0;
  background: linear-gradient(#744952 17%, #b5b0b6 17% 35%, #744952 35%);
}

.tower_porch {
  width: 100%;
  height: 6%;
  bottom: 83%;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 85% 100%, 15% 100%, 0 65%);
  background: linear-gradient(#744952 65%, #000 65%);
}

.tower_roof {
  width: 58%;
  height: 11%;
  top: 0;
  clip-path: polygon(50% 0, 100% 60%, 100% 100%, 0 100%, 0 60%);
  background: linear-gradient(#5d393d 60%, #506671 60%);
}

.tower_roof::after {
  content: "";
  height: 40%;
  width: 35%;
  bottom: 0;
  right: 0;
  background-color: #506671;
}

.tower_body::before,
.tower_roof::before,
.tower_porch::before {
  content: "";
  width: 50%;
  height: 100%;
  bottom: 0;
  right: 0;
  background-color: #000;
  opacity: 0.7;
}

.moon {
  width: 6vmin;
  height: 6vmin;
  background: #fff;
  top: 17%;
  left: 18%;
  border-radius: 50%;
  opacity: 0.3;
}
// Pure CSS
// Illustration by Kristofer Haugvik
// https://www.behance.net/gallery/24075785/Soer-Helgeland/modules/164573941

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.