Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!-- 
 
DON'T EDIT ANYTHING IN THE HTML PANEL

Step 1: 
Add your style and name to 
the array in the js panel.

Step 2.
Add your css class and styles to 
the CSS panel.

Step 3.
Use the slider at the top to 
select your layout

EXAMPLE:

in js you add the following to the styles array:
{ layout: {name: 'Best Layout', class: 'best'}, person: {name: 'Steve', twitter: 'steeevg'}},

then in the css panel you add your styles. 

.best{
	h1{
		color: blue;
	}
}

RULES:

Keep all your styles wrapped in your main class name
Don't edit others layouts
Have fun :)

-->

<div id="content">
	<header>
		<h1 class="title">Stax Records</h1>
		<p class="attribution">All content from <a href="https://en.wikipedia.org/wiki/Stax_Records" target="_blank">Wikipedia</a></p>
		<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/Stax-records-logo.jpg" alt="Stax Records Logo">
	</header>
	<div class="intro">
		<p><span class="stax">Stax Records</span> is an American record label, originally based in <a href="https://en.wikipedia.org/wiki/Memphis,_Tennessee" target="_blank">Memphis, Tennessee</a>. Founded in 1957 as Satellite Records, the label changed its name to <span class="stax">Stax Records</span> in 1961 and shared its operations with Volt Records, a sister label created to avoid the impression of favoritism among radio stations playing their records.</p>
	</div>
	<div class="details">
		<p><span class="stax">Stax</span> was influential in the creation of Southern soul and Memphis soul music. <span class="stax">Stax</span> also released gospel, funk, and blues recordings. Renowned for its output of blues music, the label was founded by two siblings and business partners, <a href="https://en.wikipedia.org/wiki/Jim_Stewart_(record_producer)" target="_blank">Jim Stewart</a> and his sister <a href="https://en.wikipedia.org/wiki/Estelle_Axton" target="_blank">Estelle Axton</a> (STewart/AXton = <span class="stax">Stax</span>). It featured several popular ethnically integrated bands (including the label's house band, <a href="https://en.wikipedia.org/wiki/Booker_T._%26_the_M.G.%27s" target="_blank">Booker T. & the M.G.'s</a>) and a racially integrated team of staff and artists unprecedented in that time of racial strife and tension in Memphis and the South. According to ethnomusicologist Rob Bowman, the label's use of "one studio, one equipment set-up, the same set of musicians and a small group of songwriters led to a readily identifiable sound. It was a sound based in black gospel, blues, country, and earlier forms of rhythm and blues. It became known as southern soul music."</p>
		<img class="artist booker" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/Booker_T._%26_the_M.G's.png" alt="Booker T. & the M.G.'s">
		<p>Following the death of <span class="stax">Stax's</span> biggest star, <a href="https://en.wikipedia.org/wiki/Otis_Redding">Otis Redding</a>, in 1967, and the severance of the label's distribution deal with Atlantic Records in 1968, <span class="stax">Stax</span> continued primarily under the supervision of a new co-owner, Al Bell. Over the next five years, Bell expanded the label's operations significantly, in order to compete with <span class="stax">Stax's</span> main rival, Motown Records in Detroit. During the mid-1970s, a number of factors, including a problematic distribution deal with CBS Records, caused the label to slide into insolvency, resulting in its forced closure in late 1975.</p>
		<img class="artist otis" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/Otis_Redding.jpg" alt="Otis Redding">
	</div>
	<div class="history">
		<h2>History</h2>
		<ul>
			<li><span class="year">1957 – 1960</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1957%E2%80%931960:_Early_years_as_Satellite_Records" target="_blank">Early years as Satellite Records</a></li>
			<li><span class="year">1961</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1961:_Name_change_to_Stax_and_beginning_of_partnership_with_Atlantic" target="_blank">Name change to Stax and beginning of partnership with Atlantic</a></li>
			<li><span class="year">1962–1964</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1962%E2%80%931964:_Stax_and_Volt_in_ascendancy" target="_blank">Stax and Volt in ascendancy</a></li>
			<li><span class="year">1965–1967</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1965%E2%80%931967:_Stax/Volt's_continued_success" target="_blank">Stax/Volt's continued success</a></li>
			<li><span class="year">1968</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1968:_Break_with_Atlantic_Records" target="_blank">Break with Atlantic Records</a></li>
			<li><span class="year">1968–1972</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1968%E2%80%931972:_Stax_as_an_independent_label" target="_blank">Stax as an independent label</a></li>
			<li><span class="year">1972–1975</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1972%E2%80%931975:_Decline_and_bankruptcy" target="_blank">Decline and bankruptcy</a></li>
			<li><span class="year">1976–1977</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1976%E2%80%931977:_Stax_in_limbo" target="_blank">Stax in limbo</a></li>
			<li><span class="year">1978–1981</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1978%E2%80%931981:_Stax_resumes_operations" target="_blank">Stax resumes operations</a></li>
			<li><span class="year">1982–2003</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#1982%E2%80%932003:_Stax_as_a_reissue_label" target="_blank">Stax as a reissue label</a></li>
			<li><span class="year">2003–present</span> <a href="https://en.wikipedia.org/wiki/Stax_Records#2003%E2%80%93present:_Stax_Museum_and_revival_of_the_label" target="_blank">Stax Museum and revival of the label</a></li>
		</ul>
	</div>
</div>
              
            
!

