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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                .slideshow
	.slide.slide-one
		.toggl-man
			.toggl-eye
				.toggl-eye__ball
					.toggl-eye__ball-inner
			.toggl-mouth
			.toggl-hat
		.table
			span(data-splitting="chars") Kitchen Talk
			p Codepen Designs: Why She's Made Them and What She's Made.
			p
				a(href="https://codepen.io/oliviale/post/using-codepen-instead-of-slides" target="_blank") Read more about this pen here
	
	.slide.slide-link-one.to-animate
		p.links
				a(href="https://codepen.io/oliviale/full/MZZYyO" target="_blank") Example#1
				| &emsp; &emsp;
				a(href="https://codepen.io/oliviale/full/jxPgKv" target="_blank") Example#2

	
			
	.slide.slide-two.to-animate
		.main-header
			h1 Why Codepen?
		.whycodepen-content
			.content-block
				.reason
					h4 Practice, practice, practice!
					p 
						| I don't code for work every day anymore. So I have to practise on the side. For practice, I do "serious UI things" like
						a(target="_blank" href="https://codepen.io/oliviale/full/mgWjpq") here
						| and
						a(target="_blank" href="https://codepen.io/oliviale/full/gEpMMY") here.
				
				.reason
					h4 Small-scale projects.
					p Codepen projects are light in terms of workload and I don't get overwhelmed.
					
				.reason
					h4 For fun!
					p 
					| Most of my projects are just for fun, really.
					br
					| Such as 
					a(target="_blank" href="https://codepen.io/oliviale/full/BbgzGK") this
					| and 
					a(target="_blank" href="https://codepen.io/oliviale/full/dwBqwV") this.
	
	.slide.slide-three.to-animate
		.main-header
			h1 The Process
		.process__wrapper
			.process__items#scroll-event
				- var process = [{ title: "#1 Ideation", sub: "Get excited!"},{ title: "#2 Plan", sub: "(optional)"},{ title: "#3 Sketch", sub: "(optional)"},{ title: "#4 Build", sub: "... and designing on the go!"},{ title: "#5 Negotiate", sub: "Contemplate idea or make more realistic goals"},{ title: "#6 Success!", sub: "Ship it, shelf it, don't think about it!"}]
					each val in process
						.process__card
							.details
								h3= val.title
								span= val.sub

			.sketch-example
				div
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/shelf.jpg" alt="Shelf Example")
					figcaption The Sketch
				div 
					iframe(height="360" style="width: 100%;" scrolling="no" title="CSS Grid: A Shelf!" src="//codepen.io/oliviale/embed/PXGgMG/?height=404&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true")
	
	
	.slide.slide-five.to-animate
		.main-header
			h1 Data
				small.js-activate-graph Hover on bubble to see time for each pen.
			- var projects = [{ name: "Emoji Factory", time: "20:39:57", width: "200", color:'#111'},{ name: "CSS Grid: Style Guide", time: "12:18:58", width: "120", color:'#000'},{ name: "CSS Grid: Bathroom Tiles", time: "9:09:03", width: "90", color:'#000'},{ name: "Marauder's Map", time: "8:32:32", width: "80", color:"#222"},{ name: "CSS Grid: Monopoly", time: "8:12:23", width: "78", color:"#000"},{ name: "CSS Grid: Ticket Stub", time: "7:12:27", width: "70", color:"#000"},{ name: "Sorting Hat", time: "6:59:40", width: "65", color:"#222"},{ name: "CSS Grid: Floor Plan", time: "5:55:20", width: "55", color:"#000"},{ name: "CSS Grid: Application Form", time: "5:51:51", width: "55", color:"#000"},{ name: "CSS Grid: Profile", time: "5:43:17", width: "54", color:"#000"},{ name: "UI Elements: Profile Scroll", time: "5:24:33", width: "52", color:"#333"},{ name: "CSS Grid: Excel", time: "4:51:56", width: "45", color:"#000"},{ name: "CSS Animation: Button", time: "4:37:25", width: "43", color:"#333"},{ name: "Dictionary Factory", time: "4:33:37", width: "43", color:"#111"},{ name: "CSS Grid: Calendar", time: "4:21:45", width: "42", color:"#000"},{ name: "Avengers: Thanos Snap", time: "4:06:34", width: "40", color:"#444"},{ name: "UI Elements: Hover Effects", time: "2:42:00", width: "24", color:"#333"},{ name: "CSS Animations: Head Popping", time: "2:07:00", width: "20", color:"#111"},{ name: "CSS Animations: Slack Logo", time: "2:05:44", width: "20", color:"#444"},{ name: "CSS Grid: Bujo", time: "7:37:04", width: "73", color:"#000"},{ name: "Waitress Pie Slider", time: "6:06:59", width: "60", color:"#222"},{ name: "CSS Grid: Product Catalog", time: "7:45:15", width: "60", color:"#000"}];		

		.data-content
				each val in projects
					.data-bubble.to-scale(style="--width:"+val.width+"px; --color:"+val.color)
						.data-bubble__info
							p
								strong= val.name
							p= val.time
			
		.data-numbers
				//37 total projects. not inclusive of writing, kitchen talk, 2 incomplete items
				.statistic
					.statistic__number.js-run-number
						span.change(data-number="2") 0
						span.change(data-number="1") 0
						span.change(data-number="3") 0
						span :
						span.change(data-number="2") 0
						span.change(data-number="7") 0
						span :
						span.change(data-number="5") 0
						span.change(data-number="1") 0
					.statistic__desc Total time spent (37 projects)
			
				.statistic
					.statistic__number.js-run-number
						span.change(data-number="0") 0
						span.change(data-number="0") 0
						span.change(data-number="5") 0
						span :
						span.change(data-number="4") 0
						span.change(data-number="6") 0
						span :
						span.change(data-number="0") 0
						span.change(data-number="9") 0
					.statistic__desc Average time per pen
			
				.statistic
					.statistic__number.js-run-number
						span.change(data-number="0") 0
						span.change(data-number="2") 0
						span.change(data-number="0") 0
						span :
						span.change(data-number="3") 0
						span.change(data-number="9") 0
						span :
						span.change(data-number="5") 0
						span.change(data-number="7") 0
					.statistic__desc 
						| Longest time for a 
						a(href="https://codepen.io/oliviale/full/qLYNbE" target="_blank") pen
				
				.statistic
					.statistic__number.js-run-number
						span.change(data-number="0") 0
						span.change(data-number="1") 0
						span.change(data-number="1") 0
						span :
						span.change(data-number="5") 0
						span.change(data-number="3") 0
						span :
						span.change(data-number="0") 0
						span.change(data-number="7") 0
					.statistic__desc This pen!
	
	.slide.slide-four.to-animate
		.main-header
			h1 Inspiration
				small Click on a box to generate a random pen.
		.random-picker
			button.js-pick(value="everyday") Everyday
			button.js-pick(value="favorites") Favorites
			button.js-pick(value="concepts") Concepts
			button.js-pick(value="jokes") Jokes
			div.js-magic-lamp
				h4 

	.slide.slide-six
		.main-header
			h1 Questions?
		.picture__border
			img.conf(src="https://pbs.twimg.com/media/D4T6bEFUUAAGKRq.jpg")
			figcaption 
				|With Chris Coyier, co-founder of Codepen at Smashing Conference SF
              
            
