Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens


+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens


+ add another resource


Add Packages



Save Automatically?


Auto-Updating Preview


Format on Save


Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.




                @import url(,300);

html, body, .wrap {
	height: 100%;

body {
	background: black;
	overflow: hidden;
	color: white;
	font-family: Open sans;

.wrap {
	max-width: 800px;
	margin: 0 auto;

h1 {
	position: relative;
	perspective: 500px;
	top: 50%;
	padding: 0 20px;
	transform: translateY(-50%);
	font-weight: 300;
	span {
		opacity: 0;


                // Quotes about learning from goodreads --

var quotes = [
	"“Wisdom is not a product of schooling but of the lifelong attempt to acquire it.”  <br><br>— Albert Einstein",
	"“Live as if you were to die tomorrow. Learn as if you were to live forever.” <br><br>—  Mahatma Gandhi",
	"“Tell me and I forget, teach me and I may remember, involve me and I learn.” <br><br>— Benjamin Franklin",
	"“Study hard what interests you the most in the most undisciplined, irreverent and original manner possible.”<br><br>— Richard Feynman",
	"“It is important that students bring a certain ragamuffin, barefoot irreverence to their studies; they are not here to worship what is known, but to question it.”  <br><br>—  Jacob Bronowski"

var index = 0;
var max = quotes.length - 1;
var delay = .02;

function random(min, max){
	return (Math.random() * (max - min)) + min;

function cycleQuotes(arr, i, sel){
	var el = $(sel);
	var message = arr[i];
	var split = new SplitText(el);
	var time = split.chars.length * delay;
		TweenMax.from($(this), time, {
			opacity: 0,
			x: 0,
			y: random(-200, 200),
			z: random(500, 1000),
			// scale: .1,
			delay: i * delay,
			yoyo: true,
			repeat: -1,
			repeatDelay: time * 4,
			ease: Power1.easeOut
	index = index == max ?  0 : (index + 1);

		cycleQuotes(quotes, index, ".split");
	}, ((time * 4) + (time * 4)) * 1000);

	cycleQuotes(quotes, index, ".split");