<div class="container">
  <div class="border">
    <div class="door">
      <div class="glass"></div>
    </div>
  </div>
</div>

*{
  margin:0;
}

:root{
  --bg : #60a3bc;
  --border : #9e5424;
  --door: #aa6639;
  --glass: #84c7e7;
  --reflect: #b1daee;
  --handle :#fce9b2;
  --shadow : #6f3f24;
}

body{
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  background: var(--bg);
}

.border{
  width:18vw;
  height:35vw;
  background:var(--border);
  position:relative;
  display:flex;
  justify-content:center;
  box-shadow:inset -.3vw .3vw var(--shadow);
  
}

.border::before{
  content:'';
  width:18.4vw;
  height:1.5vw;
  position: absolute;
  top:-1.5vw;
  background:var(--border);
  box-shadow:.5vw 0 var(--shadow);
}

.door{
  width: 15vw;
  height: 32vw;
  background: var(--door);
  position:absolute;
  bottom:1.5vw;
    display:flex;
  justify-content:center;
  box-shadow: inset 0 0 0 .3vw  var(--shadow);
}

.door::before{
  content:'';
  position:absolute;
  width: 10vw;
  height: 10vw;
  bottom:2vw;
  border-top: .5vw solid #9d5524;
  border-left: .5vw solid #9d5524;
  border-right: .5vw solid #bc825b;
  border-bottom: .5vw solid #bc825b;
}

.door::after{
  content:'';
  background:var(--handle);
  position:absolute;
  left:.8vw;
  bottom:13.5vw;
  width:1.5vw;
  height:1.5vw;
  border-radius:50%;
  box-shadow: inset -.2vw -.2vw #d1a369;
}



.glass{
  position:absolute;
  top:2vw;
  height:14vw;
  width:9vw;
  background:var(--glass);
  border-top: .5vw solid #9d5524;
  border-left: .5vw solid #9d5524;
  border-right: .5vw solid #bc825b;
  border-bottom: .5vw solid #bc825b;
  overflow:hidden;
}

.glass::before, .glass::after{
  position:absolute;
  content:'';
  background:var(--reflect);
  width:20vw;
  transform:rotate(-45deg);
}

.glass::before{
  top:1vw;
  left:-6vw;
  height:6vw;
}

.glass::after{
  top:8vw;
  left:0vw;
  height:3vw;
}