!

CSS

              
                body {
	font-family: "Merriweather", sans-serif;
	line-height: 1.4;
	color: #111;
}

a {
	text-decoration: none;
	color: #111;
	display: inline-block;
	margin-bottom: 5px;
	border: 3px dotted;
	border-width: 0 0 3px 0;
	text-transform: uppercase;
	transition: .4s ease-in-out;
	&:hover {
		border-style: solid;
		text-decoration: none !important;
	}
}

@mixin center-hor {
	margin: auto;
	left: 0;
	right: 0;
}

$toggl-red: #e24f54;
$purple: #ce98df;
$beige: #feeede;
$orange: #fcd1a5;

* {
	box-sizing: border-box;
	&:before,
	&:after {
		content: "";
		position: absolute;
	}
}

strong {
	font-weight: 700;
}

/*MAIN*/

.slideshow {
	display: grid;
	grid: 100% / 700px auto 700px auto repeat(6, auto);
	max-height: 100vh;
	white-space: nowrap;
	overflow-y: hidden;
	padding: 10px;
}

.slide {
	max-height: 100vh;
	position: relative;
	white-space: normal;
	&.active {
		.main-header, .whycodepen-content {
			opacity: 1;
			transform: translateY(0) translateX(0);
		}
	}
}

.main-header {
	position: relative;
	width: 100%;
	opacity: 0;
	transform: translateY(-50px) translateX(-50px);
	transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	h1 {
		transition: 0.2s ease;
		letter-spacing: 3px;
		font: 900 60px 'Concert One', cursive;
		text-transform: uppercase;
		small {
			font: 500 20px 'Merriweather', serif;
			color: #999;
			display: block;
			text-transform: none;
			letter-spacing: 0;
		}
	}
}

