<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.