CSS

              
                // stick your font imports here at the top.
// everything else keep to you own root class

@import url("https://fonts.googleapis.com/css?family=Chango&display=swap");
@import url("https://fonts.googleapis.com/css?family=Monoton|Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fugaz+One&display=swap");
@import url("https://fonts.googleapis.com/css?family=Bungee+Inline&display=swap");
@import url("https://fonts.googleapis.com/css?family=Caveat&display=swap");
@import url("https://fonts.googleapis.com/css?family=Ultra&display=swap");
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
@import url("https://fonts.googleapis.com/css?family=Fredoka+One&display=swap&text=staxrecords");

.steveg {
	font-family: sans-serif;
	font-weight: 200;
	padding: 10vw 15vw;
	background-color: #ececec;
	color: #333;

	background-color: #fff0f0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='974' height='974' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke-opacity='0.36'%3E%3Cg stroke='%23ab8585' stroke-width='17'%3E%3Cline x1='-8' y1='-8' x2='808' y2='808'/%3E%3Cline x1='-8' y1='792' x2='808' y2='1608'/%3E%3Cline x1='-8' y1='-808' x2='808' y2='8'/%3E%3C/g%3E%3Cg stroke='%23b08c8c' stroke-width='16'%3E%3Cline x1='-8' y1='767' x2='808' y2='1583'/%3E%3Cline x1='-8' y1='17' x2='808' y2='833'/%3E%3Cline x1='-8' y1='-33' x2='808' y2='783'/%3E%3Cline x1='-8' y1='-783' x2='808' y2='33'/%3E%3C/g%3E%3Cg stroke='%23b69493' stroke-width='15'%3E%3Cline x1='-8' y1='742' x2='808' y2='1558'/%3E%3Cline x1='-8' y1='42' x2='808' y2='858'/%3E%3Cline x1='-8' y1='-58' x2='808' y2='758'/%3E%3Cline x1='-8' y1='-758' x2='808' y2='58'/%3E%3C/g%3E%3Cg stroke='%23bb9b9b' stroke-width='14'%3E%3Cline x1='-8' y1='67' x2='808' y2='883'/%3E%3Cline x1='-8' y1='717' x2='808' y2='1533'/%3E%3Cline x1='-8' y1='-733' x2='808' y2='83'/%3E%3Cline x1='-8' y1='-83' x2='808' y2='733'/%3E%3C/g%3E%3Cg stroke='%23c0a2a2' stroke-width='13'%3E%3Cline x1='-8' y1='92' x2='808' y2='908'/%3E%3Cline x1='-8' y1='692' x2='808' y2='1508'/%3E%3Cline x1='-8' y1='-108' x2='808' y2='708'/%3E%3Cline x1='-8' y1='-708' x2='808' y2='108'/%3E%3C/g%3E%3Cg stroke='%23c5aaaa' stroke-width='12'%3E%3Cline x1='-8' y1='667' x2='808' y2='1483'/%3E%3Cline x1='-8' y1='117' x2='808' y2='933'/%3E%3Cline x1='-8' y1='-133' x2='808' y2='683'/%3E%3Cline x1='-8' y1='-683' x2='808' y2='133'/%3E%3C/g%3E%3Cg stroke='%23cbb1b1' stroke-width='11'%3E%3Cline x1='-8' y1='642' x2='808' y2='1458'/%3E%3Cline x1='-8' y1='142' x2='808' y2='958'/%3E%3Cline x1='-8' y1='-158' x2='808' y2='658'/%3E%3Cline x1='-8' y1='-658' x2='808' y2='158'/%3E%3C/g%3E%3Cg stroke='%23d0b9b9' stroke-width='10'%3E%3Cline x1='-8' y1='167' x2='808' y2='983'/%3E%3Cline x1='-8' y1='617' x2='808' y2='1433'/%3E%3Cline x1='-8' y1='-633' x2='808' y2='183'/%3E%3Cline x1='-8' y1='-183' x2='808' y2='633'/%3E%3C/g%3E%3Cg stroke='%23d5c0c0' stroke-width='9'%3E%3Cline x1='-8' y1='592' x2='808' y2='1408'/%3E%3Cline x1='-8' y1='192' x2='808' y2='1008'/%3E%3Cline x1='-8' y1='-608' x2='808' y2='208'/%3E%3Cline x1='-8' y1='-208' x2='808' y2='608'/%3E%3C/g%3E%3Cg stroke='%23dac8c8' stroke-width='8'%3E%3Cline x1='-8' y1='567' x2='808' y2='1383'/%3E%3Cline x1='-8' y1='217' x2='808' y2='1033'/%3E%3Cline x1='-8' y1='-233' x2='808' y2='583'/%3E%3Cline x1='-8' y1='-583' x2='808' y2='233'/%3E%3C/g%3E%3Cg stroke='%23e0d0d0' stroke-width='7'%3E%3Cline x1='-8' y1='242' x2='808' y2='1058'/%3E%3Cline x1='-8' y1='542' x2='808' y2='1358'/%3E%3Cline x1='-8' y1='-558' x2='808' y2='258'/%3E%3Cline x1='-8' y1='-258' x2='808' y2='558'/%3E%3C/g%3E%3Cg stroke='%23e5d8d7' stroke-width='6'%3E%3Cline x1='-8' y1='267' x2='808' y2='1083'/%3E%3Cline x1='-8' y1='517' x2='808' y2='1333'/%3E%3Cline x1='-8' y1='-533' x2='808' y2='283'/%3E%3Cline x1='-8' y1='-283' x2='808' y2='533'/%3E%3C/g%3E%3Cg stroke='%23eadfdf' stroke-width='5'%3E%3Cline x1='-8' y1='292' x2='808' y2='1108'/%3E%3Cline x1='-8' y1='492' x2='808' y2='1308'/%3E%3Cline x1='-8' y1='-308' x2='808' y2='508'/%3E%3Cline x1='-8' y1='-508' x2='808' y2='308'/%3E%3C/g%3E%3Cg stroke='%23efe7e7' stroke-width='4'%3E%3Cline x1='-8' y1='467' x2='808' y2='1283'/%3E%3Cline x1='-8' y1='317' x2='808' y2='1133'/%3E%3Cline x1='-8' y1='-333' x2='808' y2='483'/%3E%3Cline x1='-8' y1='-483' x2='808' y2='333'/%3E%3C/g%3E%3Cg stroke='%23f5efef' stroke-width='3'%3E%3Cline x1='-8' y1='342' x2='808' y2='1158'/%3E%3Cline x1='-8' y1='442' x2='808' y2='1258'/%3E%3Cline x1='-8' y1='-458' x2='808' y2='358'/%3E%3Cline x1='-8' y1='-358' x2='808' y2='458'/%3E%3C/g%3E%3Cg stroke='%23faf7f7' stroke-width='2'%3E%3Cline x1='-8' y1='367' x2='808' y2='1183'/%3E%3Cline x1='-8' y1='417' x2='808' y2='1233'/%3E%3Cline x1='-8' y1='-433' x2='808' y2='383'/%3E%3Cline x1='-8' y1='-383' x2='808' y2='433'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1'%3E%3Cline x1='-8' y1='392' x2='808' y2='1208'/%3E%3Cline x1='-8' y1='-408' x2='808' y2='408'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

	header {
		display: grid;
		grid-template-columns: 1fr 3fr 1fr;
		gap: 1rem;
		grid-template-areas: "logo title link";
		h1 {
			grid-area: title;
		}
		.attribution {
			grid-area: link;
			margin: 0;
			font-size: 0.7rem;
		}
		img {
			grid-area: logo;
			height: 100%;
		}
		align-items: center;

		margin-bottom: 10vw;
	}

	.artist {
		width: 300px;
	}

	h1,
	h2,
	.stax {
		font-family: "Chango", cursive;
	}

	h2 {
		font-size: 3rem;
	}

	.stax {
		// background-color: #FC1401;
		padding: 0px 3px;
		margin: 0;
		color: black;
		display: inline-block;
		transform: rotate(-2deg);
		text-transform: uppercase;
		font-size: 0.95rem;
	}

	a {
		background-color: #fc1401;
		color: white;
		padding: 0px 3px;
		display: inline-block;

		&:hover {
			outline: 3px solid #fc1401;
		}
	}

	.intro {
		font-size: 1.3rem;
	}

	.details {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 3rem;
	}

	.history {
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			gap: 0.5rem;

			li {
				display: grid;
				align-items: center;
				gap: 1rem;
				grid-template-columns: 1fr 4fr;

				.year {
					text-align: right;
				}

				a {
					padding: 10px;
				}
			}
		}
	}

	h1 {
		font-size: 3.5rem;
		line-height: 3rem;
		margin: 0;
		padding: 0;
	}
}