/* TOGGL MAN SLIDE */

.toggl-man {
	position: absolute;
	width: 272px;
	height: 128px;
	border-radius: 30% / 50%;
	background: $toggl-red;
	@include center-hor;
	bottom: 0;
	&:before {
		width: 90%;
		height: 88px;
		bottom: -8px;
		background: inherit;
		@include center-hor;
		border-radius: 50%;
	}
	&:after {
		width: 90%;
		height: 88px;
		top: -8px;
		background: inherit;
		@include center-hor;
		border-radius: 50%;
	}
}

.toggl-eye {
	position: absolute;
	width: 112px;
	height: 125px;
	top: -84px;
	background: inherit;
	@include center-hor;
	border-radius: 100% 100% 0 0;
	&__ball {
		position: absolute;
		width: 72px;
		height: 72px;
		background: rgb(255, 253, 252);
		border-radius: 50%;
		bottom: 35px;
		@include center-hor;
		z-index: 3;
		overflow: hidden;
	}
	&__ball-inner {
		position: absolute;
		background: rgb(121, 74, 148);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		z-index: 3;
		bottom: 17px;
		left: 17px;
	}
}

.toggl-mouth {
	width: 0%;
	height: 90px;
	background: none;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	margin: auto;
	top: 23px;
	border-radius: 70px 70px 100px 100px/ 40px 40px 50px 50px;
	&:before {
		background: $toggl-red;
		left: -50px;
		border-radius: 50%;
		box-shadow: inset 0 -2px 0px #444;
		width: 105px;
		height: 30px;
		top: -15px;
		z-index: 3;
	}
}

.toggl-hat {
	width: 120px;
	height: 10px;
	position: absolute;
	top: -110px;
	@include center-hor;
	border-radius: 10px;
	background: rgb(3, 205, 251);
	&:before {
		@include center-hor;
		width: 70%;
		height: 20px;
		bottom: 10px;
		background: rgb(254, 203, 71);
		z-index: 1;
	}
	&:after {
		@include center-hor;
		background: inherit;
		width: 70%;
		height: 65px;
		bottom: 0;
		border-radius: 100% 100% 0 0;
	}
}

.table {
	background: #fff;
	@include center-hor;
	width: 100%;
	height: calc(50vh - 66px);
	position: absolute;
	top: 60%;
	z-index: 10;
	border-top: 3px solid #111;
	span,
	p {
		opacity: 0;
	}
	p {
		top: 16px;
		position: relative;
		font-size: 20px;
		max-width: 400px;
		margin: auto;
		margin-bottom: 5px;
	}
	a {
		font-size: 16px;
		text-transform: none;
	}
}

.splitting .char {
	font: 900 80px 'Concert One', cursive;
	text-transform: uppercase;
	display: inline-block;
	margin: 20px 1px;
	top: 50px;
	opacity: 0;
	&:nth-child(7) {
		margin-right: 25px;
	}
	animation: slide-in 1s cubic-bezier(0.5, 0, 0.5, 1) both;
	animation-delay: calc(100ms * var(--char-index));
}

