<!-- Inspiration https://www.vectorstock.com/royalty-free-vector/brick-townhouse-vector-5026965 -->

<!-- My blog: https://albertwalicki.com -->

<div class="body">
  <div class="roof">
    <div class="top">
      <div class="chimney1"></div>
      <div class="chimney2"></div>
      <div class="antenna">
        <span class="ant1"></span>
        <span class="ant2"></span>
        <span class="ant3"></span>
        <span class="ant4"></span>
      </div>
    </div>
    <div class="middle"></div>
    <div class="bottom">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div class="floor floor1">
    <div class="balcony">
      <div class="grid">
        <span></span>
      </div>
      <div class="flower"></div>
    </div>
    <div class="window window1">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
    <div class="window window2">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
    <div class="window window3">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
  </div>
  <div class="floor floor2">
     <div class="balcony">
       <div class="grid">
         <span></span>
       </div>
     </div>
    <div class="window window4">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
    <div class="window window5">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
    <div class="window window6">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
  </div>
  <div class="floor floor3">
    <div class="window window7">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
    <div class="window window8">
      <div class="windowTop"></div>
      <div class="windowFrame"></div>
      <div class="windowBottom"></div>
    </div>
    <div class="window window9">
      <div class="windowFrame"></div>
    </div>
  </div>
  <div class="zeroLevel">
    <div class="doorWrapper">
      <div class="cornice cornice1"></div>
      <div class="cornice cornice2"></div>
      <div class="topLight"></div>
      <div class="handrail">
        <span class="left"></span>
        <span class="right"></span>
      </div>
      <div class="door"></div>
    </div>
    <div class="stairs">
      <div class="wall wall1"></div>
      <div class="wall wall2"></div>
    </div>
    <div class="trees">
      <div class="tree tree1">
        <span class="trunk"></span>
        <span class="pot"></span>
      </div>
      <div class="tree tree2">
         <span class="trunk"></span>
         <span class="pot"></span>
      </div>
    </div>
    <div class="fence">
      <div class="fenceSpan"></div>
      <div class="fenceSpan"></div>
      <div class="fenceSpan"></div>
      <div class="fenceSpan"></div>
    </div>
  </div>
  <div class="ladder"></div>
  <div class="hydrant">
    <span></span>
  </div>
</div>
<div class="ground"></div>
*{
  box-sizing: border-box;
}

$bg: #a2d8f3;

$hydrant: #D65859;

$brick1: #DD9980;
$brick2: #D8785B;
$brick3: #AF5842;
$brick4: #86432F;

$windowFrame: #573026;
$window: #62A1CB;
$windowShine: #82C7D0;
$windowLight: #FEC864;
$windowLightDark: #AA803E;

$plant1: #98B854;
$plant2: #76812F;
$plant3: #5C7523;

$metal: #484551;
$basement: #7F6A4D;
$stairs: #513428;

$door: #71372E;
$door2: #523127;
$door3: #80694C;