.rosieebob {
	background-color: #e7e7e7;
	background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23e11b1b' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	header {
		display: grid;
		grid-template-areas: "img title att";
		border-bottom: 5px dashed red;
		// padding-bottom: 50px;
		margin-bottom: 50px;
	}
	.title {
		grid-area: title;
		color: red;
		text-transform: uppercase;
		font-family: "Monoton", cursive;
		font-size: 5.5em;
		letter-spacing: 0.25em;
		margin: 0 -100px -25px 25px;
		align-self: end;
		text-shadow: 0 0 3px #ff0000;
	}
	.logo {
		grid-area: img;
	}
	.attribution {
		grid-area: att;
		align-self: start;
		text-align: right;
		color: #fff;
		text-shadow: 0 0 3px #ff0000;
	}
	.attribution a {
		text-shadow: none;
	}
	p {
		font-family: "Montserrat", sans-serif;
		font-size: 20px;
		text-align: justify;
	}
	a {
		color: red;
		font-family: "Monoton", cursive;
		letter-spacing: 0.25em;
		text-decoration: none;
		display: inline-block;
		transition: 0.2s ease-in-out;
	}
	a:hover {
		transform: skew(-15deg);
	}
	.intro {
		background: #ffffffeb;
		box-shadow: 0 5px 5px gray;
		width: 65%;
		padding: 3%;
		transform: rotate(5deg);
		margin: 100px auto 100px auto;
	}
	.details {
		text-align: center;
		perspective: 1000px;
		transform-style: preserve-3d;
	}
	.details p {
		background: #ffffffeb;
		box-shadow: 0 5px 10px gray;
		width: 65%;
		padding: 3%;
		margin: 0 auto;
	}
	.details p:first-of-type {
		transform: rotate(-5deg);
	}
	.booker {
		display: inline-block;
		height: 500px;
		border: 5px dashed red;
		margin: 75px 0 50px 0;
	}

	.details p:nth-of-type(2) {
		transform: rotate3d(-1, 0, 0, -18deg);
	}
	.otis {
		height: 500px;
		border: 5px dashed red;
		margin: 75px auto 8px auto;
	}

	.history {
		padding-bottom: 75px;
		text-align: center;
	}
	h2 {
		color: red;
		text-transform: uppercase;
		font-family: "Monoton", cursive;
		font-size: 4.5em;
		text-shadow: 0 0 3px #ff0000;
		letter-spacing: 0.25em;
	}
	.history ul {
		margin: 0 auto 0 auto;
		width: 75%;
		font-size: 25px;
		padding: 0;
	}

	.history ul li {
		margin: 20px auto;
		background: #ff00004f;
		list-style: none;
		border: 3px dashed red;
		display: grid;
		grid-template-columns: 1fr 3fr;
		box-shadow: 0 5px 10px gray;
	}
	.history ul li span {
		align-self: center;
		font-size: 35px;
		color: #fffffff0;
		text-shadow: 0 0 3px #ff0000;
	}
	.history ul li a {
		padding: 3%;
		border-left: 3px dashed red;
		background: #ffffffe8;
	}
	.history ul li a:hover {
		transform: skew(0deg);
		background: #fff;
	}
}

