style.css

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  perspective: 600px;
  background-color: #ffffff;
  overflow: hidden;
}

.vs-code {
  width: 200px;
  height: 400px;
  margin: 100px auto;

  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

.vs-code-logo {
  width: 100%;
  height: 100%;
  position: relative;

  background-color: #3fa5e2;
  box-shadow: -40px 0 30px -35px rgba(0, 0, 0, 0.3);
  border-radius: 0 10px 10px 0;

  transform: translateZ(100px);
  transform-style: preserve-3d;
}

.vs-code-logo:before,
.vs-code-logo:after {
  content: '';
  display: block;
  width: 100%;
  height: 200%;

  background-color: #0877b9;

  position: absolute;
}

.vs-code-logo:before {
  border-radius: 0 0 20px 20px;

  top: 0;
  transform: rotateX(-65deg) skewY(20deg);
  transform-origin: left top;
}

.vs-code-logo:after {
  border-radius: 20px 20px 0 0;
  box-shadow: -30px 0 30px -35px rgba(0, 0, 0, 0.3);

  bottom: 0;
  transform: rotateX(65deg) skewY(-20deg);
  transform-origin: left bottom;
}
h1 {
  font-size: 60px;
  font-family: Arial;
  text-align: center;
  position: relative;
  bottom: 2pc;
  background: linear-gradient(#3fa5e2, #0877b9);
  -webkit-background-clip: text;
  color: transparent;
}