$size: 1vmin;
$size05: calc(0.5 * #{$size});
$size075: calc(0.75 * #{$size});
$size2: calc(2 * #{$size});
$size3: calc(3 * #{$size});
$size4: calc(4 * #{$size});
$floorH: calc(20 * #{$size});

body {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  height: 100vh;
  background: $bg;
}

.body {
  position: relative;
}

.roof {
  .top {
    width: calc(100% + 2 * #{$size2});
    background: linear-gradient($brick1, $brick1 50%, $brick3 50%);
    height: $size2;
    position: relative;
    left: calc(-2 * #{$size});
    &:before {
      content: '';
      position: absolute;
      bottom:0;
      left:0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: $size 0 0 $size;
      border-color: transparent transparent transparent $bg;
    }
    &:after {
      content: '';
      position: absolute;
      bottom:0;
      right:0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0 $size $size;
      border-color: transparent transparent $bg transparent;
    }
  }
  .middle {
    width: calc(100% + #{$size2});
    background-image: linear-gradient(90deg, $brick2 25%, $brick3 25%, $brick3 50%, $brick2 50%, $brick2 75%, $brick3 75%, $brick3 100%);
    background-size: calc(6 * #{$size}) calc(6 * #{$size});
    height: $size2;
    position: relative;
    left: calc(-1 * #{$size});
  }
  .bottom {
    width: 100%;
    background: $brick3;
    height: $size4;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 $size;
    span {
      border: $size075 solid $brick4;
      border-bottom: none;
      width: calc( 80% / 4);
      height: 100%;
      position: relative;
      &:before {
        content: '';
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        margin: 0 auto;
        background: $brick4;
        height: $size2;
        width: $size4;
        border-top-right-radius: $size2;
        border-top-left-radius: $size2;
      }
    }
  }
}

.chimney1 {
  width: $size3;
  height: $size4;
  background: $brick2;
  position: absolute;
  left: calc(6 * #{$size});
  top: calc(-4 * #{$size});
  &:before {
    position: absolute;
    top:0;
    content: '';
    width: calc(100% + #{$size});
    left: calc(-0.5 * #{$size});
    height: $size;
    background: $brick1;
  }
}

.chimney2 {
  width: calc(6 * #{$size});
  height: $size4;
  background: $brick2;
  position: absolute;
  left: calc(12 * #{$size});
  top: calc(-4 * #{$size});
  &:before {
    position: absolute;
    top:0;
    content: '';
    width: calc(100% + #{$size});
    left: calc(-0.5 * #{$size});
    height: $size;
    background: $brick1;
  }
}

.antenna {
  position: absolute;
  right: calc(8 * #{$size});
  top: calc(-7 * #{$size});
  width: $size;
  height: calc(7 * #{$size});
  background: #889BAD;
  &:before {
    content: '';
    position: absolute;
    height: $size;
    width: calc(10 * #{$size});
    left: calc(-4.5 * #{$size});
    top: $size;
    background: #889BAD;
  }
  span {
    position: absolute;
    width: $size;
    background: #889BAD;
  }
  .ant1 {
    height: calc(4 * #{$size});
    left: calc(-4.5 * #{$size});
    top: calc(-0.5 * #{$size});
  }
  .ant2 {
    height: calc(3 * #{$size});
    left: calc(-2 * #{$size});
  }
  .ant3 {
    height: calc(3 * #{$size});
    right: calc(-2 * #{$size});
  }
  .ant4 {
    height: calc(4 * #{$size});
    right: calc(-4.5 * #{$size});
    top: calc(-0.5 * #{$size});
  }
}

.floor {
  width: calc(2 * #{$floorH});
  height: $floorH;
  background: $brick2;
  border-top: $brick3 solid calc(2 * #{$size});
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  &:before {
    content: '';
    position: absolute;
    top: calc(-2 * #{$size});
    left: -$size;
    height: $size;
    width: calc(100% + 2 * #{$size});
    background: $brick1;
  }
}

.brickWall {
  // width: 100%;
  // height: 100%;
  // position: absolute;
  // --b-1: red 0px 0px / 0px 10px;
  // --b-2: red 0px 0px / 0px 10px;
  // background: linear-gradient(var(--b-1), var(--b-2));
}

.window {
  position: relative;
  top: calc(4 *#{$size});
  width: calc(#{$size} * 6);
  height: calc(#{$size} * 10);
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 100%;
    height: $size;
    background: $windowFrame;
  }
}

.windowFrame {
  height: 100%;
  width: 100%;
  background: $window;
  border: $size solid $windowFrame;
}

.windowTop {
  height: $size;
  width: calc(100% + 2 * #{$size});
  position: absolute;
  left: -$size;
  background: $brick1;
  z-index: 1;
  top:-$size;
  
  &:before {
    content: '';
    position: absolute;
    top: calc(-2 * #{$size});
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 $size4 $size2 $size4;
    border-color: transparent transparent $brick1 transparent;
  }
  &:after {
    content: '';
    position: absolute;
    top: calc(-1 * #{$size});
    left:0;
    right:0;
    width: 0;
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 0 $size $size $size;
    border-color: transparent transparent $brick3 transparent;
    opacity: 0.7;
  }
}
.windowBottom {
  height: calc(2* #{$size});
  width: calc(100% + 2 * #{$size});
  position: absolute;
  left: -$size;
  background: linear-gradient($brick1 0, $brick1 50%, $brick4 50%);
}

.window9 {
  visibility: hidden;
  opacity: 0;
}

.window1 .windowFrame{
  background: linear-gradient(90deg, $windowLight $size, $windowLight $size, $windowLightDark $size, $windowLightDark $size2,  $windowLight $size2);
}

.window2 .windowFrame,
.window4 .windowFrame,
.window7 .windowFrame {
background: linear-gradient(-225deg, $window, $window $size, $windowShine 1vmin, $windowShine 2vmin, $window 2vmin, $window 3vmin, $windowShine 3vmin, $windowShine 4vmin, $window 4vmin);
}

.window3 .windowFrame{
  background: linear-gradient($window, $window 50%, $windowLightDark 50%);
}
.window5 .windowFrame{
    background: linear-gradient(90deg, $windowLight, $windowLight $size2, $windowLightDark $size2);
}
.window6 .windowFrame{
  background: $windowLight;
}

.window8 .windowFrame {
  background: linear-gradient(-225deg, $window, $window $size, $windowShine $size , $windowShine calc(2.5 * #{$size}), $window calc(2.5 * #{$size}));
}

.zeroLevel {
  width: 100%;
  height: calc(8 * #{$size});
  position: relative;
  background: linear-gradient($basement, $basement $size, $door2 $size, $door2 $size2, $basement $size2 )
}

.stairs {
  height: calc(5 *  #{$size});
  width: 33%;
  background: $door;
  position: absolute;
  bottom: 0;
  right:0;
  background-image: linear-gradient(0deg, $door2 30%, $basement 30%, $basement 50%, $door2 50%, $door2 80%, $basement 80%, $basement 100%);
background-size: $size4 $size4;
  .wall {
    position: absolute;
    top:calc(-1 *  #{$size});
    width: $size3;
    height: calc(5 *  #{$size});
    background: $brick4;
    border: $size solid $brick2;
    &:before {
      content: '';
      position: absolute;
      bottom:calc(-2 *  #{$size});
      left:calc(-1.5 *  #{$size});
      height: $size2;
      width: $size4;
      background: $brick1;
    }
    &:after {
      content: '';
      position: absolute;
      top:calc(-2 *  #{$size});
      left:calc(-1.5 *  #{$size});
      height: $size2;
      width: $size4;
      background: $brick1;
    }
  }
  .wall1 {
    left: calc(-0.5 *  #{$size});
  }
  .wall2 {
    right: calc(-0.5 *  #{$size});
  }
}

.doorWrapper {
  height: calc(#{$floorH} - #{$size2});
  width: 33%;
  background: $door;
  position: absolute;
  bottom: calc(8 * #{$size});
  right:0;
  border: calc(2.5 * #{$size}) solid $basement;
  border-top-width: $size3;
  border-bottom: 0;
  display: flex;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    height: $size;
    background: darken($door, 12);
  }
.topLight {
  position: absolute;
  width: 70%;
  margin: 0 auto;
  top:calc(1.5 * #{$size});
  left:0;
  right:0;
  background: linear-gradient(90deg,$windowLight, $windowLight, 21%, transparent 21%, transparent 33.3%, $windowLightDark 33.3%, $windowLightDark 67%, transparent 67%, transparent 73%, $windowLight 81%, $windowLight 100%);
  height: $size;
}
.cornice {
  position: absolute;
  width: $size4;
  height: $size;
  background: lighten($basement, 10);
  &:before {
    content: '';
    position: absolute;
    top: calc(1 * #{$size});
    border-top: $size solid darken($basement, 10);
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    height: 0;
    width: $size2;
  }
}

.cornice1 {
  left: calc(-3 * #{$size});
}
.cornice2 {
  right: calc(-3 * #{$size});
}
  .handrail {
    position: absolute;
    width: 100%;
    bottom:0;
    .right {
      height: calc(6 * #{$size});
      width: $size;
      background: $door2;
      display: block;
      position: absolute;
      right: calc(-1.75 * #{$size});
      bottom:0;
      &:before {
        content: '';
        width: calc(1.5 * #{$size});
        height: calc(1.5 * #{$size});
        border-radius: 100%;
        background: $door2;
        position: absolute;
        right: calc(-0.25 * #{$size});
      }
    }
    .left {
      height: calc(6 * #{$size});
      width: $size;
      background: $door2;
      display: block;
      position: absolute;
      left: calc(-1.75 * #{$size});
      bottom:0;
      &:before {
        content: '';
        width: calc(1.5 * #{$size});
        height: calc(1.5 * #{$size});
        border-radius: 100%;
        background: $door2;
        position: absolute;
        top:0;
        left: calc(-0.25 * #{$size});
      }
    }
  }
  .door {
    width: 70%;
    margin: auto auto 0 auto;
    height: 80%;
    background: $door;
    border: $size2 solid $door2;
    border-bottom-width: $size2;
    border-top-width: $size2;
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: 40%;
      left:0;
      right:0;
      margin: 0 auto;
      background: $door2;
      width: $size;
      height: $size;
      border-radius: 50%;
      
    }
  }
}

.balcony {
  position: absolute;
  bottom: calc(-1 * #{$size});
  left:calc(-9 * #{$size});
  width: calc(9 * #{$size});
  height: $size;
  background: $brick3;
  .grid {
    position: absolute;
    left:0;
    bottom: $size2;
    width: calc(9 * #{$size});
    height:calc(7 * #{$size});
    background-image: linear-gradient(90deg, $metal 16.67%, $bg 16.67%, $bg 50%, $metal 50%, $metal 66.67%, $bg 66.67%, $bg 100%);
background-size: calc(6 * #{$size05});
    span {
       width: calc(0.5 * #{$size});
        height:calc(1 * #{$size});
      display: block;
      background: $metal;
      position: absolute;
      bottom:calc(-1 * #{$size});
    }
    &:before {
      content: '';
      position: absolute;
      left:0;
      top:0;
      width: calc(9 * #{$size});
      height: $size05;
      background: $metal;
    }
    &:after {
      content: '';
      position: absolute;
      left:0;
      bottom:0;
      width: calc(9 * #{$size});
      height: $size05;
      background: $metal;
    }
  }
  .flower {
    width: $size2;
    height: $size;
    background: $basement;
    position: absolute;
    top: calc(-9 * #{$size});
    &:before {
      content: '';
      width: $size3;
      height: $size3;
      transform: rotate(-45deg);
      position: absolute;
      top: calc(-4.5 * #{$size});
      right: calc(-0.5 * #{$size});
      background: $plant1;
    }
  }
}

.ladder {
  width: calc(4 * #{$size});
  height: calc(1.7 * #{$floorH});
  position: absolute;
  left: calc(-4 * #{$size});
  bottom: 13vmin;
  background-image: linear-gradient(0deg, $metal 16.67%, $bg 16.67%, $bg 50%, $metal 50%, $metal 66.67%, $bg 66.67%, $bg 100%);
background-size: calc(10 * #{$size05}) calc(10 * #{$size05});
  z-index: -1;
  &:before {
    content: '';
    position: absolute;
    top:0;
    left:0;
    background: $metal;
    height: 105%;
    width: $size05;
  }
}

.tree {
  position: absolute;
  width:  calc(6 * #{$size});
  height:  calc(8 * #{$size});
  background: linear-gradient(90deg, $plant1, $plant1 50%, $plant2 50%);
  &:before {
   content: '';
   position: absolute;
   width: $size4;
   height: $size2;
   background: $plant2;
   left: calc(1 * #{$size});
   top: calc(-2 * #{$size});
  }
  &:after {
   content: '';
   position: absolute;
   width: $size4;
   height: $size2;
   background: $plant3;
   left: calc(1 * #{$size});
   bottom: calc(-2 * #{$size});
  }
  .trunk {
    width: $size;
    height: $size4;
    background: #fff;
    position: absolute;
    bottom: calc(-6 * #{$size});
    left: calc(2.5 * #{$size});
  }
  .pot {
    width: $size4;
    height: $size;
    background: $plant1;
    position: absolute;
    bottom: calc(-6.5 * #{$size});
    left: calc(1 * #{$size});
    &:before {
      content: '';
      position: absolute;
      height: $size2;
      width: calc(5 * #{$size});
      background: $metal;
      bottom: calc(-2 * #{$size});
      left:calc(-0.5 * #{$size});
    }
  }
}

.tree1 {
   top: calc(-8.5 * #{$size});
  right: calc(-7 * #{$size});
}

.tree2 {
   top: calc(-8.5 * #{$size});
   right: calc(14 * #{$size});
}

.hydrant {
  position: absolute;
  left:calc(-7 * #{$size});
  bottom: $size05;
  width: $size3;
  height: calc(4 * #{$size});
  background: darken($hydrant, 10);
  border: $size solid $hydrant;
  &:before {
    content: '';
    position: absolute;
    bottom: calc(-1.5 * #{$size});
    left: calc(-1.5 * #{$size});
    width: $size4;
    height: $size05;
    background: $hydrant;
  }
  &:after {
    content: '';
    position: absolute;
    top: calc(-1.5 * #{$size});
    left: calc(-1.5 * #{$size});
    width: $size4;
    height: $size;
    background: $hydrant;
  }
  span {    
    position: absolute;
    top: calc(-2.5 * #{$size});
    left: calc(-0.5 * #{$size});
    width: calc(2 * #{$size});
    height: calc(2 * #{$size});
    border-radius: 50%;
    background: darken($hydrant, 10);
    &:before {
        content: "";
        position: absolute;
        width: calc(0.5 *  #{$size});
        height: calc(0.5 *  #{$size});
        background: #D65859;
        right: calc(0.8 *  #{$size});
        top: calc(-0.5 *  #{$size});
    }
  }
}

.fence {
  display: flex;
  position: absolute;
  bottom: 0;
  left:calc(-2 *  #{$size});
}

.fenceSpan {
  width: calc(5.5 *  #{$size});
  height: calc(4 *  #{$size});
  border: $size05 solid $door2;
  border-bottom: none;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: calc(5.5 *  #{$size});
    left: calc(-0.5 *  #{$size});
    top: calc(2 *  #{$size});
    height: $size05;
    background: $door2;
  }
   &:after {
    content: '';
    position: absolute;
    width: $size05;
    left: calc(2 *  #{$size});
    top: calc(-0.5 *  #{$size});
    height: calc(3 *  #{$size});
    background: $door2;
  }
}

.ground {
  width: 100%;
  height: calc(8 * #{$size});
  background: linear-gradient(lighten($metal,30), lighten($metal,30) 2vmin, $metal 2vmin);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.