CSS изображение для ноутбука

<div class="container">
  <div class="screen"></div>
  <div class="base"></div>
  <div class="browser"></div>
  <div class="codepen-main"></div>
  <div class="lines"></div>
  <div class="text"></div>
  <div class="buttons"></div>
  <div class="profile"></div>
  <div class="image"></div>
  <div class="logo"></div>
</div>

<style type="text/css">
  * {
  box-sizing: border-box;
  }
   
  body {
  background: #695869;
  }
   
  .container {
  position: relative;
  height: 500px;
  width: 600px;
  margin: 5% auto;
  }
   
  .screen,
  .base,
  .codepen-main,
  .lines,
  .text,
  .browser,
  .buttons,
  .image,
  .logo,
  .profile {
  position: absolute;
  }
   
  .screen {
  top: 13%;
  left: 5%;
  height: 70%;
  width: 90%;
  border-radius: 20px;
  border: 3px solid #ccc1cc;
  background: #eeebee;
  }
   
  .screen:before {
  position: absolute;
  content: '';
  top: 7%;
  left: 4%;
  height: 80%;
  width: 88%;
  background: #9d8a9d;
  border: 10px solid #b4a6b4;
  border-radius: 5px;
  }
   
  .screen:after {
  position: absolute;
  content: '';
  top: 2%;
  left: 49%;
  height: 3%;
  width: 2%;
  background: #9d8a9d;
  border-radius: 50%;
  }
   
  .base {
  top: 81%;
  left: -2.5%;
  height: 5.5%;
  width: 105%;
  border-radius: 0 0 20px 20px;
  border: 3px solid #ccc1cc;
  background: #eeebee;
  }
   
  .base:before {
  position: absolute;
  content: '';
  left: 42.5%;
  height: 60%;
  width: 15%;
  background: #ccc1cc;
  border-radius: 0 0 20px 20px;
  }
   
  .browser {
  top: 25%;
  left: 17.5%;
  height: 45%;
  width: 65%;
  background: #FAF9FA;
  border-radius: 5px;
  }
   
  .browser:before {
  position: absolute;
  content: '';
  height: 7%;
  width: 100%;
  background: #ccc1cc;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 12px 0 #eae6ea;
  }
   
  .browser:after {
  position: absolute;
  content: '';
  top: 2%;
  left: 10%;
  height: 7%;
  width: 15%;
  background: #eae6ea;
  border-radius: 5px 5px 0 0;
  }
   
  .codepen-main {
  top: 30%;
  left: 17.5%;
  height: 40%;
  width: 65%;
  background: #616161;
  border-radius: 0 0 5px 5px;
  }
   
  .codepen-main:before {
  position: absolute;
  content: '';
  height: 12%;
  width: 100%;
  background: #2e2e2e;
  }
   
  .codepen-main:after {
  position: absolute;
  content: '';
  top: 12%;
  height: 88%;
  width: 40%;
  background: #484848;
  }
   
  .lines {
  top: 45%;
  left: 17.5%;
  height: .4%;
  width: 26%;
  background: #7b7b7b;
  }
   
  .lines:before {
  position: absolute;
  content: '';
  top: 4200%;
  height: 100%;
  width: 100%;
  background: #7b7b7b;
  }
   
  .text {
  top: 36%;
  left: 20%;
  height: 1.5%;
  width: 5%;
  background: #FAFAFA;
  border-radius: 5px;
  box-shadow: 0 33px 0 #FAFAFA, 0 52px 0 #7E7F9A, 0 74px 0 #EB9486, 0 107px 0 #F3DE8A;
  }
   
  .text:before {
  position: absolute;
  content: '';
  top: 150%;
  height: 100%;
  width: 150%;
  background: #97A7B3;
  border-radius: 5px;
  box-shadow: 0 52px 0 #F3DE8A, 0 85px 0 #97A7B3, 0 125px 0 #FAFAFA, 0 146px 0 #7E7F9A;
  }
   
  .text:after {
  position: absolute;
  content: '';
  top: 291%;
  height: 100%;
  width: 230%;
  background: #F3DE8A;
  border-radius: 5px;
  box-shadow: 0 63px 0 #FAFAFA, 0 96px 0 #EB9486, 0 125px 0 #F3DE8A;
  }
   
  .buttons {
  top: 30.9%;
  left: 60%;
  height: 3.2%;
  width: 5.3%;
  border-radius: 5%;
  background: #7b7b7b;
  }
   
  .buttons:before,
  .buttons:after {
  position: absolute;
  content: '';
  width: 110%;
  height: 100%;
  border-radius: 5%;
  background: #7b7b7b;
  }
   
  .buttons:before {
  left: 110%;
  }
   
  .buttons:after {
  left: 230%;
  }
   
  .profile {
  top: 30.9%;
  left: 78.6%;
  height: 3.2%;
  width: 3.2%;
  background: #e1e1e1;
  border-radius: 5%;
  }
   
  .image {
  top: 43%;
  left: 55%;
  height: 17%;
  width: 15%;
  background: #F3DE8A;
  border-radius: 50%;
  }
   
  .image:before {
  position: absolute;
  content: '';
  top: 30%;
  left: 15%;
  height: 20%;
  width: 20%;
  border-radius: 50%;
  background: #3b3b3b;
  box-shadow: 45px 0 0 #3b3b3b;
  }
   
  .image:after {
  position: absolute;
  content: '';
  top: 65%;
  left: 35%;
  height: 20%;
  width: 30%;
  border-radius: 0 0 20px 20px;
  background: #3b3b3b;
  }
   
  .logo {
  top: 31%;
  left: 20%;
  height: 1.9%;
  width: 1.4%;
  border: 2px solid white;
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  -moz-transform: rotate(35deg);
  transform: rotate(35deg);
  }
   
  .logo:before {
  position: absolute;
  content: '';
  top: -20%;
  left: 15%;
  height: 100%;
  width: 100%;
  border: 2px solid white;
  }
</style>