SOURCE

<div class="container">
  <div class="shell-container">
    <div class="header-shell">
      <img class="cli-img" src="https://upload.wikimedia.org/wikipedia/en/e/ef/Command_prompt_icon_%28windows%29.png" alt="windows_cli.png" />
      <p class="shell-title">C:\\Windows\system32\cmd.exe</p>
      <span class="minimize"></span>
      <span class="maximize"></span>
      <span class="close"></span>
    </div>
    <div class="body-shell">
    <p class="microsoft-label">Microsoft Windows [version 10.0.10586]</p>
    <p class="microsoft-label">(c) 2015 Microsoft Corporation. All rights reserved.</p>
      <p class="input">C:\Users\Guest> jsrun 真 会 玩 !  <span class="ping"></span> </p>    
    </div>
  </div>
</div>

@import 'https://fonts.googleapis.com/css?family=Inconsolata|Merriweather';
$green: #00FF00;
$black: #000000;
$background: #028090;
$gray: #DFDFDF;
$red: #FF0000;
$white: #FFFFFF;
html {
  background-color: $background;
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: 'Merriweather', serif;
    color: $green;
  }
  p,
  input,
  select,
  button {
    font-family: 'Inconsolata', monospace;
    color: $green;
  }
}

.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  .shell-container {
    margin: auto;
    background-color: $black;
    width: 900px;
    height: 500px;
    box-shadow: 0 0 10px $black;
    display: flex;
    flex-direction: column;
    .header-shell{
      margin: auto;
      background-color: white;
      width: 100%;
      height: 35px;
      display: flex;
      .cli-img{
        margin: auto 5px;
        width: 20px;
        height: 20px;
      }
      .shell-title{
        font-size: 13px;
        margin: auto 0;
        color: $black;
      }
      .minimize{
        margin: 1px 1px 1px auto;
        width: 35px;
        height: 33px;
        display: flex;
        &:hover{
          background-color: $gray;
          color: $white;
        }
        &:after{
          content: '';
          transform: rotate(90deg);
          margin: auto;
          border: 1px solid gray;
          height: 10px;
        }
        &:hover:after{
          border-color: $black;
        }
      }
       .maximize{
        display: flex;
        margin: 1px 0;
        width: 35px;
        height: 33px;
        content: "-";
        &:hover{
          background-color: $gray;
          color: $white;
        }
        &:after{
          content: '';
          transform: rotate(90deg);
          margin: auto;
          border: 1.5px solid gray;
          height: 7.5px;
          width: 7.5px;
        }
        &:hover:after{
          border-color: $black;
        }
      }
      .close{
        display: flex;
        margin: 1px;
        width: 35px;
        height: 33px;
        &:hover{
          background-color: $red;
          color: $white;
        }
        &:before{
          content: '';
          transform: rotate(-135deg) translate(-50%, 0%);
          margin: auto 0 auto auto;
          border: 1px solid gray;
          height: 11px;
        }
        &:hover:before{
          border-color: $white;
        }
        &:after{
          content: '';
          transform: rotate(135deg) translate(50%, 0%);
          margin: auto auto auto 0;
          border: 1px solid gray;
          height: 11px;
        }
        &:hover:after{
          border-color: $white;
        }
      }
    }
    .body-shell{
      margin: auto;
      overflow-y: scroll;
      height: 470px;
      width: 100%;
      line-height: 0px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      .microsoft-label{
        margin: 9px 0;
      }
      .input{
        margin-top: 25px;
        display: flex;
        .ping{
          margin: auto 2px -5px;
          width: 7px;
          height: 4px;
          animation: pong 1s infinite;
        }
      }
    }
    @keyframes pong {
      0%{background-color: $gray;}
      50%{background-color: $gray;}
      51%{background-color: $black;}
    }
  }
}