<div class='wrapper'>
<div class='bottom'>
<p>
No more cards!
</p>
</div>
<input type='checkbox' checked />
<article>
<p>
If you have 3 quarters, 4 dimes, and 4 pennies, you have $1.19. You also have the largest amount of money in coins without being able to make change for a dollar.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
The numbers '172' can be found on the back of the U.S. $5 dollar bill in the bushes at the base of the Lincoln Memorial.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
President Kennedy was the fastest random speaker in the world with upwards of 350 words per minute.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
In the average lifetime, a person will walk the equivalent of 5 times around the equator.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
Odontophobia is the fear of teeth.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
The 57 on Heinz ketchup bottles represents the number of varieties of pickles the company once had.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
In the early days of the telephone, operators would pick up a call and use the phrase, "Well, are you there?". It wasn't until 1895 that someone suggested answering the phone with the phrase "number please?"
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
The surface area of an average-sized brick is 79 cm squared.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
According to suicide statistics, Monday is the favored day for self-destruction.
</p>
</article>
<input type='checkbox' checked />
<article>
<p>
Cats sleep 16 to 18 hours per day.
</p>
</article>
<div id='next-btn'>Next</div>
</div>
*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
body{
display: flex;
background: #eee;
color: #212121;
justify-content: center;
align-items: center;
font: 20px/1.7 'RobotoDraft', sans-serif;
}
.wrapper{
position: relative;
width: 960px;
height: 128px;
}
input{
position: absolute;
margin: 0 auto;
bottom: -64px;
left: 0;
right: 0;
width: 96px;
height: 48px;
cursor: pointer;
}
input:hover ~ #next-btn{ background: #1E88E5; }
input:active ~ #next-btn{ background: #1976D2; }
input:not(:checked){ display: none; }
p{
margin: 0;
text-align: justify;
}
input:not(:checked) + article{ animation: out 400ms cubic-bezier(.4,.0,.23,1) forwards; }
article{
display: flex;
position: absolute;
align-items: center;
background: #fff;
width: 100%;
height: 128px;
padding: 0 24px;
box-shadow: 0 1px 2px rgba(0,0,0,.08);
border-radius: 2px;
}
.bottom{
display: flex;
position: absolute;
justify-content: center;
align-items: center;
width: 100%;
height: 128px;
}
.bottom > p{
font-size: 2em;
color: #c7c7c7;
text-shadow: 0 -1px 0 #999;
user-select: none;
cursor: default;
}
input:checked ~ #next-btn{ display: flex; }
#next-btn{
position: absolute;
display: none;
justify-content: center;
align-items: center;
color: #fff;
background: #2196F3;
width: 96px;
height: 48px;
left: 0;
right: 0;
bottom: -64px;
margin: 0 auto;
text-align: center;
pointer-events: none;
}
#next-btn:after{
content: counter(num) " left";
position: absolute;
width: 100%;
left: 96px;
color: #888;
}
input:checked{ counter-increment: num; }
@keyframes out{
0%{ transform: translate3d(0,0,0) scale(1); }
33%{ transform: translate3d(0,0,0) scale(1.25); box-shadow: 0 32px 32px rgba(0,0,0,.16); }
100%{ transform: translate3d(0,calc(-50vh - 100%),0); }
}
This Pen doesn't use any external CSS resources.