shafaat.in/css/terminal.css

.fakeTerminal{
    margin-top: 25px;    
}

.fakeButtons {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 1px solid #000;
    position: relative;
    top: 6px;
    left: 6px;
    background-color: #ff3b47;
    border-color: #9d252b;
    display: inline-block;
  }
  
  .fakeMinimize {
    left: 11px;
    background-color: #ffc100;
    border-color: #9d802c;
  }
  
  .fakeZoom {
    left: 16px;
    background-color: #00d742;
    border-color: #049931;
  }
  
  .fakeMenu {
    max-width: 350px;
    box-sizing: border-box;
    height: 25px;
    background-color: #bbb;
    /* margin: 0 auto; */
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  
  .fakeScreen {
    background-color: #151515;
    /* box-sizing: border-box; */
    max-width: 350px;
    /* margin: 0 auto; */
    padding: 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .fakeTerminal p{
    position: relative;
    left: 50%;
    margin-left: -8.5em;
    text-align: left;
    font-size: 1.25em;
    font-family: monospace;
    white-space: normal;
    overflow: hidden;
    width: 0;
  }

  
  /* .fakeTerminal span {
    color: #fff;
    font-weight: bold;
  } */
  
  .line1 {
    color: #9CD9F0;
    -webkit-animation: type .0s 0s steps(20, end) forwards;
    -moz-animation: type .0s 0s steps(20, end) forwards;
    -o-animation: type .0s 0s steps(20, end) forwards;
    animation: type .0s 0s steps(20, end) forwards;
  }
  
  .cursor1 {
    -webkit-animation: blink 1s 2s 2 forwards;
    -moz-animation: blink 1s 2s 2 forwards;
    -o-animation: blink 1s 2s 2 forwards;
    animation: blink 1s 2s 2 forwards;
  }

    
  .line2 {
    color: #9CD9F0;
    -webkit-animation: type .0s 1s steps(20, end) forwards;
    -moz-animation: type .5s 1s steps(20, end) forwards;
    -o-animation: type .5s 1s steps(20, end) forwards;
    animation: type .5s 1s steps(20, end) forwards;
  }
  
  /* .line2 {
    color: #CDEE69;
    -webkit-animation: type .5s 4.25s steps(20, end) forwards;
    -moz-animation: type .5s 4.25s steps(20, end) forwards;
    -o-animation: type .5s 4.25s steps(20, end) forwards;
    animation: type .5s 4.25s steps(20, end) forwards;
  } */
  
  .cursor2 {
    -webkit-animation: blink 1s 5.25s 2 forwards;
    -moz-animation: blink 1s 5.25s 2 forwards;
    -o-animation: blink 1s 5.25s 2 forwards;
    animation: blink 1s 5.25s 2 forwards;
  }
  
  .line3 {
    color: #E09690;
    -webkit-animation: type .5s 7.5s steps(20, end) forwards;
    -moz-animation: type .5s 7.5s steps(20, end) forwards;
    -o-animation: type .5s 7.5s steps(20, end) forwards;
    animation: type .5s 7.5s steps(20, end) forwards;
  }
  
  .cursor3 {
    -webkit-animation: blink 1s 8.5s 2 forwards;
    -moz-animation: blink 1s 8.5s 2 forwards;
    -o-animation: blink 1s 8.5s 2 forwards;
    animation: blink 1s 8.5s 2 forwards;
  }
  
  .line4 {
    color: #fff;
    -webkit-animation: type .5s 10.75s steps(20, end) forwards;
    -moz-animation: type .5s 10.75s steps(20, end) forwards;
    -o-animation: type .5s 10.75s steps(20, end) forwards;
    animation: type .5s 10.75s steps(20, end) forwards;
  }
  
  /* .cursor4 {
    -webkit-animation: blink 1s 11.5s infinite;
    -moz-animation: blink 1s 8.5s infinite;
    -o-animation: blink 1s 8.5s infinite;
    animation: blink 1s 8.5s infinite;
  } */

  .cursor4 {
    -webkit-animation: blink 1s 0.5s infinite;
    -moz-animation: blink 1s 0.5s infinite;
    -o-animation: blink 1s 0.5s infinite;
    animation: blink 1s 0.5s infinite;
  }
  
  @-webkit-keyframes blink {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-moz-keyframes blink {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-o-keyframes blink {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes blink {
    0% {
      opacity: 0;
    }
    40% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes type {
    to {
      width: 17em;
    }
  }
  
  @-moz-keyframes type {
    to {
      width: 17em;
    }
  }
  
  @-o-keyframes type {
    to {
      width: 17em;
    }
  }
  
  @keyframes type {
    to {
      width: 17em;
    }
  }