<div class="computer">
  <div class="screen"></div>
  <div class="foot"></div>
</div>
*{
  margin:0;
}

body{
  background: #cbbfa7;
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.computer{
  width:35vw;
  background:#4a5362;
  height:20vw;
  position:relative;
  border-radius:2vw 2vw 0 0;
  display:flex;align-items:center; justify-content:center;
}

.computer::before{
  content:'';
  background: #fdfbe5;
  width:100%;
  position:absolute;
  bottom:-5vw;
  height:5vw;
  border-radius:0 0 2vw 2vw;
}


.computer::after{
  content:'';
  background: #6e7b84;
  width:1.5vw;
  height:1.5vw;
  position:absolute;
  bottom:calc(-5vw / 2 - 1.5vw / 2);
  left:50%;transform:translateX(-50%);
  border-radius:2vw;
}

.screen{
  background: #6e7b84;
  width:32vw;
  height:17vw;
  position:relative;
  overflow:hidden;
}

.screen::after{
  content:'';
  width:150%;
  height:100%;
  background:#626e7a;
  position:absolute;
  right:-75%;
  top:0;
  transform:rotate(45deg);
}

.foot{
  position:absolute;
  width:10vw;
  height:5vw;
  background:#6e7b84;
  bottom:-10vw;
  box-shadow:inset 0 1vw #626e7a;
}

.foot::before{
  content:'';
  background:#cbbfa7;
  position:absolute;
  bottom:1vw;
  width:1.5vw;
  height:4vw;
  border-radius:0 0 1.5vw 0;
}

.foot::after{
  content:'';
  background:#cbbfa7;
  position:absolute;
  bottom:1vw;
  right:0;
  width:1.5vw;
  height:4vw;
  border-radius:0 0 0 1.5vw;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.