.vinyl {
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/wood.jpg)
		repeat-y center center;
	background-size: 100%;

	font-family: "Caveat";
	font-size: 28px;

	overflow: hidden;

	header {
		height: 470px;
		width: 100vw;
		padding: 0;
		margin: 0;
		position: relative;
		//overflow: hidden;

		p {
			margin: 0;
			padding: 0;
		}

		&:before {
			z-index: 2;
			display: block;
			position: absolute;
			content: "";
			top: -100px;
			right: 0;
			width: 500px;
			height: 440px;
			transform: rotate(20deg);
			background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/rt100_09_0.png)
				no-repeat center center;
			background-size: cover;
		}

		&:after {
			z-index: 3;
			display: block;
			position: absolute;
			content: "";
			top: -72px;
			right: 114px;
			width: 350px;
			height: 350px;
			background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/vinyl-removebg-preview.png)
				no-repeat center center;
			background-size: cover;
			animation: spin 4s linear infinite;
		}

		h1 {
			z-index: 1;
			margin: 0;
			font-size: 13vw;
			position: absolute;
			bottom: 0;
			width: 40vw;
			max-width: 400px;
			left: 10vw;
			line-height: 14vw;
			color: rgba(20, 10, 10, 0.25);
			mix-blend-mode: color-burn;
			font-family: "Fugaz One", sans-serif;
			text-shadow: -1px -1px 20px rgba(215, 141, 96, 0.4),
				0px 0px 2px rgba(52, 60, 78, 0.3);
			transform: rotate(5deg);
			text-transform: uppercase;
		}

		img {
			z-index: 100;
			top: 35px;
			right: 230px;
			width: 120px;
			position: absolute;
			animation: spin 4s linear infinite;
			transform-origin: center 30%;
			clip-path: circle(30% at 50% 30%);
		}

		.attribution {
			font-family: sans-serif;
			font-size: 0.8rem;
			padding: 20px;
			color: white;
			font-weight: 300;

			a {
				color: white;
			}
		}
	}

	.details p,
	.intro p,
	.history {
		padding: 50px;
		background-color: #fffdf7;
		background-image: url("https://www.transparenttextures.com/patterns/beige-paper.png");
		box-shadow: -3px -4px 3px rgba(0, 0, 0, 0.3);
	}

	.details {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas:
			"p1 p1 i1"
			"i2 p2 p2";

		p:first-of-type {
			grid-area: p1;
			position: relative;

			&:after {
				content: "";
				display: block;
				position: absolute;
				right: -60%;
				bottom: -10%;
				width: 300px;
				height: 300px;
				background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/harmonica.png)
					no-repeat center center;
				background-size: cover;
			}
		}
		i:first-of-type {
			grid-area: i1;
		}
		p:last-of-type {
			grid-area: p2;
		}
		i:last-of-type {
			grid-area: i2;
		}

		@media only screen and (max-width: 900px) {
			font-size: 26px;

			grid-template-columns: 1fr 1fr;
			grid-template-areas:
				"p1 p1"
				"i1 i2"
				"p2 p2";

			p {
				padding: 30px;
			}

			p:first-of-type {
				&:after {
					right: -30%;
					bottom: -25%;
				}
			}

			.otis {
				margin-top: 100px;
				transform: rotate(10deg);
			}
		}
	}

	.intro {
		p {
			transform: rotate(-2deg);
		}
	}

	.artist {
		width: 100%;
		border: solid 14px #e4e4e4;
		border-bottom: solid 90px #e4e4e4;
		border-top: solid 18px #e4e4e4;
		transform: rotate(-4deg);
		box-shadow: -3px -4px 3px rgba(0, 0, 0, 0.3);
	}

	.history {
		margin-top: 100px;
	}

	.details,
	.intro {
		margin: 0 10vw;
	}

	@keyframes spin {
		100% {
			transform: rotate(360deg);
		}
	}
}