.toggl-man.active {
	animation: body-move 4s ease forwards;
	.toggl-hat {
		animation: hat-move 5s ease forwards;
	}
	.toggl-eye__ball {
		animation: blink 3s ease 1s infinite;
	}
	.toggl-eye__ball-inner {
		animation: eye-move 3.5s ease forwards 3s;
	}
	.toggl-mouth {
		transition: all 0.1s ease 7s;
		width: 82%;
		background: linear-gradient(
			to right,
			#fff 28%,
			#eee 28%,
			#eee 29%,
			#fff 29%,
			#fff 50%,
			#eee 50%,
			#eee 51%,
			#fff 51%,
			#fff 72%,
			#eee 72%,
			#eee 73%,
			#fff 73%,
			#fff
		);
		&:before {
			background: transparent;
			box-shadow: none;
			transition: 0.01s ease 7s;
		}
	}
	+ .table {
		span {
			transition: opacity 0.5s ease 3.5s;
			opacity: 1;
		}
		p {
			transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 7s;
			opacity: 1;
			top: 0;
		}
	}
}

@keyframes eye-move {
	0%,
	20%,
	92% {
		bottom: 17px;
		left: 17px;
	}
	22%,
	28% {
		bottom: 0;
		left: 3px;
	}
	50% {
		bottom: -3px;
		left: 17px;
	}
	85%,
	90% {
		bottom: 2px;
		left: 30px;
	}
}

@keyframes hat-move {
	0%,
	50%,
	65% {
		margin-top: 0;
	}
	55% {
		margin-top: -30px;
	}
	61% {
		margin-top: 10px;
	}
}

@keyframes blink {
	0%,
	8% {
		height: 72px;
	}
	10%,
	12% {
		height: 0;
	}
	14%,
	100% {
		height: 72px;
	}
}

@keyframes body-move {
	0%,
	20%,
	30% {
		bottom: 5%;
	}
	30%,
	60% {
		bottom: 15%;
	}
	65%,
	100% {
		bottom: 39%;
	}
}

@keyframes slide-in {
	from {
		transform: translateY(1em) rotate(45deg) scale(0.5);
		opacity: 0;
	}
}

.slide-one {
	text-align: center;
}

/* PROCESS SLIDE */
.slide-three {
	padding: 20px 50px;
	margin-left: 10px;
	border-left: 3px solid #111;
	display: flex;
	flex-wrap: wrap;
	.main-header {
		flex: 1 1 100%;
	}
	.process__wrapper {
		display: grid;
		grid: 100% / 1fr 1000px;
		margin-top: 5em;
	}
	.process__items {
		display: flex;
		flex-direction: column-reverse;
		position: relative;
		writing-mode: vertical-rl;
		width: 80%;
		height: 70vh;
    align-self: flex-end;
    margin-right: 3em;
		.process__card {
			opacity: 0;
			transform: scale(0.5);
			transition: .4s ease-in-out;
		}
		@for $i from 0 to 6 {
			.process__card:nth-child(#{$i + 1}) {
				transition-delay: $i * 0.25s;
			}
		}
		.process__card:not(:first-child) {
			margin-left: 2.5em;
		}
		h3 {
			font: 28px 'Concert One';
			text-transform: uppercase;
			span {
				text-transform: none;
				display: inline-block;
				font: 18px 'Merriweather', serif;
				margin-top: 20px;
				color: #999;
			}
		}
	}
	.sketch-example {
		padding: 0 40px;
		display: flex;
		border-left: 1px solid #111;
		> div {
			padding: 0 .5em;
			flex: 1;
			transition: .4s ease;
			opacity: 0;
			&:nth-child(1) {
				transform: translateY(-100px);
			}
			&:nth-child(2) {
				transform: translateY(100px);
			}
		}
		img {
			width: 100%;
		}
		figcaption {
			display: block;
			text-align: center;
			font: 22px Gochi Hand;
			margin-top: 15px;
		}
		&.active div {
			opacity: 1;
			transform: translateY(0);
		}
	}
	&.active {
		.process__card {
			opacity: 1;
			transform: scale(1);
		}
	}
}




/* WHY I DO IT */

