cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <!-- WATCH IT FULLSCREEN PLZ -->

<div class="divider divider--vertical"></div>
	<div class="divider divider--vertical"></div>
	<div class="divider divider--vertical"></div>
	<div class="divider divider--horizzontal"></div>
	<div class="divider divider--horizzontal"></div>
	<div class="hero-container">
		<div class="cta cta--prev">
			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M30.55 39.69c.567-.475.645-1.314.17-1.882L20.044 25 30.72 12.19c.474-.566.396-1.408-.17-1.88-.564-.474-1.407-.397-1.88.17L17.28 24.145c-.208.248-.312.552-.312.855s.104.608.31.855L28.67 39.52c.474.566 1.316.642 1.882.17z"/></svg></svg>
		</div>
		<div class="cta cta--next">			
			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M19.45 10.31c-.567.475-.644 1.314-.17 1.88L29.956 25 19.28 37.81c-.473.566-.396 1.408.17 1.88s1.408.397 1.88-.17l11.39-13.664c.208-.248.312-.552.312-.855s-.104-.607-.31-.854L21.33 10.48c-.474-.566-1.316-.643-1.882-.17z"/></svg>
		</div>
		<div class="cta cta--down">
			<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path fill="#ffffff" d="M40.69 19.87c-.475-.568-1.313-.645-1.88-.172L26 30.374 13.19 19.697c-.565-.472-1.408-.395-1.88.17-.474.567-.397 1.41.17 1.882l13.665 11.386c.248.207.552.312.854.312.303 0 .607-.104.854-.312L40.52 21.75c.567-.474.644-1.315.17-1.88z"/></svg>
		</div>
		<div class="text-wrapper">
			<div data-slide="0" class="text-container text-container--0 text--active">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Life is a <br> wild adventure</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Life is a <br> wild adventure</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Life is a <br> wild adventure</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">be wild</div>
				</div>
			</div>
			<div data-slide="1" class="text-container text-container--1">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">I wanna be <br> young forever</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">I wanna be <br> young forever</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">I wanna be <br> young forever</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">teenager</div>
				</div>
			</div>
			<div data-slide="2" class="text-container text-container--2">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Breathtaking <br> landscapes</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Breathtaking <br> landscapes</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Breathtaking <br> landscapes</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">panorama</div>
				</div>
			</div>
			<div data-slide="3" class="text-container text-container--3">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the power <br> of nature</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the power <br> of nature</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the power <br> of nature</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">power</div>
				</div>
			</div>
			<div data-slide="4" class="text-container text-container--4">
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the sense <br> of freedom</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the sense <br> of freedom</div>
					</div>
				</div>
				<div class="text-slice">
					<div class="text-main-wrapper">
						<div class="text-main-inner">Feel the sense <br> of freedom</div>
					</div>
				</div>
				<div class="text-label-container">
					<div class="text-label">infinity</div>
				</div>
			</div>
		</div>
		<div class="slider-container">
			<div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
				<div class="slider-slice">
					<div class="slider-slice-imageContainer image--0 image--active">
						<img src="https://i.imgsafe.org/d24eba4717.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--1">
						<img src="https://i.imgsafe.org/d24e54bee3.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--2">
						<img src="https://i.imgsafe.org/d24ed4cc27.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--3">
						<img src="https://i.imgsafe.org/d24f00e5ee.jpg" alt="">
					</div>
					<div class="slider-slice-imageContainer image--4">
						<img src="https://i.imgsafe.org/d24d4804af.jpg" alt="">
					</div>
				</div>
			</div>
			<div class="slider-overlay"></div>
		</div>
	</div> <!-- CLOSE HEADER-->
	<section class="page-container">
		<article data-article="0">
			<h1>Life is a <br> wild adventure</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="1">
			<h1>I wanna be <br> young forever</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="2">
			<h1>Breathtaking <br> landscapes</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="3">
			<h1>Feel the power <br> of nature</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
		<article data-article="4">
			<h1>Feel the sense <br> of freedom</h1>
			<p>I still remember the first time I encountered African wildlife in their native habitat. I was staying at the Sabi camp in South Africa. We set out on foot at the crack of dawn and even though it was a quarter century ago.I remember that walk with the ranger like it was yesterday. The elephants. The hippos. The lions. And as many times as I've seen Mother Nature at work, I've never lost that initial sense of awe at the power of these amazing creatures. But as I've come to learn, there is also fragility.</p>
			<p>Today is World Wildlife Day and it is an important wake up call for all of us. We need to understand more about what would happen if thousands of species were to go extinct.</p>
			<h3>Look Into Their Eyes.</h3>
			<p>I have also spent quite a bit of time recently in our Museum at the National Geographic Society's headquarters just downstairs from my office. Our current exibit , Photo Ark, continues to take my breath away; it brings a new lens to the fragility of wildlife.</p>
			<p>Since beginning this project in 2005, Joel has traveled around the world and completed portraits of more than 5,000 species, most photographed on either a plain black or white background. No matter its size, each animal is treated with the same amount of attention and respect. The resulting portraits are not just stunningly beautiful, but intimate and moving. Joel has said, "It's the eye contact that moves people. It engages feelings of compassion and a desire to help". As I walked through the exhibit, I too noticed the power of the animals' eyes.</p>
			<p>What Joel is doing is extraordinary, creating portraits of many animals that could be extinct if we are not careful, so that we will be more careful. There are animals that we may have never heard of, like the Okapi, the Axolotl, or the Mandrill. As I walked around the exhibit, one picture in particular caught my attention: the Northern White Rhinocerous. This animal died just one week after Joel's photo was taken. Though three more remain, none are expected to be able to reproduce due to old age. These are the last of their kind.</p>
			<p>The magnitude of the situation is unimaginable. Just last year, poachers slaughtered an estimated 35,000 African elephants, amounting to over 95 elephants killed per day. This year alone, wildlife trafficking is expected to generate approximately $10 billion per year in illegal profits for sophisticated criminal syndicates.</p>
			<p>Whether it's stopping illicit wildlife trafficking or being more aware that there are thousands of animals that could become extinct (thanks to the most extraordinary and unusual Photo Ark exhibit), this World Wildlife Day is a time to take note.</p>			
		</article>
	</section>
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Biryani:400,900';
body{
	margin: 0;
	padding: 0;
	color: #424242;
	font-family: 'Georgia', serif;
	font-size: 21px;
	line-height: 34px;
}
body.u-blockScroll{
	height: 100%;
	overflow: hidden;
}
h1{
	font-family: 'Biryani', sans-serif;
	text-align: center;
	font-size: 80px;
	line-height: 73px;
	text-align: left;
    font-weight: 700;
    opacity: 1;
    margin-bottom: 30px;
}
h3{
	font-family: 'Biryani', sans-serif;
	opacity: 0.4;
	font-weight: 400;
	margin-top: 40px;
	margin-bottom: 5px;
	font-size: 32px;
}
p{
	margin-top: 0;
	margin-bottom: 29px;
}
.hero-container{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 100;
}
.divider{
	position: fixed;
	display: inline-block;
	background: rgba(130, 130, 130, 0.12);
	z-index: 200;
}
@for $i from 1 to 4{
	.divider--vertical:nth-of-type(#{$i}){
		left: #{25% * $i};
		width: 2px;
		top: 0;
		height: 100%;
	}
}
@for $k from 1 to 3{
	.divider--horizzontal:nth-of-type(#{$k + 3}){
		top: #{33vh * $k};
		width: 100%;
		height: 2px;
	}
}
.text-container{
	position: absolute;
}
.text-wrapper{
	position: absolute;
	z-index: 10;	
	left: 10%;
	bottom: 40%;
	font-family: 'Biryani', sans-serif;
	color:white;
}
.text-slice{
	width: 33.33%;
    white-space: nowrap;
    overflow: hidden;
    float: left;
    padding: 20px 0px;
}
.text-slice:nth-of-type(2) .text-main-inner{
	transform: translateX(-100%);
}
.text-slice:nth-of-type(3) .text-main-inner{
	transform: translateX(-200%);
}
.text-main-wrapper{
	padding-top: 40px;
	font-size: 120px;
	line-height: 110px;
	font-weight: 900;
	text-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	@media screen and (max-width: 1000px){
		font-size: 80px;
		line-height: 85px;
	}
}
$durationLabelContainer: 1s;
$durationLabelTriangle: 0.4s;
$delayLabelContainer: 1s;
$delayLabelTriangle: 1.2s;
.text-label-container{
	position: absolute;
    display: inline-block;
    overflow: hidden;
    width: 0px;
    height: 35px;
    left: -10px;
    top: 100px;
    transition: all $durationLabelContainer 0s;
}
.text-label{
	display: inline-block;
	position: absolute;
	height: 25px;
	padding: 0px 10px;
	line-height: 28px;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 5px;
	text-transform: uppercase;	
	font-weight: 900;
	&:before{
		content:"";
		position: absolute;
		width: 0px;
		height: 0px;
		border-top: 0px solid transparent;
		border-bottom: 5px solid transparent;
		transform: rotate(-71deg);
		transform-origin: top left;
		left: 0;
		top: 25px;
		z-index: -1;
		transition: all $durationLabelTriangle 0s;
	}
}
.text--active .text-label-container{
	width: 200px;
	transition-delay: $delayLabelContainer;
}
.text--active .text-label:before{
	border-top: 25px solid transparent;
	transition-delay: $delayLabelTriangle;

}
.text-container--0 .text-label{
	background: #169216;
	&:before{
		border-left: 13px solid darken(#169216, 20);
	}
}
.text-container--1 .text-label{
	background: #C9567D;
	&:before{
		border-left: 13px solid darken(#C9567D, 20);
	}
}
.text-container--2 .text-label{
	background: #24c7c0;
	&:before{
		border-left: 13px solid darken(#24c7c0, 20);
	}
}
.text-container--3 .text-label{
	background: #6593d6;
	&:before{
		border-left: 13px solid darken(#6593d6, 20);
	}
}
.text-container--4 .text-label{
	background: #1fbeca;
	&:before{
		border-left: 13px solid darken(#1fbeca, 20);
	}
}
.slider-container{
	position: relative;
	overflow: hidden;
	&:after{
		content: "";
		display: table;
		clear: both;
	}
}
.slider-overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(10,10,10);
	opacity: 0.2;
}
.slider-slice{
	position: relative;
	width: 25%;
	height: 33.33vh;
	float: left;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	img{
		position: relative;
	}
}
.slider-slice-imageContainer{
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
}
.slider-slice-imageContainer.image--active{
}
.slider-slice:nth-of-type(1) img{  
  top:0;
  left:0;
}
.slider-slice:nth-of-type(2) img{  
  top:0;
  left:-25vw;
}
.slider-slice:nth-of-type(3) img{  
  top:0;
  left:-50vw;
}
.slider-slice:nth-of-type(4) img{  
  top:0;
  left:-75vw;
}
.slider-slice:nth-of-type(5) img{  
  top:-33.33vh;
  left:0;
}
.slider-slice:nth-of-type(6) img{  
  top:-33.33vh;
  left:-25vw;
}
.slider-slice:nth-of-type(7) img{  
  top:-33.33vh;
  left:-50vw;
}
.slider-slice:nth-of-type(8) img{  
  top:-33.33vh;
  left:-75vw;
}
.slider-slice:nth-of-type(9) img{  
  top:-66.66vh;
  left:0;
}
.slider-slice:nth-of-type(10) img{  
  top:-66.66vh;
  left:-25vw;
}
.slider-slice:nth-of-type(11) img{  
  top:-66.66vh;
  left:-50vw;
}
.slider-slice:nth-of-type(12) img{  
  top:-66.66vh;
  left:-75vw;
}

.cta{
	position: fixed;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	z-index: 100;
	overflow: hidden;
	transform: translateZ(0);
	border: solid 2px white;
	opacity: 0.5;
	transition: all 0.2s;
	background: rgba(120,160,170,0.4);
	cursor: pointer;
	svg{
		z-index: 101;
		position: absolute;
		transition: all 0.2s ease-in-out;
		opacity: .3;
	}
	&:hover{
		opacity: 1;
	}
	&:hover svg{
		opacity: 1;
	}
}
.cta--next{
	right: 20px;
	top: 50%;
	&:hover svg{
		transform: translateX(4%);
	}
}
.cta--prev{
	left: 20px;
	top: 50%;	
	&:hover svg{
		transform: translateX(-4%);
	}
}
.cta--down{
	bottom: 20px;
	left: 50%;
	margin-left: -25px;
	&:hover svg{
		transform: translateY(4%);
	}
}
.page-container{
	position: relative;
	max-width: 700px;
	width: 90%;
	margin: 150px auto 0 auto;
}
            
          
!
            
              (function($){
	var image 				= $(".slider-slice img"),
		imageContainer 		= $(".slider-slice-imageContainer"),
		sliderSlice 		= $(".slider-slice"),
		imageActive 		= $(".image--active"),
		textActive 			= $(".text--active .text-main-wrapper"),
		textSlice			= textActive.find(".text-main-wrapper"),
		labelContainer		= $(".text-label-container"),
		sliderOverlay		= $(".slider-overlay"),
		CTA 				= $(".cta"),
		articleTitle		= $("article h1"),
		articlePara 		= $("article p"),
		articleSubTitle		= $("article h3"),
		activeLabel 		= $(".text--active .text-label"),
		vw,
		vh,
		delay 				= 0.06,
		delays 				= [];

	TweenMax.set(imageContainer, {xPercent: "100"});
	TweenMax.set(imageActive, {xPercent: "0"});
	TweenMax.set($(".text-container:not(.text--active) .text-main-wrapper"), {xPercent: 100});
	TweenMax.set(articleTitle, {autoAlpha:0, display:'none'});
	TweenMax.set(articlePara, {autoAlpha:0, display:'none'});
	TweenMax.set(articleSubTitle, {autoAlpha:0, display:'none'});

	$("body").addClass("u-blockScroll");



	for (var i = 0; i < 4; i++) {
		delays.push(i*delay);
	};

	/********************************
		FIT THE WINDOWS WITH THE IMAGES
	********************************/
	function positionImages(){
		vw 		= $(window).width();
		vh 		= $(window).height();
		var imageW 	= image.width();
		var imageH 	= image.height();
		ratioImg 	= imageW / imageH;
		ratioW 		= vw / vh;
		if(ratioImg > ratioW){
			image.css({"width": "auto", "height" : vh});
		}else{
			image.css({"width": vw, "height" : "auto"});
		}
	}
	positionImages();
	$(window).on("resize", positionImages);




	/********************************
		OPENING
	********************************/
	var tlOpening = new TimelineMax({delay: 2});
	var delayOpening = 0.05;
	tlOpening
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(0)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 1 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(1)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 2 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(2)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(3)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 4 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(4)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 2 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(5)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(6)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(7)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(8)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 3 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(9)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 4 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(10)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 5 * delayOpening)
		.fromTo(($(".slider-slice-imageContainer.image--active").eq(11)), 1, {xPercent: -100}, {xPercent:0, ease: Power2.easeInOut}, 6 * delayOpening)
		.staggerFromTo(($(".text-container.text--active .text-main-wrapper")), 1, {xPercent: -100}, {xPercent: 0, ease: Power2.easeInOut}, 0.2, "-=1")
		.fromTo(activeLabel, 1, {autoAlpha:0}, {autoAlpha: 1})
		.fromTo(CTA, 0.6, {autoAlpha:0}, {autoAlpha:1});


	/********************************
		SLIDE BACKGROUND & TEXT SLIDE
	********************************/
	var	durationSlide 	= 0.8;
	var	durationText 	= 0.8;
	var isMoving 		= false;
	function slideBackground(fromRight){
		isMoving = true;
		var tlSlideBackground 	= new TimelineMax({onComplete: function(){ isMoving = false}});
		var tlSlideText 		= new TimelineMax();
		imageActive 			= $(".image--active");

		if(fromRight === true){
			var from = 105;
			var to = -100;
		}else{
			var from = -105;
			var to = 100;
		}
		var k = 0;

		imageActive.each(function(i,el){
			var parent = $(el).closest(".slider-slice");
			if(fromRight === true){
				var nextSlice = $(el).next();				
			}else{
				var nextSlice = $(el).prev();	
			}
			if (nextSlice.is(':last-child') || nextSlice.is(':first-child')) {
				parent.find(".slider-slice-imageContainer").eq(0).appendTo(parent);
			}
			if(nextSlice.index() == -1){
				parent.find(".slider-slice-imageContainer").eq(0).appendTo(parent);
				var nextSlice = $(el).prev();
			}
			tlSlideBackground
				.to(el, (durationSlide * 1.1), {xPercent: to, ease: Power2.easeInOut}, delays[k])
				.fromTo(nextSlice, durationSlide, {xPercent: from}, {xPercent:0, ease: Power2.easeInOut}, delays[k])
			$(el).removeClass("image--active");
			nextSlice.addClass("image--active");
			k++;
			if(k==4){
				k=0;
			}
		});

		// SLIDE TEXT
		k= 0;
		textActive.each(function(i, el){
			var parent = $(el).closest(".text-container");
			if(fromRight === true){
				var nextText = parent.next().find(".text-main-wrapper");
			}else{
				var nextText = parent.prev().find(".text-main-wrapper");	
			}
			if (nextText.closest(".text-container").is(':last-child') || nextText.closest(".text-container").is(':first-child')) {
				console.log("yo, ultimi");
				$(".text-wrapper .text-container:first-child").appendTo(parent.closest(".text-wrapper"));
			}
			if(nextText.index() == -1){
				parent.eq(0).appendTo(parent.closest(".text-wrapper"));
				var nextText = parent.prev().find(".text-main-wrapper");
			}
			tlSlideText
				.to(el, durationText, {xPercent: to, ease: Power2.easeInOut}, (delays[k])*1.2)
				.fromTo(nextText, durationText, {xPercent: from}, {xPercent:0, ease: Power2.easeInOut}, (delays[k])*1.2)
			parent.removeClass("text--active");
			nextText.closest(".text-container").addClass("text--active");
			k++;
			if(k==4){
				k=0;
			}
			console.log(parent.first());

		});
		imageActive = $(".image--active");
		textActive = $(".text--active .text-main-wrapper");

	}

	/********************************
		CTA ACTIONS
	********************************/
	$(".cta--next").click(function(){
		var fromRight = true;
		if(!(isMoving)){
			slideBackground(fromRight);			
		}
	});
	$(".cta--prev").click(function(){
		var fromRight = false;
		if(!(isMoving)){
			slideBackground(fromRight);			
		}
	});
	$(".cta--down").click(function(){
		activeLabel		= $(".text--active .text-label");
		activeSlide 	= $(".text--active").attr("data-slide");
		var article 			= $("[data-article="+ activeSlide + "]article");
		var articleTitle		= $("[data-article="+ activeSlide + "]article h1");
		var articlePara 		= $("[data-article="+ activeSlide + "]article p");
		var articleSubTitle		= $("[data-article="+ activeSlide + "]article h3");

		var tlSlideUp 		= new TimelineMax(),
			tlSlideTextUp 	= new TimelineMax(),
			tlArticleShow 	= new TimelineMax(),
			tlMainSlideUp	= new TimelineMax({ onComplete: function(){TweenMax.set($(".hero-container"), {autoAlpha:0}) }});

		tlArticleShow
				.fromTo(articleTitle, 2, {y:50, autoAlpha:0},{y:0,autoAlpha:1, ease:Power4.easeOut, display:'block'}, "sliderOut-=0.5")
		article.children(":not(h1)").each(function(i,el){	
			tlArticleShow		
				.fromTo(el, 2.2, {y:20, autoAlpha:0},{y:0,autoAlpha:1, ease:Power4.easeOut, display:'block'}, ((i * 0.2)+0.6))
		});

		imageActive.each(function(i,el){
			k = 0;
			tlSlideUp
				.to(el, 0.8, {yPercent: -101, ease: Power2.easeInOut}, delays[k])
			k++;
			if(k==4){
				k=0;
			}
		});
		textActive.each(function(i, el){
			tlSlideTextUp
				.to(el, 0.8, {yPercent: -110, ease: Power2.easeInOut}, delays[k])
		});
		tlMainSlideUp
			.to(CTA, 0.2, {autoAlpha: 0})
			.add(tlSlideUp)
			.add(tlSlideTextUp, '0.2')
			.to(activeLabel, 0.8, {top: -40, ease: Power2.easeInOut}, "-=0.8")
			.to(sliderOverlay, 0.2, {autoAlpha: 0, onComplete: function(){ $("body").removeClass("u-blockScroll")}}, "-=0.5")
			.add("sliderOut")
			.add(tlArticleShow);
		tlMainSlideUp.play();

		


	});
})(jQuery);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console