<div class="console">
  <div class="close"></div>
  <div class="minimize"></div>
  <div class="expand"></div>
  <div class="wrapper">
    <div class="first">
      <h1>$ npm install ng-bolt-cli -g</h1>
    </div>
    <div class="second">
      <h1>$ bolt new helloWorld</h1>
    </div>
    <div class="third">
      <h1>$ cd helloWorld</h1>
    </div>
    <div class="forth">
      <h1>$ bolt run</h1>
    </div>
  </div>
</div>

<div class="app">
  <div class="toolbar">
    <div class="appName">
      <h2>helloWorld</h2>
    </div>
  </div>
  <div class="boltLogo">
  </div>
  <div class="login">
    <div class="username">
      <h3>username:</h3>
      <div class="userField"></div>
    </div>
    <div class="password">
      <h3>password:</h3>
      <div class="passField"></div>
    </div>
  </div>
</div>
 /* GLOBAL STYLES */
body {
  background: #3498db;
}

.app {
  position: relative;
  top: -41.1rem;
  left: 21rem;
  
  border-radius: 0.75rem;
  border-top: 2.5rem solid #e6e9ea;
  margin: 5rem auto;
  width: 24rem;
  height: 32rem;
  background: #f2f2f2; /* #869198 */
  font-weight: 100;
  box-shadow: 0rem 0rem 1.5rem rgba(0, 0, 0, 0.4);
  
  visibility: hidden;
  animation: appAppear 0.4s, fadeIn 0s;
  animation-delay: 4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.45,.01,.63,1.21);
}

.toolbar {
  width: 35rem;
  margin-top: -2.1rem;
  margin-left: 0.8rem;
  
  visibility: hidden;
  animation: appNameLeft 0.3s, fadeIn 02;
  animation-delay: 4.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.64,.01,.42,1);
}

.boltLogo {
  position: absolute;
  margin: auto;
  margin-top: 2.5rem;
  left: 0;
  right: 0;
  width: 208.25px;
  height: 208.25px;
  background-image: url('https://ngbolt.github.io/assets/logo.png');
  background-size: contain;
  background-position: center center;
  background-origin: center 5rem;
  
  visibility: hidden;
  animation: boltAppear 0.4s, fadeIn 0s;
  animation-delay: 4.5s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.43,.01,.24,1.25);
}

.login {
  width: 24rem;
  margin-top: 18rem;
  
  visibility: hidden;
  animation: boxDown 0.3s, fadeIn 0s;
  animation-delay: 4.6s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.43,.01,.24,1.25);
}

.userField {
  position: absolute;
  margin: auto;
  margin-top: -3.5rem;
  left: 0;
  right: 0;
  background: white;
  height: 2.5rem;
  width: 60%;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.passField {
  position: absolute;
  margin: auto;
  margin-top: -3.5rem;
  left: 0;
  right: 0;
  background: white;
  height: 2.5rem;
  width: 60%;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.console {
  position: relative;
  left: -6rem;
  
  border-radius: 0.75rem;
  border-top: 2.5rem solid #e6e9ea;
  margin: 5rem auto;
  width: 45rem;
  height: 35rem;
  background: #111111;
  font-weight: 100;
  box-shadow: 0rem 0rem 1.5rem rgba(0, 0, 0, 0.4);
}

.close {
  position: relative;
  float: left;
  height: 1.3rem;
  width: 1.3rem;
  top: -1.85rem;
  left: 1rem;
  background: #c0392b;
  border-radius: 1rem;
}

.minimize {
  position: relative;
  float: left;
  height: 1.3rem;
  width: 1.3rem;
  top: -1.85rem;
  left: 1.5rem;
  background: #f1c40f;
  border-radius: 1rem;
}

.expand {
  position: relative;
  float: left;
  height: 1.3rem;
  width: 1.3rem;
  top: -1.85rem;
  left: 2rem;
  background: #2ecc71;
  border-radius: 1rem;
}

.wrapper {
  width: 35rem;
  margin: 2rem;
}

.first {
  width: 35rem;
}

.second {
  width: 26.5rem;
}

.third {
  width: 19rem;
}

.forth {
  width: 12.5rem;
}

/* DEMO-SPECIFIC STYLES */
h1 {
  color: #e6e9ea;
  font-family: Inconsolata, monospace;
  font-size: 150%;
  font-weight: normal;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto 0 0;
  letter-spacing: .15em; /* Adjust as needed */
}

h2 {
  color: black;
  font-family: Roboto, sans-serif;
  font-weight: 200;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 0 0;
  letter-spacing: auto;
}

h3 {
  color: black;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto 3.5em 0;
  letter-spacing: auto;
  text-align: center;
}
wrapper > div:last-child {
  border-right: .15em solid #e6e9ea; /* The typwriter cursor */
}

.first h1 {
  width: 35rem;
  animation: typing 1.25s steps(29, end),
    blink-caret 1s step-end;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.29,.29,.75,1);
}

.second h1 {
  visibility: hidden;
  animation: typing 1s steps(22, end),
    0s fadeIn,
    blink-caret 1s step-end;
  animation-delay: 1.3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.29,.29,.75,1);
}

.third h1 {
  visibility: hidden;
  animation: typing 0.8s steps(16, end),
    0s fadeIn,
    blink-caret 1s step-end;
  animation-delay: 2.4s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.29,.29,.75,1);
}

.forth h1 {
  visibility: hidden;
  animation: typing 0.6s steps(11, end),
    0s fadeIn,
    blink-caret 1s step-end infinite;
  animation-delay: 3.3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.29,.29,.75,1);
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 101% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #e6e9ea }
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

/* App window popup */
@keyframes appAppear {
  0% {
    height: 0;
    width: 0;
  }
  50% {
    height: 2.5rem;
    width: 24rem;
  }
  100% {
    height: 32rem;
    width: 24rem;
  }
}

/* Bolt scale */
@keyframes boltAppear {
  0% {
    height: 0;
    width: 0;
  }
  100% {
    height: 208.25;
    width: 208.25;
  }
}

/* Application name moves left */
@keyframes appNameLeft {
  0% {
    margin-left: 1.2rem;
    opacity: 0%
  }
  100% {
    margin-left: 0.8rem;
    opacity: 100%;
  }
}

/* Boxes move downward */
@keyframes boxDown {
  0% {
    margin-top: 15rem;
    opacity: 0%;
  }
  100% {
    margin-top: 18rem;
    opacity: 100%
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.