.amd {
	max-width: 80ch;
	font-weight: 200;
	margin: auto auto;
	padding: 1em;
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 1.5em;

	h1,
	h2,
	h3 {
		font-weight: 200;
		color: #b00;
	}

	a {
		&,
		&:link,
		&:visited {
			color: #b00;
			font-weight: 400;
		}

		&:hover {
			text-decoration: none;
		}

		&:focus {
			outline: 1px dashed #b00;
			outline-offset: 2px;
			background: rgba(255, 0, 0, 0.05);
		}
	}

	.stax {
		font-family: "Bungee Inline";
		display: inline-block;
		transition: transform 0.25s;
		&:hover {
			transform: rotate(180deg);
		}
	}

	img {
		max-width: 100%;
	}

	header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		h1 {
			order: 2;
			font-size: 3rem;
			line-height: 2.5rem;
		}

		img {
			height: 4em;
			margin-right: 1em;
		}

		p.attribution {
			flex: 1;
			order: 3;
			text-align: right;
			font-size: 0.8em;
			white-space: nowrap;
			margin: 0;
		}
	}

	.details {
		img {
			border: 1px solid #222;
			width: 100%;
			transition: filter 0.5s, clip-path 0.5s;
			&:hover {
				filter: sepia(25%);
			}
			&.booker {
				display: none;
				& + p {
					margin-top: 100%;
					margin-top: calc(100% + 2rem);
					position: relative;
					&::before,
					&::after {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 0%;
						padding-top: 100%;
						display: block;
						background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/Booker_T._%26_the_M.G's.png");
						transform: translate(0, calc(-100% - 1rem));
						background-position: center center;
						background-size: 100%;
						transition: background-size 0.5s;
					}
					&::after {
						background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' width='614px' height='614px' viewBox='0 0 614 614'> <path fill='%23b00' stroke='%23222' stroke-width='4' d='M263,150 316,89 321,95 327,96 332,115 336,122 320,136 279,158Z M -2,157 C 8,156 34,148 34,148 34,148 60,139 60,139 60,139 69,126 69,126 69,126 69,99 67,93 64,96 54,90 56,71 53,64 58,61 58,61 58,61 55,56 55,56 55,56 55,43 55,43 56,30 68,15 76,15 95,7 121,8 138,18 144,21 150,26 149,37 149,41 156,44 155,52 154,61 148,76 148,76 148,76 150,100 140,98 138,113 131,121 131,121 131,121 130,130 130,130 130,130 136,147 139,149 141,151 196,168 202,175 209,163 227,151 233,149 241,137 286,90 286,90 286,90 270,81 284,70 278,66 269,72 274,57 285,53 287,58 287,58 287,58 284,75 297,64 311,53 292,56 292,56 292,56 284,50 293,43 303,36 303,43 304,45 303,63 316,52 316,52 316,52 316,46 316,46 316,46 304,48 308,37 311,26 320,31 320,31 320,31 331,12 348,11 365,10 406,4 406,44 406,49 406,66 406,66 406,66 415,90 395,94 395,104 393,116 388,119 388,128 389,137 403,129 407,126 412,134 413,134 413,134 437,132 443,139 450,136 467,151 467,187 487,173 497,174 501,164 494,159 488,147 488,147 488,146 467,123 469,101 464,91 456,46 485,31 515,16 534,20 544,25 554,31 570,48 567,70 572,67 586,92 563,109 565,116 562,129 562,129 562,129 572,138 572,138 572,138 577,135 586,141 594,146 612,160 612,160 612,181 612,612 612,612 612,612 2,612 2,612 2,612 2,157 2,157' /></svg>");
						transition: opacity 0.5s;
					}
					&:hover::after {
						opacity: 0;
					}
				}
			}
			&.otis {
				clip-path: polygon(
					-0% 100%,
					3% 92%,
					10% 88%,
					27% 80%,
					29.5% 76%,
					32.5% 74.5%,
					32% 59%,
					29% 55%,
					27% 47%,
					25% 40%,
					25.25% 34%,
					25% 28%,
					27% 19%,
					30% 13%,
					34% 9%,
					37% 7.75%,
					39% 8%,
					43% 6%,
					48% 6%,
					54% 6%,
					58% 9%,
					61% 13%,
					62% 16%,
					64% 21%,
					65% 26%,
					66% 31%,
					65% 35%,
					65% 38%,
					65% 40%,
					66% 43%,
					66% 46%,
					65% 52%,
					63% 60%,
					61% 66%,
					60% 68%,
					59% 69%,
					59% 71.75%,
					62% 74%,
					63% 75%,
					67% 77%,
					76% 80%,
					82% 81.5%,
					88% 84%,
					90% 84.5%,
					91% 86%,
					92.5% 89%,
					96% 94%,
					99% 100%
				);
				atransition: clip-path 0.5s;
				&:hover {
					clip-path: polygon(
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%,
						0% 100%
					);
					clip-path: polygon(
						0% 100%,
						0% 100%,
						0% 100%,
						0% 50%,
						0% 50%,
						0% 50%,
						0% 50%,
						0% 50%,
						0% 50%,
						0% 50%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						0% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 0%,
						100% 25%,
						100% 25%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 50%,
						100% 75%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%,
						100% 100%
					);
				}
			}
		}
	}

	ul {
		position: relative;
		height: 50em;
		list-style: none;
		padding-left: 2em;

		&::after {
			border: 1px solid #222;
			content: "";
			height: 100%;
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0.5em;
			width: 0.75em;
			border-radius: 2em;
			/* palette from https://refactoringui.com/previews/building-your-color-palette/ */
			background: linear-gradient(
				to bottom,
				#173f5f 0% 6%,
				/* 1957-1960 = 4 */ #3caea3 6% 7.5%,
				/* 1961 = 1 */ #20639b 7.5% 12%,
				/* 1962-1964 = 3 */ #f6d55c 12% 16.5%,
				/* 1965-1967 = 3 */ #ed553b 16.5% 18%,
				/* 1968 = 1 */ #173f5f 18% 25.5%,
				/* 1968-1972 = 5 */ #3caea3 25.5% 31.5%,
				/* 1972-1975 = 4 */ #20639b 31.5% 34.5%,
				/* 1976-1977 = 2 */ #f6d55c 34.5% 40.5%,
				/* 1978-1981 = 4 */ #ed553b 40.5% 73.5%,
				/* 1982-2003 = 22 */ #173f5f 73.5% 100% /* 2003-2020 = 18 */
			);
		}
		li {
			font-size: 0.9em;
			position: absolute;
			text-overflow: ellipsis;
			overflow-x: auto;
			white-space: nowrap;
			width: 100%;
			width: calc(100% - 2em);
			line-height: 1em;

			span {
				font-weight: 200;
				color: #777;
			}

			&:nth-child(1) {
				top: 2.5%;
			}
			&:nth-child(2) {
				top: 5.85%;
			}
			&:nth-child(3) {
				top: 8.75%;
			}
			&:nth-child(4) {
				top: 13.75%;
			}
			&:nth-child(5) {
				top: 16.5%;
			}
			&:nth-child(6) {
				top: 21%;
			}
			&:nth-child(7) {
				top: 27.75%;
			}
			&:nth-child(8) {
				top: 32%;
			}
			&:nth-child(9) {
				top: 36.5%;
			}
			&:nth-child(10) {
				top: 55.5%;
			}
			&:nth-child(11) {
				top: 86.5%;
			}
		}
	}
}

