Skip to content

Instantly share code, notes, and snippets.

@califat
Forked from anonymous/index.html
Created May 18, 2017 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save califat/92ab70540e818311d087d364da40085c to your computer and use it in GitHub Desktop.
Save califat/92ab70540e818311d087d364da40085c to your computer and use it in GitHub Desktop.
Ugly Thing
<div id="content">
<span class="expand">
Oh well, heil Hitler, bitch! And let me tell you something else. So what're you saying? Like, I shot someone with, like, a gun? We flipped a coin, okay? You and me. You and me! Coin flip is sacred!
</span>
</div>
<div id="content">
<span class="expand">
Your job is waiting for you in that basement, as per the coin! I took this vo-tech class in high school, woodworking. I took a lot of vo-tech classes, because it was just big jerk-off, but this one time I had
</span>
</div>
<div id="content">
<span class="expand">
this teacher by the name of... Mr... Mr. Pike. I guess he was like a Marine or something before he got old. He was hard hearing. My project for his class was to make this wooden box. You know, like
</span>
</div>
<div id="content">
<span class="expand">
a small, just like a... like a box, you know, to put stuff in. So I wanted to get the thing done as fast as possible. I figured I could cut classes for the rest of the semester and he couldn't flunk me as long
</span>
</div>
<div id="content">
<span class="expand">
as I, you know, made the thing. So I finished it in a couple days. And it looked pretty lame, but it worked. You know, for putting in or whatnot. So when I showed it to Mr. Pike for my grade, he
</span>
</div>
<div id="content">
<span class="expand">
looked at it and said: 'Is that the best you can do?' At first I thought to myself 'Hell yeah, bitch. Now give me a D and shut up so I can go blaze one with my boys.' I don't know. Maybe it was the way he
</span>
</div>
<div id="content">
<span class="expand">
said it, but... it was like he wasn't exactly saying it sucked. He was just asking me honestly, 'Is that all you got?' And for some reason, I thought to myself: 'Yeah, man, I can do better.'
</span>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
html, body{
background: black;
}
#content {
width: 100%;
/* Full Width */
height: 7px;
margin: 50px auto;
background: #000;
}
.expand {
width: 97%;
height: 58px;
margin: 2px 0;
background: #2187e7;
position: absolute;
box-shadow: 0px 0px 20px 2px rgba(0,198,255,0.8);
-webkit-animation: fullexpand 3s ease-out forwards;
color: rgba(0, 0, 0, 0);
}
@-webkit-keyframes fullexpand {
0% {
width: 0px;
height: 3px;
}
90% {
width: 97%;
height: 3px;
box-shadow: 0px 0px 20px 2px rgba(0,198,255,0.8);
color: rgba(0, 0, 0, 0);
}
100%{
height: 58px;
box-shadow: 0px 0px 0px;
color: rgba(0, 0, 0, 1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment