<div class="house">
  <div class="face1">
    <div class="door"></div>
    <div class="recWindow window1"></div>
    <div class="recWindow window2"></div>
    <div class="circleWindow"></div>
  </div>
  <div class="face2">
  </div>
    <div class="roof"></div>
    <div class="roof2"></div>
</div>

* {
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  background:#222;
  justify-content: center;
  align-items: center;
  perspective: 10000px;
  perspective-origin: center -1000px;
  overflow: hidden;
  transform:scale(.5);
}

.house{
  position: relative;
	width: 20vw;
	transform-style: preserve-3d;
  transform:rotateY(-40deg) ;
}


 

.face1{
  width:25vw;
  height:20vw;
  background: #496fff;
  position:relative;
  transform:translateZ(10vw);
  
}

.face1::before, .face2::before{
  content:'';
  position:absolute;
  bottom:-5vw;
  width:100%;
  height:5vw;
  background:#3590fd;
}

.face1::after{
  content:'';
  position:absolute;
  border-bottom:10vw solid #496fff;
  border-left:12.5vw solid transparent;
  border-right:12.5vw solid transparent;
  width:0;
  height:0;
  top:-10vw;
}

.door{
  position:absolute;
  width:6vw;
  height:10vw;
  background:#dd3767;
  bottom:-5.1vw;
  border-radius:3vw 3vw 0 0;
  left:calc(50% - 3.1vw);
  box-shadow:.5vw -.1vw #7d1f6e;
}

.door::after{
  content:'';
  position:absolute;
  width:1vw;height:1vw;
  background:#e58db5;
  border-radius:50%;
  left:.5vw;
  bottom:calc(50% - .5vw);
  box-shadow: .3vw -.1vw #7d1f6e;
}

.recWindow{
  width: 4vw;
  height:7vw;
  position:absolute;
  border:.8vw solid #4a69ff;
  bottom:5vw;
  background:#e9edf5;
  box-shadow: .5vw -.1vw #2a44ec;
}

.recWindow::after{
  content:'';
  position:absolute;
  width:4.2vw;
  left:-.1vw;
  top:calc(50% - .2vw);
  height:.4vw;
  background:#4a69ff;
}

.window1{
  left:2vw;
}

.window2{
  right:2vw;
}

.circleWindow{
  position:absolute;
  width:5vw;
  border-radius:50%;
  height:5vw;
  background:#e9edf5;
  border:.8vw solid #4a69ff;
  box-shadow: .5vw -.1vw #2a44ec;  
  left:calc(50% - 3.2vw);
  display:flex; justify-content:center; align-items:center;
}

.circleWindow::before, .circleWindow::after{
  position:absolute;
  content:'';
  background: #4a69ff;
  
}

.circleWindow::before{
  width:.5vw;
  height:105%;
}

.circleWindow::after{
  width:105%;
  height:.5vw;
  left:0;
}

.face2{
  position:absolute;
  width:30vw;
  height:100%;
  right:-5vw;
  top:0;
  background:#3e5be5;
  transform:rotateY(90deg) translateX(20vw);
  transform-origin:top right;
}

.face2::after{
  background:#2e6dbc;
}

.roof{
  position:absolute;
  background:#fed55f;
  width:35vw;
  height:25vw;
  top:-10vw;
  transform: rotateY(90deg) rotateX(51deg) translateX(5vw) translateZ(7vw) translateY(1.25vw);
  box-shadow:-2vw .5vw #716740;
}

.roof2{
  position:absolute;
  background:#fed55f;
  width:35vw;
  height:25vw;
  top:-10vw;
  transform: rotateY(90deg) rotateX(-51deg) translateX(5vw) translateZ(-13vw) translateY(9vw);
  box-shadow: inset 5vw -6vw #716740;
}