.adamk {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 125px 0 0 0;
	background: #5e9dd0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 100vw;
	overflow-x: hidden;
	height: 100vh;
	img {
		max-width: 100%;
	}
	* {
		box-sizing: border-box;
	}
	header {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 1.5rem;
		height: 90px;
		top: 50px;
		&:before,
		&:after {
			content: "";
			position: absolute;
		}
		&:before {
			width: 120px;
			height: 120px;
			top: 0;
			right: 0;
			background: #f2e827;
			border-radius: 0 0 0 200px;
			box-shadow: 0 0 0 3px #222;
		}
		&:after {
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: #5e9dd0;
			z-index: -2;
			box-shadow: 0 3px 0 #222;
		}
		h1 {
			position: absolute;
			left: 0;
			top: 0;
			height: 80%;
			text-align: center;
			pointer-events: none;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			font-family: "Ultra";
			text-transform: uppercase;
			font-size: 4rem;
			z-index: 9;
			color: #fff;
			-webkit-text-stroke: 1px #222;
			transform: translate(-5px, 0px);
			&:before,
			&:after {
				content: "STAX RECORDS";
				z-index: -2;
				color: #fff;
				position: absolute;
				transform: translate(-5px, 5px);
			}
			&:after {
				-webkit-text-fill-color: transparent;
				-webkit-background-clip: text;
				background-image: linear-gradient(
					to bottom,
					#e14932 calc(50% - 1px),
					#222 calc(50% - 1px),
					#222 calc(50% + 1px),
					#f0b1d0 calc(50% + 1px)
				);
				z-index: 2;
				transform: translate(5px, -5px);
				animation: bounce1 2s ease-in-out infinite alternate;
				@keyframes bounce1 {
					to {
						transform: translate(-5px, -5px);
					}
				}
			}
			&:before {
				animation: bounce2 2s ease-in-out infinite alternate;
				@keyframes bounce2 {
					to {
						transform: translate(5px, 5px);
					}
				}
			}
		}
		.attribution {
			position: absolute;
			font-size: 0.75rem;
			width: 100%;
			text-align: center;
			bottom: 0;
			left: 0;
			margin: 0.25rem;
			a {
				color: #f2e827;
				&:hover {
					color: darken(#f2e827, 5%);
				}
			}
		}
		img {
			width: auto;
			max-height: 80%;
			position: relative;
			z-index: 2;
			filter: saturate(0.8) brightness(1.05);
		}
	}
	.intro,
	.details,
	.history {
		width: 1000px;
		max-width: calc(100% - 2rem);
		background: #fff;
		padding: 4rem;
		margin-bottom: 2rem;
		border-radius: 5px 90px 5px 90px;
		box-shadow: 0 0 0 2px #222, -10px 10px #fff, -10px 10px 0 2px #222;
		a {
			color: #e14932;
			font-style: italic;
			&:hover {
				color: darken(#e14932, 5%);
			}
		}
		p {
			font-weight: 800;
			line-height: 1.5;
			margin: 0;
			font-size: 1.25rem;
		}
	}
	.details {
		border-radius: 90px 5px 90px 5px;
		box-shadow: 0 0 0 2px #222, 10px 10px #fff, 10px 10px 0 2px #222;
		position: relative;
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		align-items: center;
		a {
			color: #222;
		}
		p {
			&:first-of-type {
				grid-area: 1 / 1 / 2 / 4;
			}
			&:last-of-type {
				grid-area: 2 / 3 / 3 / 5;
			}
		}
		img {
			&:first-of-type {
				grid-area: 2 / 1 / 3 / 3;
			}
			&:last-of-type {
				grid-area: 1 / 4 / 2 / 5;
			}
		}
	}
}

.jh3y {
	--gutter: 2rem;
	--perspective: 600px;
	--speed: 0.5;
	--stagger: 0.1;
	--play-speed: 2;
	--fall-speed: 0.25;
	--stamp-delay: 0.2;
	--stamp-stagger: 0.2;
	box-sizing: border-box;
	width: 95vmin;
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	grid-gap: 1rem;
	line-height: 1.75;
	font-family: "Lato", sans-serif;
	letter-spacing: 1.25;
	border: 4px solid #000;
	padding: var(--gutter);
	margin: var(--gutter) auto;
}
.jh3y * {
	box-sizing: border-box;
}
.jh3y header {
	position: static;
	grid-template-columns: 1fr;
	transform-style: preserve-3d;
	perspective: var(--perspective);
	margin-top: 200px;
	display: inline-grid;
	--fall-delay: calc((var(--stamp-delay) * 3 + var(--speed)) * 1);
}
.jh3y header:after {
	--z: 1;
	--x: 0;
	--y: 50;
	content: "";
	height: 80px;
	width: 80px;
	position: absolute;
	background: #000;
	background: radial-gradient(#fff 10%, transparent 10%),
		radial-gradient(#404040 20%, transparent 20%),
		url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/557388/Stax-records-logo.jpg")
			0 0/100px 100px;
	bottom: calc(100% + 100px);
	left: 0%;
	margin-left: 60px;
	border-radius: 50%;
	transform: translate3d(-50%, 0, calc(var(--z) * 1px)) rotate(0deg);
	animation: stamp calc(var(--speed) * 1s) calc(var(--fall-delay) * 1s)
			cubic-bezier(0.17, 0.67, 0.49, 1) both,
		rotate calc(var(--play-speed) * 1s)
			calc((var(--fall-delay) + var(--speed)) * 1s) infinite linear;
}
.jh3y header:before {
	--z: 0;
	--x: 0;
	--y: 0;
	content: "";
	height: 200px;
	width: 200px;
	position: absolute;
	background: repeating-radial-gradient(
			transparent 0px,
			transparent 10px,
			#1a1a1a 10px,
			#1a1a1a 12px,
			transparent 12px
		),
		conic-gradient(
			transparent 35%,
			rgba(191, 191, 191, 0.75) 35%,
			rgba(191, 191, 191, 0.75) 40%,
			transparent 40%
		),
		#262626;
	bottom: 100%;
	border-radius: 50%;
	left: 0%;
	transform: translate3d(-50%, 0, calc(var(--z) * 1px)) rotate(0deg);
	animation: stamp calc(var(--speed) * 1s) calc(var(--fall-delay) * 1s)
		cubic-bezier(0.17, 0.67, 0.49, 1) both;
}
.jh3y header img {
	display: none;
	height: 50%;
	width: 50%;
	border-radius: 50%;
}
.jh3y a {
	color: #f00;
}
.jh3y img {
	width: 100%;
	object-fit: cover;
	margin: 1rem 0;
	border: 4px solid #000;
}
.jh3y .intro,
.jh3y .details,
.jh3y .history {
	grid-column: 1;
}
.jh3y .history {
	grid-row: 2;
}
.jh3y .history .year {
	font-weight: bold;
}
.jh3y .history h2 {
	display: none;
}
.jh3y .history ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem 0;
}
.jh3y .history ul li {
	--fall-delay: calc((var(--stamp-delay) * 3 + var(--speed)) * 1);
	border: 4px solid #000;
	padding: 0.5rem;
	display: grid;
	align-items: center;
	grid-template-columns: 120px 1fr;
	grid-gap: 0 0.5rem;
	animation: fall calc(var(--fall-speed) * 1s) ease both;
	animation-delay: calc(
		(var(--fall-delay) + var(--index) * var(--stagger)) * 1.5s
	);
}
.jh3y .history ul li:hover {
	background: #f00;
}
.jh3y .history ul li:hover a {
	color: #fff;
}
.jh3y .history ul li:nth-of-type(1) {
	--index: 11;
}
.jh3y .history ul li:nth-of-type(2) {
	--index: 10;
}
.jh3y .history ul li:nth-of-type(3) {
	--index: 9;
}
.jh3y .history ul li:nth-of-type(4) {
	--index: 8;
}
.jh3y .history ul li:nth-of-type(5) {
	--index: 7;
}
.jh3y .history ul li:nth-of-type(6) {
	--index: 6;
}
.jh3y .history ul li:nth-of-type(7) {
	--index: 5;
}
.jh3y .history ul li:nth-of-type(8) {
	--index: 4;
}
.jh3y .history ul li:nth-of-type(9) {
	--index: 3;
}
.jh3y .history ul li:nth-of-type(10) {
	--index: 2;
}
.jh3y .history ul li:nth-of-type(11) {
	--index: 1;
}
.jh3y .history ul li:nth-of-type(12) {
	--index: 0;
}
.jh3y .history ul li a {
	color: #f00;
	font-weight: bold;
	text-decoration: none;
}
.jh3y .title {
	--speed: 1;
	--delay: calc(var(--stamp-delay) * 1);
	margin-bottom: 0;
	font-family: "Fredoka One";
	animation-name: stamp;
	animation-duration: calc(var(--speed) * 1s);
	animation-delay: calc(var(--delay) * 1s);
	animation-timing-function: cubic-bezier(0.17, 0.67, 0.49, 1);
	animation-fill-mode: both;
	font-size: 40px;
	color: rgba(255, 0, 0, 0.3);
	position: relative;
	transform-style: preserve-3d;
	perspective: var(--perspective);
	text-transform: lowercase;
}
.jh3y .title:after,
.jh3y .title:before {
	--x: 0;
	animation-name: stamp;
	animation-duration: calc(var(--speed) * 1s);
	animation-delay: calc(var(--delay) * 1s);
	animation-timing-function: cubic-bezier(0.17, 0.67, 0.49, 1);
	animation-fill-mode: both;
	content: "Stax Records";
	left: 0;
	top: 0;
	position: absolute;
}
.jh3y .title:before {
	--delay: calc(var(--stamp-delay) * 2);
	color: rgba(255, 0, 0, 0.6);
}
.jh3y .title:after {
	--delay: calc(var(--stamp-delay) * 3);
	color: #f00;
}
.jh3y .attribution {
	font-size: 0.675rem;
	margin: 0;
}
@media (min-width: 768px) {
	.jh3y {
		grid-template-columns: 1fr 1fr;
	}
	.jh3y header {
		position: fixed;
	}
	.jh3y .intro,
	.jh3y .details,
	.jh3y .history {
		grid-column: 2;
	}
	.jh3y .history {
		grid-row: 1;
	}
}
@-moz-keyframes fall {
	from {
		opacity: 0;
		transform: translate(0, -100vmin);
	}
}
@-webkit-keyframes fall {
	from {
		opacity: 0;
		transform: translate(0, -100vmin);
	}
}
@-o-keyframes fall {
	from {
		opacity: 0;
		transform: translate(0, -100vmin);
	}
}
@keyframes fall {
	from {
		opacity: 0;
		transform: translate(0, -100vmin);
	}
}
@-moz-keyframes stamp {
	from {
		transform: translate3d(
			calc(var(--x, 0) * 1%),
			calc(var(--y, 0) * 1%),
			var(--perspective)
		);
	}
	to {
		transform: translate3d(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%), 0);
	}
}
@-webkit-keyframes stamp {
	from {
		transform: translate3d(
			calc(var(--x, 0) * 1%),
			calc(var(--y, 0) * 1%),
			var(--perspective)
		);
	}
	to {
		transform: translate3d(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%), 0);
	}
}
@-o-keyframes stamp {
	from {
		transform: translate3d(
			calc(var(--x, 0) * 1%),
			calc(var(--y, 0) * 1%),
			var(--perspective)
		);
	}
	to {
		transform: translate3d(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%), 0);
	}
}
@keyframes stamp {
	from {
		transform: translate3d(
			calc(var(--x, 0) * 1%),
			calc(var(--y, 0) * 1%),
			var(--perspective)
		);
	}
	to {
		transform: translate3d(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%), 0);
	}
}
@-moz-keyframes rotate {
	from {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(0deg);
	}
	to {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(360deg);
	}
}
@-webkit-keyframes rotate {
	from {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(0deg);
	}
	to {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(360deg);
	}
}
@-o-keyframes rotate {
	from {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(0deg);
	}
	to {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(360deg);
	}
}
@keyframes rotate {
	from {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(0deg);
	}
	to {
		transform: translate3d(
				calc(var(--x, 0) * 1%),
				calc(var(--y, 0) * 1%),
				calc(var(--z, 0) * 1px)
			)
			rotate(360deg);
	}
}

