about.html

<div id="main">
    <div class="fof">
            <h1>imgcurl</h1>
            <h3>What is this?</h3>
            <p> <code>imgcurl</code> allows you to curl any image and view it in your terminal.</p>
            <p>The image is reconstructed as a bunch of ANSI control characters and spaces and returned via the HTTP headers.</p>
            <h3>How do I use it?</h3>
            <p><code>curl -v imgcurl.samwheating.com?url=&lt;YOUR_URL&gt;</code></p>
    </div>
    <div class="footer">
        <p><a href="https://samwheating.com">(me)</a>    <a href="https://github.com/samwheating/imgcurl">(source)</a></p>
    </div>
</div>

<style>
    *{
    transition: all 0.6s;
}

html {
    height: 100%;
}

body{
    font-family: 'Lato', sans-serif;
    color: #444;
    margin: 0;
}

#main{
    display: block;
    width: 100%;
    height: 100vh;
    text-align: center;
}

.fof{
      padding-top: 10vh;
	  vertical-align: middle;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
}

h1{
	  font-size: 70px;
	  display: inline-block;
	  padding-right: 12px;
	  animation: type .5s alternate infinite;
}

h3{
	  font-size: 40px;
}

p{
      font-size: 30px;
	  display: block;
}

@keyframes type{
	  from{box-shadow: inset -3px 0px 0px #888;}
	  to{box-shadow: inset -3px 0px 0px transparent;}
}
</style>