cm85/Forgiveness Assist Command Line Message.markdown

## Forgiveness Assist Command Line Message.markdown

      
    Raw
  

              Forgiveness Assist Command Line Message.markdown
            
          
    Forgiveness Assist Command Line Message

Forgiveness Assist Advertisement Terminal Code Auto Typing
A Pen by Carlo Moscatiello on CodePen.
License.

  
## index.html
<html >
  <head>
    <meta charset="UTF-8">
    <title>Simple browser terminal view with css</title>


    <link rel="stylesheet" href="css/normalize.css">


        <link rel="stylesheet" href="css/style.css">


  </head>

  <body>

    <br />

<div class="window">
  <div class="terminal">
    <p class="command">Forgiveness Assist Student Loan Consolidating</p>
    <p class="log">
      <span>
        We Save Thousands of Dollars for People Like You Every Day<br />
        I Know It Sounds Too Good to Be True...<br />
        Let Us Help You Gain Financial Freedom<br />
        So Contact Us Right Away for Questions Before it's too Late!!!<br />
        Call Us Now at 1-800-757-5001
      </span>
    </p>
    <p class="command">Thank You!<br />
<a href="http://www.forgivenessassist.com">www.ForgivenessAssist.com</a><br />
<a href="mailto:info@forgivenessassist.com">info@forgivenessassist.com</a><br />
    </p>
  </div>
</div>


  </body>
</html>

## style.scss
.window {
  border-radius: 3px;
  background: #222;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 70%;

  &:before {
    content: ' ';
    display: block;
    height: 48px;
    background: #C6C6C6;
  }

  &:after {
    content: '. . .';
    position: absolute;
    left: 12px;
    right: 0;
    top: -3px;
    font-family: "Times New Roman", Times, serif;
    font-size: 96px;
    color: #fff;
    line-height: 0;
    letter-spacing: -12px;
  }
}

.terminal {
  margin: 20px;
  font-family: monospace;
  font-size: 16px;
  color: #22da26;

  .command {
    width: 0%;
    white-space: nowrap;
    overflow: hidden;
    animation: write-command 5s both;

    &:before {
      content: '$ ';
      color: #22da26;
    }
  }

  .log {
    white-space: nowrap;
    overflow: hidden;
    animation: write-log 5s both;
  }

  p:nth-child(2) {
    animation-delay: 2s;
  }

  p:nth-child(3) {
    animation-delay: 8s;
  }
}

@keyframes write-command {
  0% {
    width: 0%;
  }


  100% {
    width: 100%;
  }
}

@keyframes write-log {
  0% {
    height: 0;
  }

  16% {
    height: 0;
  }

  17% {
    height: 18px;
  }

  33% {
    height: 18px;
  }

  34% {
    height: 37px;
  }

  51% {
    height: 37px;
  }

  52% {
    height: 55px;
  }

  69% {
    height: 55px;
  }

  70% {
    height: 74px;
  }

  87% {
    height: 74px;
  }

  88% {
    height: 92px;
  }

  88% {
    height: 92px;
  }

  99% {
    height: 92px;
  }

  100% {
    height: 110px;
  }
}

## Terminal Banner.markdown

      
    Raw
  

              Terminal Banner.markdown
            
          
    Terminal Banner

Forgiveness Assist Advertisement Terminal Code Auto Typing
A Pen by Carlo Moscatiello on CodePen.
License.
	<html >
	<head>
	<meta charset="UTF-8">
	<title>Simple browser terminal view with css</title>


	<link rel="stylesheet" href="css/normalize.css">


	<link rel="stylesheet" href="css/style.css">




	</head>

	<body>

	<br />

	<div class="window">
	<div class="terminal">
	<p class="command">Forgiveness Assist Student Loan Consolidating</p>
	<p class="log">
	<span>
	We Save Thousands of Dollars for People Like You Every Day<br />
	I Know It Sounds Too Good to Be True...<br />
	Let Us Help You Gain Financial Freedom<br />
	So Contact Us Right Away for Questions Before it's too Late!!!<br />
	Call Us Now at 1-800-757-5001
	</span>
	</p>
	<p class="command">Thank You!<br />
	<a href="http://www.forgivenessassist.com">www.ForgivenessAssist.com</a><br />
	<a href="mailto:info@forgivenessassist.com">info@forgivenessassist.com</a><br />
	</p>
	</div>
	</div>





	</body>
	</html>
	.window {
	border-radius: 3px;
	background: #222;
	color: #fff;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	width: 70%;

	&:before {
	content: ' ';
	display: block;
	height: 48px;
	background: #C6C6C6;
	}

	&:after {
	content: '. . .';
	position: absolute;
	left: 12px;
	right: 0;
	top: -3px;
	font-family: "Times New Roman", Times, serif;
	font-size: 96px;
	color: #fff;
	line-height: 0;
	letter-spacing: -12px;
	}
	}

	.terminal {
	margin: 20px;
	font-family: monospace;
	font-size: 16px;
	color: #22da26;

	.command {
	width: 0%;
	white-space: nowrap;
	overflow: hidden;
	animation: write-command 5s both;

	&:before {
	content: '$ ';
	color: #22da26;
	}
	}

	.log {
	white-space: nowrap;
	overflow: hidden;
	animation: write-log 5s both;
	}

	p:nth-child(2) {
	animation-delay: 2s;
	}

	p:nth-child(3) {
	animation-delay: 8s;
	}
	}

	@keyframes write-command {
	0% {
	width: 0%;
	}


	100% {
	width: 100%;
	}
	}

	@keyframes write-log {
	0% {
	height: 0;
	}

	16% {
	height: 0;
	}

	17% {
	height: 18px;
	}

	33% {
	height: 18px;
	}

	34% {
	height: 37px;
	}

	51% {
	height: 37px;
	}

	52% {
	height: 55px;
	}

	69% {
	height: 55px;
	}

	70% {
	height: 74px;
	}

	87% {
	height: 74px;
	}

	88% {
	height: 92px;
	}

	88% {
	height: 92px;
	}

	99% {
	height: 92px;
	}

	100% {
	height: 110px;
	}
	}