.slide-two {
	border-left: 3px solid #111;
	padding: 20px 50px;
	display: flex;
	flex-wrap: wrap;
	&.active {
		.whycodepen-content {
			opacity: 1;
			transform: translateY(0) translateX(0);
		}
	}
	.whycodepen-content {
		align-self: flex-end;
		flex: 1 1 100%;
		position: relative;
		font-size: 18px;
		line-height: 1.6;
		transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		opacity: 0;
		transform: translateY(50px) translateX(50px);
	}
	.reason {
		margin-bottom: 1.5em;
	}
	h4 {
		font: 28px 'Concert One', cursive;
		text-transform: uppercase;
		margin-bottom: 6px;
	}
	a {
		font-family: 'Concert One', cursive;
		margin: 0 5px;
	}
}



/*data content*/
.data-wrapper {
	display: flex;
	margin: auto;
	max-width: 1100px;
}

.slide-five {
	border-left: 3px solid #111;
	padding: 20px 0 20px 50px;
	display: grid;
	grid: 100px auto / 500px 400px;
}

.data-content {
	width: 100%;
	margin-top: 2em;
	height: 400px;
	position: relative;
	grid-column: 1;
}

.data-bubble {
	width: var(--width);
	height: var(--width);
	background: var(--color);
	border-radius: 50%;
	position: absolute;
	opacity: 0;
	transition: 0.3s ease;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	&__info {
		width: 120px;
		text-shadow: 2px solid;
		line-height: 1.2;
		position: absolute;
		padding: 8px 12px;
		border-radius: 5px;
		font-size: 12px;
		left: 50%;
		margin-left: -60px;
		bottom: 30%;
		text-align: center;
		opacity: 0;
		transition: 0.4s ease;
		background: #fff;
		color: #000;
	}
	&:hover {
		opacity: 1;
		z-index: 100;
		.data-bubble__info {
			opacity: 1;
			bottom: 20%;
		}
	}
	&:nth-child(2) {
		transform: translateY(115px) translateX(120px);
	}
	&:nth-child(3) {
		transform: translateY(-50px) translateX(-160px);
	}
	&:nth-of-type(4) {
		transform: translateY(-120px) translateX(-80px);
	}
	&:nth-child(5) {
		transform: translateY(145px) translateX(20px);
	}
	&:nth-child(6) {
		transform: translateY(17px) translateX(140px);
	}
	&:nth-child(7) {
		transform: translateY(45px) translateX(-130px);
	}
	&:nth-child(8) {
		transform: translateY(-50px) translateX(125px);
	}
	&:nth-child(9) {
		transform: translateY(100px) translateX(-90px);
	}
	&:nth-child(10) {
		transform: translateY(-135px) translateX(-5px);
	}
	&:nth-child(11) {
		transform: translateY(-120px) translateX(55px);
	}
	&:nth-child(12) {
		transform: translateY(110px) translateX(-148px);
	}
	&:nth-child(13) {
		transform: translateY(-105px) translateX(110px);
	}
	&:nth-child(14) {
		transform: translateY(120px) translateX(-40px);
	}
	&:nth-child(15) {
		transform: translateY(155px) translateX(-75px);
	}
	&:nth-child(16) {
		transform: translateY(-135px) translateX(-145px);
	}
	&:nth-child(17) {
		transform: translateY(-30px) translateX(165px);
	}
	&:nth-child(18) {
		transform: translateY(-80px) translateX(85px);
	}
	&:nth-child(19) {
		transform: translateY(160px) translateX(-35px);
	}
	&:nth-child(20) {
		transform: translateY(70px) translateX(-205px);
	}
	&:nth-child(21) {
		transform: translateY(-90px) translateX(175px);
	}
	&:nth-child(22) {
		transform: translateY(170px) translateX(-132px);
	}
}

.data-content.active {
	.data-bubble {
		opacity: 0.6;
		transition-delay: 0.3s;
		&:nth-child(3n) {
			transition-delay: 0.6s;
		}
		&:nth-child(5n) {
			transition-delay: 0.7s;
		}
		&:nth-child(7n) {
			transition-delay: 1.1s;
		}
		&:nth-child(2n + 3) {
			transition-delay: 0.8s;
		}
	}
}