.chriscoyier {
	max-width: 400px;
	margin: 0 auto;
	font-family: "Lato", sans-serif;
	line-height: 1.5;
	padding-bottom: 5rem;
	.title {
		font-family: Ultra;
		font-weight: 900;
		font-size: 3rem;
		white-space: nowrap;
		text-transform: uppercase;
		transform: rotate(-5deg) scale(2) translateX(-5%);
		color: red;
		position: fixed;
		mix-blend-mode: overlay;
	}
	a {
		color: red;
	}
	img {
		mix-blend-mode: lighten;
		box-shadow: 0 0 50px black;
		transform: rotate(5deg);
		max-width: 100%;
	}
	.details p {
		padding: 3rem 0;
	}
}
              
            
!

JS

              
                // if you don't want to add your twitter,
// just remove it or enter twitter:null

var styles = [
	{
		layout: { name: "Vibe", class: "steveg" },
		person: { name: "Steve", twitter: "steeevg" }
	},
	{
		layout: { name: "Brick Wall", class: "rosieebob" },
		person: { name: "Kristopher", twitter: "rosieebob" }
	},
	{
		layout: { name: "Vinyl", class: "vinyl" },
		person: { name: "Steve", twitter: "steeevg" }
	},
	{
		layout: { name: "Boring", class: "amd" },
		person: { name: "Alvaro", twitter: "alvaro_montoro" }
	},
	{
		layout: { name: "Retro", class: "adamk" },
		person: { name: "Adam", twitter: "cobra_winfrey" }
	},
	{
		layout: { name: "Stacking", class: "jh3y" },
		person: { name: "Jhey", twitter: "jh3yy" }
	},
	{
		layout: { name: "Dunno", class: "chriscoyier" },
		person: { name: "Chris", twitter: "chriscoyier" }
	}
];

// the slider code is hidden away in https://codepen.io/ste-vg/pen/GRJjwjW

              
            
!
999px

Console