.data-numbers {
	grid-row: 1 / span 2;
	grid-column: 2;
	padding: 0 50px;
	border-left: 1px solid #111;
	text-align: center;
	align-self: center;
	.statistic {
		margin: 2em auto;
		transition: .3s ease;
		opacity: 0;
		transform: translateY(50px);
		&__number {
			cursor: pointer;
			margin-bottom: 5px;
		}
	}
	&.active .statistic {
		opacity: 1;
		transform: translateY(0);
	}
}

.js-run-number {
	font: 50px "ZCOOL QingKe HuangYou";
	&.clear-animation {
		pointer-events: none;
	}
}

.slide-four {
	border-left: 3px solid #111;
	padding: 20px 30px 20px 50px;
	display: grid;
	grid-template-rows: 100px 1fr;
	.random-picker {
		margin: 2em auto 0;
		display: grid;
		height: 90%;
		grid-template-columns: repeat(2, 250px) 100px;
		grid-auto-rows: 1fr 1fr;
		button {
			cursor: pointer;
			background: linear-gradient(to top right, #444, #111);
			border: none;
			font: 700 28px Montserrat;
			color: #fff;
			text-transform: uppercase;
			opacity: 0;
			transition: .3s ease;
			&:nth-child(1) {
				transform: translateY(-50px) translateX(-50px);
			}
			&:nth-child(2) {
				transform: translateY(-50px) translateX(50px);
			}
			&:nth-child(3) {
				transform: translateY(50px) translateX(-50px);
			}
			&:nth-child(4) {
				transform: translateY(50px) translateX(50px);
			}
		}
		.js-magic-lamp {
			grid-column: 3;
			grid-row: 1 / span 2;
			padding-left: 20px;
			margin-left: 20px;
			writing-mode: vertical-rl;
			border-left: 1px solid #111;
			text-align: center;
			font: 600 28px 'Concert One';
			text-transform: uppercase;
			a {
				font-size: 20px;
				margin-right: -2px;
				display: block;
				color: #999;
				margin-top: 10px;
				font-weight: 400;
				font-size: 20px;
				border-width: 0;
			}
		}
	}
	&.active button {
		opacity: 1;
		transform: translateX(0) translateY(0) !important;
	}
}

.slide-six {
	padding: 20px 50px;
	border-left: 3px solid #333;
	text-align: center;
	.main-header {
		opacity: 1;
		transform: translateY(0);
	}
	.picture__border {
		width: 100%;
		max-width: 270px;
		height: 400px;
		background: #f9f9f9;
		padding: 20px 10px 50px;
		transform: rotate(5deg);
		position: relative;
		margin: 4em auto;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
		&:after {
			content: "";
			width: 55%;
			height: 35px;
			top: -15px;
			z-index: 5;
			left: 25%;
			transform: rotate(-2deg);
			position: absolute;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
			background: rgba(220, 220, 220, 0.4);
		}
		img {
			width: 100%;
			height: 92%;
			object-fit: cover;
		}
		figcaption {
			margin: 10px 0;
			text-align: center;
			display: block;
			padding: 0 15px;
			font: 17px/1 "Gochi Hand", cursive;
		}
	}
}


::-webkit-scrollbar {
	height: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 1);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .8);
}


.slide-link-one {
	margin-left: 10px;
	border-left: 3px solid #111;
	padding: 0 30px;
	display: flex;
  flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	p.links {
		writing-mode: vertical-rl;
		text-orientation: upright;
	}
	a {
		border: 4px dotted #fff;
		border-width: 4px 0;
		font: 20px 'Concert One', cursive;
		letter-spacing: 0;
		padding: 10px 0;
		opacity: 0;
		position: relative;
		transform: scale(.5);
		&:hover {
			border-color: #111;
		}
	}
	&.active {
		a {
			opacity: 1;
			transform: scale(1);
		}
	}
}

code {
	display: inline-block;
	background: #f4f4f4;
	padding: 4px 8px;
	font-size: 80%;
	border-radius: 8px;
	margin: 1px 3px;
	vertical-align: middle;
}
              
            
!

JS

              
                //activating togglman
$(document).ready(function() {
	$(".toggl-man").addClass("active");
	setTimeout(function() {
		Splitting();
	}, 3500);
});

//for scrolling left to right with mousewheel
$(document).ready(function() {
	$(".slideshow").bind("mousewheel", function(e) {
		this.scrollLeft -= e.originalEvent.wheelDelta;
	});
	$(".slideshow").bind("DOMMouseScroll", function(e) {
		this.scrollLeft += e.originalEvent.detail * 40;
	});
});

// pen picker
var everyday = [
	{ url: "qggOog", title: "CSS Grid: Bathroom Tiles" },
	{ url: "rPjgmB", title: "CSS Grid: Excel Spreadsheet" },
	{ url: "aPwaXm", title: "CSS Grid: Bullet Journal" },
	{ url: "moLrBq", title: "CSS Grid: Floor Plan" }
];

var favorites = [
	{ url: "LLgMYV", title: "Lines by Lorde" },
	{ url: "GvQrxj", title: "Sugar, Butter, Flour" },
	{ url: "GPXozx", title: "CSS Grid: Recipe Layout" },
	{ url: "WJoqNZ", title: "Waitress: Slider Animation" },
	{ url: "qpPByV", title: "Dota 2 Badges" },
	{ url: "ZwWbNg", title: "Marauder's Map" },
	{ url: "JxVZpX", title: "CSS Grid: Monopoly" }
];

var jokes = [
	{ url: "vPvvyr", title: "Obvious CTA buttons" },
	{ url: "yvVVjG", title: "The Medal Factory" }
];

var concepts = [
	{ url: "YgzNzK", title: "Hover Effect for Headers" },
	{ url: "oVBzao", title: "CSS Scroll Snap Idea" },
	{ url: "gKParr", title: "Menu Button Animation" }
];

$(".js-pick").on("click", function() {
	var typeToPick = $(this).val();
	var item;
	if (typeToPick == "everyday") {
		item = everyday[Math.floor(Math.random() * everyday.length)];
	} else if (typeToPick == "harrypotter") {
		item = harrypotter[Math.floor(Math.random() * harrypotter.length)];
	} else if (typeToPick == "favorites") {
		item = favorites[Math.floor(Math.random() * favorites.length)];
	} else if (typeToPick == "concepts") {
		item = concepts[Math.floor(Math.random() * concepts.length)];
	} else if (typeToPick == "jokes") {
		item = jokes[Math.floor(Math.random() * jokes.length)];
	}
	$(".js-magic-lamp").text(item.title);
	$(".js-magic-lamp").append(
		'<a target="_blank" href="https://codepen.io/oliviale/full/' +
			item.url +
			'">Visit</a>'
	);
});

/*counter*/
function runNumbers() {
	$(".js-run-number").each(function() {
		var parent = $(this);
		$("span.change", $(this)).each(function() {
			var currentVal = 0;
			var startVal = $(this).text();
			var target = $(this);
			var endVal = $(this).data("number");
			currentVal = startVal;
			var i = setInterval(function() {
				if (currentVal == endVal) {
				} else {
					currentVal++;
					$(target).text(currentVal);
					$(parent).addClass("clear-animation");
				}
			}, 100);
		});
	});
}

$(".slideshow").scroll(function() {
	scrollIntoView(".slide-link-one");
	scrollIntoView(".slide-two");
	scrollIntoView(".slide-three");
	scrollIntoView(".slide-four");
	scrollIntoView(".sketch-example");
	scrollIntoView(".slide-five");
	scrollIntoView(".data-content");
	scrollIntoView(".data-numbers");
	if ($(".data-numbers").hasClass("active")) {
		runNumbers();
		endScrollCheck('.slide-four');
	}
});

function scrollIntoView(elem) {
	var scrollPosition = $("body").scrollLeft();
	if (scrollPosition > $(elem).offset().left - 650) {
		$(elem).addClass("active");
	} else {
		$(elem).removeClass("active");
	}
}

function endScrollCheck(elem) {
		var ending_right = ($(window).width() - ($(elem).offset().left + $(elem).width()));
	if (ending_right > 500) {
		$('.slide-four').addClass('active');
	}
}

              
            
!
999px

Console