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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              main
	.page__wrapper.magazine
		.page.page-cover.active
			.controls
				.controls__name
				a.next.js-next Next
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/magazinecover.jpg")
			h1 
				| A Tribute 
				br
				| to the Avengers
				small Exploring Avengers: Endgame, the highest-grossing movie worldwide and the future of the Marvel Cinematic Universe
			
				
		.page.page-navigator
			.controls
				.controls__name
					strong 01
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			h1.title 
				| The End of An Era
				small There are 21 movies leading up to Avengers: Endgame. Should you run a Marvel Marathon, here are they in the order of the MCU timeline. You will need 2,867 minutes (48 hours).
			- var movies = [{ time: "1943 – 1945", movie: "Captain America: The First Avenger", text: "We see the creation of the first super-soldier." }, { time: "1995", movie: "Captain Marvel", text: "Carol Danvers fall to Earth and begin a hunt for the shape-shifting Skrull aliens." }, { time: "2010", movie: "Iron Man", text: "Captured by a terrorist organization, Tony Stark designs The first Iron Man suit to help him escape." }, { time: "2010", movie: "Iron Man 2", text: "Stark has to keep the government away from his suit tech. We meet the Black Widow and War Machine for the first time." }, { time: "2010", movie: "The Incredible Hulk", text: "The very first MCU movie follows Bruce Banner on the run from General Thunderbolt Ross and the US Military." }, { time: "2011", movie: "Thor", text: "The God of lightning has been banished to Earth from Asgard by his father Odin, all thanks to the trickery of his brother, Loki." }, { time: "2012", movie: "The Avengers", text: "The Avengers Initiative is live, battling Loki's army in New York City. We see Thanos for the first time." }, { time: "2012", movie: "Iron Man 3", text: "The film takes place six months after The Avengers in which Tony Stark deals with PTSD." }, { time: "2013", movie: "Thor: The Dark World", text: "Thor battles the Dark Elves, who are seeking the Aether, which is later revealed to be the Reality Stone." }, { time: "2014", movie: "Captain America: The Winter Soldier", text: "Captain America's closest friend returns from the dead as the Winter Soldier. This film introduces The Falcon." }, { time: "2014", movie: "Guardians of the Galaxy", text: "Star-Lord forms a ragtag group of outcasts with Gamora, Groot, Drax and Rocket. Nebula is also introduced."},{ time: "2014", movie: "Guardians of the Galaxy 2", text: "The GotG come face to face with a godlike entity known as Ego. Gamora repairs her relationship with Nebula."}];
			each val, index in movies
				.navigator
					.year= val.time
					h5= val.movie
					p= val.text

			img.navigator-image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/avengersteam.png")


		.page.page-navigator.page-navigator-2
			.controls
				.controls__name
					strong 02
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			- var movies = [{ time: "2015", movie: "Ant-Man", text: "Scott Lang is recruited by Hank Pym to dawn the Ant-Man suit in order to stop the technology from becoming weaponized."},{ time: "2016", movie: "Captain America: Civil War", text: "Civil War features almost every single Avenger while adding two more to the lineup: Black Panther and Spider-Man."},{ time: "2016", movie: "Black Panther", text: "T’Challa returns home to Wakanda to become king and is challenged by a long lost relative. Shuri, Okoye and M'Baku are introduced."},{ time: "2016", movie: "Spider-Man: Homecoming", text: "Spider-Man fights to keep his friendly neighborhood safe with some mentoring from Tony Stark."},{ time: "2016 - 2017", movie: "Doctor Strange", text: "Dr Stephen travels the world searching for a cure for his hands - and stumbles upon ancient magic."},{ time: "2017", movie: "Thor: Ragnarok", text: "Thor teams up with the Hulk, Loki and Valkyrie to confront some serious familial issues, mostly in the form of an evil sister."},{ time: "2018", movie: "Ant-Man and the Wasp", text: "Scott Lang teams up with Hope and Hank Pym to retrieve Hope's mother from the Quantum Realm. Hope dawns the Wasp suit."},{ time: "2018", movie: "Avengers: Infinity War", text: "Thanos is on the hunt for the infinity stones himself. The only thing standing in his way are the Avengers, who are spread across the universe."}, { time: "2018-2023", movie: "Avengers: Endgame", text: "The Avengers reunite for a slim chance to undo the chaos after five years since the Thanos Snap."}];
			each val, index in movies
				.navigator
					.year= val.time
					h5= val.movie
					p= val.text
			img.navigator-image-2(src="https://olivia-ng.com/codepen/avengers/p-civilwar.jpg")
			img.navigator-image-3(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/infinitywar.jpg")
			.navigator-space-2
			.navigator-space-3




		- var avengersTime = [{ name: "Ironman", time: '1997'},{ name: "Capt America", time: '1688'},{ name: "Thor", time: '1105'},{ name: "Hulk", time: '970'},{ name: "Hawkeye", time: '966'},{ name: "Ant-Man", time: '881'},{ name: "Nebula", time: '866'},{ name: "Black Widow", time: '839'},{ name: "Thanos", time: '724'},{ name: "Rocket", time: '524'}];

		.page.page-timer
			.title Let's Talk Screentime
				small With more than 50 reprising roles in Endgame and only 180 minutes to spare, here are the top 10 characters who appeared on screen the most often.
			each val, index in avengersTime
				.timer
					.timer__image
					span= index+1
					.timer__hero
						h5.name= val.name
						p= val.time 
							|  seconds
			.controls
				.controls__name
					strong 03
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next


		.page.page-easter
			.controls
				.controls__name
					strong 04
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			.title Movie Details, Easter Eggs & More
				small It is known that Marvel loves their details and Easter eggs. Here are some that you may have missed, including fan theories and possible blunders.
			- mDetails = [{ image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-zola.jpg", text: "Dr. Zola's computer can be seen when Tony sneaks into the bunker. Zola was probably preparing it to transfer his consciousness as his death would come only 2 years later."}, {image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-mjolnir.png", text: "During the big battle, Thanos holds Captain America's hand and not the Mjölnir hammer because he knows he is not worthy and can't lift it."},{image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-hulk.png", text:"Hulk uses a pencil to flick the switches in the scene where they are trying to send Scott back in time, because his fingers are too big."}, {image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-tonsberg.png", text:"Tønsberg, Norway has been an important setting in the MCU. It is where the Asgardians fought armies centuries ago, where the Tesseract was stolen in WW2, where Odin dies in <em>Thor: Ragnarok</em>, and where Thor builds New Asgard in <em>Endgame</em>."}, {image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-jarvis.jpg", text:"After Tony Stark bids farewell to his father in 1970, Howard Stark is driven away by his butler, Edwin Jarvis (played by James D'Arcy, who also starred in the TV series, <em>Agent Carter</em>. This is the first ever crossover from the TV series into the movies."}, {image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-a113.jpg", text:"The words “A-113” appear on Dr Banner’s HUD. This is an obvious reference to the classroom for character animation and graphic design at the California Institute of Arts, which has made its way into various TV shows, movies and media."},  {image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-inverted.jpg", text:"Tony Stark cracks the time travel model after seeing a picture of him and Peter Parker holding an 'inverted' diploma."},{image: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-hotwire.png", text:"You can see Giant-Man pushing a Chitauri in the background even though his character is supposedly in the van with Wasp during this scene."}, { image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/detail-russos.jpg", text: "In a Reddit AMA, the Russos have revealed that there are Easter eggs that have not been discovered yet. So get watching!"}]
			each val, index in mDetails
				.easter__item
					if(val.image)
						img(src=val.image)
					.easter__text!= val.text

		.page.page-diagonal
			.controls
				.controls__name
					strong 05
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			h1.title 
				| Food: Much Importance
				small Avengers: Endgame has more scenes with food on screen or in dialogue than any other MCU movie.
			.diagonal
				- var food = [{ title: "Pez", image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pez.jpg', text: "These Pez candies were not explicitly mentioned or even remotely obvious. However, some detectives managed to spot the Hulk and Iron Man Pez on a table in Thor's house during Rocket and Hulk's visit to New Asgard." }, { title: "Hulk-inspired Ben & Jerry's", image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/avengerbenjerry.png', text: "Wong names 'Hunka-Hulka Burning Fudge' as his favorite Ben & Jerry's flavor, preferring it over 'Stark Raving Hazelnuts' in <em>Infinity War</em>. In <em>Endgame</em>, Hulk is spotted eating a very large tub of 'Hunka-Hulka Burning Fudge' while discussing the location of the infinity stones with the Avengers." },  { title: "Shawarma", image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/shawarma.png', text: "During the time heist back to New York 2012, Thor mentions that they're heading to lunch. It is not mentioned, but we all know that they are planning to have shawarma, as seen in the post-credits scene in <em>The Avengers</em> movie." }, { title: "Asgardian Ale", image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/asgardale.jpg', text: "In the scene where Valkyrie explains that Thor only comes around once a month for supplies, we catch a glimpse of a barrell of <em>Asgardian Ale</em>. Although something tells us that it's not the only alcohol that Bro Thor drinks exclusively..." }, { title: "More than 25 food items mentioned!", image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/hulktaco.jpg', text: "The first mention? In the opening scene of <em>Endgame</em>, Hawkeye and his family were planning to eat hot dogs! Other examples include Nat and her peanut butter sandwich, Hulk eating at a diner, Frigga sending soup to Loki and of course, tacos and juice pops!" }];
				each val, index in food
					img(class="show-img-"+(index+1)+" diagonal__image" src= val.image)
					div(class="show-text-"+(index+1)+" diagonal__text") 
						h5= val.title
						p!= val.text
				.free-space-1
				.free-space-2
				.free-space-3
				.free-space-4

		.page.page-thor
			.controls
				.controls__name
					strong 06
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			.product-name
				h1.title 
					| Asgard's #1 
					br
					| Weight-Gain Regiment
					small Clinically proven anti-workout plan to help you gain up to 4.5 times the weight. Why even diet and exercise?
			.photo-combo
				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/thorcombo.png" alt="Weight Gain Regiment")

			.window
				.window__left
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/thorhot.png")
					span Before
				.window__right
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/thorfat.png")
					span After
			.persuader 

				.testi
					.testi__text
						p 
							| Reviewed by health expert, 
							strong Dr. Stephen Strange, M.D., Ph.D.
							| : "No amount of sorcery can fix this thing." Individual results may vary. Please consult your doctor if you experience discomfort or if you show symptoms of heart disease, stroke, high blood pressure or diabetes.








		.page.page-gauntlet
			.controls
				.controls__name
					strong 07
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			.title 
				| Know Your Gauntlets
				small When all the Infinity Stones are united in the Gauntlet, the wearer wields unlimited power.
			.gauntlet__wrapper
				.gauntlet
					.gauntlet__image
						img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gauntlet-infinity.png")
					.gauntlet__text  
						h5 Infinity Gauntlet
						p The Infinity Gauntlet was a powerful metallic glove that was designed to channel the power of all six Infinity Stones. It was made by the ruler of Nidavellir, King Eitri. We don't know  what it is made of, but our best guess is Uru - a metal unique to Nidavellir and the same metal used to forge Mjölnir and Stormbreaker.
				.gauntlet
					.gauntlet__image
						img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/gauntlet-nano.png")
					.gauntlet__text  
						h5 Nano Gauntlet
						p The Nano Gauntlet was a glove made of nano-technology created by Stark, Banner and Rocket Raccoon in 2023. It was designed to allow the user to channel the powers of the Infinity Stones in a manner similar to the Infinity Gauntlet, although the effects of wielding it were far more damaging to the user than the Infinity Gauntlet.



		.page.page-stones
			.controls
				.controls__name
					strong 08
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			.title Know Your Stones
				small A brief introduction to all the stones and who have held the stones. * indicates that the holder held the stone barehanded.
			.quote With all six stones, I can simply snap my fingers, they would all cease to exist. I call that mercy.
			.column-1
				p Tessarect: a blue cube which holds the Space Stone. This stone gives the user power over space and can create a portal from one part of the universe to another. The Space Stone has been held by: Odin, the Norwegian priest, Red Skull, Howard Stark, Mar-vell, Captain Marvel, Michelle Rambeau, Goose, Nick Fury, Hawkeye, Dr Selvig, Tony Stark, Bruce Banner, Loki, Thor, Ebony Maw, Thanos*


				p Hurling Gamora off the cliff (or anyone whom you love) nets you the Soul Stone. It’s unclear what the Soul Stone’s powers are in the film universe. In the comics, the gem allows the holder to capture and control others’ souls. Only two have held the Soul Stone: Thanos*, Hawkeye*.
			.column-2
				p Aether: a manifestation of The Reality Stone which grants the user power to manipulate matter. The Reality Stone has been held by: Malekith, Bor, Jane Foster, Sif the Collector, Thanos* and Rocket Raccoon


			.column-3
				p Necklace called the Eye of Agomoto is where the Time Stone is hidden. The Time Stone grants its owner the power to re-wind or fast-forward time. The Time Stone was only held by the Ancient One and Doctor Strange before Thanos got his hands on it.
				p Orb that contains the Power Stone seems to be a popular item across the universe. The Power Stone bestows upon its holder a lot of energy — the sort that you could use to destroy an entire planet. The Celestial, Star-Lord*, Korath, the broker, Gamora, Drax, the Collector, the Collector's assistant*, Nebula, Ronan*, Nova Prime, Thanos*, and War Machine have all held the Power Stone.
				p Scepter. Loki's Scepter which could counter the immense enery of the Tessarect. Turns out, it's the Mind Stone! This yellow stone allows the user to control the minds of others and have been held by: Thanos*, Loki, Bruce Banner, Black Widow, Agent Sitwell, Agent Crossbones, Baron Strucker, Tony Stark, Ultron*, Vision, Captain America, Ant-Man

			//img.image-2(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pezmovie.jpg")
			.all-holders 
				h5 Besides Thanos, who has held all six stones? 
				div The participants of the "gauntlet hot potato" (as the MCU writers cutely call it): Professor Hulk, Hawkeye, Nebula, Black Panther, Spider-Man, Captain Marvel and Iron Man. Captain America has also carried all six stones to return them to their original timelines in what we'll call the Infinity Briefcase.
				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/stoneholders.png" alt="Infinity Stones")

		.page.page-cap
			.controls
				.controls__name
				a.next.js-prev Back
				a.next.js-next Next
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/captwp.jpg")
			h2 
				| I
				br 
				| can do this all day.

		.page.page-contributor
			.title 
				| Missing The Avengers?
				small Me too. But not to worry, our overloards at Disney have graced us with upcoming movies and series featuring most of the Avengers. 

			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/blackwidowmovie.png" alt="Black Widow Movie")
				.contributor__textwrap
					h5.contributor__author 
						| Black Widow 
					p.contributor__text 
						| May 1, 2020. Following the events of the Civil War, Natasha Romanoff is on the run from the government, and finds herself on her own, forced to deal with "some of the red in her ledger".
			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/falconwintersoldier.png" alt="Falcon & The Winter Soldier")
				.contributor__textwrap
					h5.contributor__author The Falcon & The Winter Soldier 

					p.contributor__text  August 2020. The Falcon wields the Captain America shield and fights alongside the Winter Soldier.
			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/wandavision.png" alt="WandaVision")
				.contributor__textwrap
					h5.contributor__author WandaVision
					p.contributor__text Spring 2021. Speculation: To be set in the 1950s, Wanda plays with different realities to carve out a perfect life with Vision.

			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/doctorstrangemovie.png" alt="Doctor Strange in the Multiverse of Universe")
				.contributor__textwrap
					h5.contributor__author 
						| Doctor Strange in the Multiverse of Universe 
					p.contributor__text May 7 2021. Anndddd Wanda messes up and now the magician is here to save the day.

			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/lokishow.png" alt="Loki")
				.contributor__textwrap
					h5.contributor__author Loki 
					p.contributor__text 
						| Spring 2021. The series would be exploring what Loki did after he stole the Tesseract during the Time Heist in 
						em Avengers: Endgame 
						| and created a new timeline.

			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/hawkeyeshow.png" alt="Hawkeye")
				.contributor__textwrap
					h5.contributor__author 
						| Hawkeye
					p.contributor__text Fall 2021. Hawkeye returns and takes on the responsibility to train Kate Bishop to become the next Hawkeye. 

			.contributor
				img.contributor__image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/thorlovethunder.png" alt="Thor Love & Thunder")
				.contributor__textwrap
					h5.contributor__author 
						| Thor: Love & Thunder
					p.contributor__text November 5 2021. We don't know much, except that there will be the first Female Thor.
			.credits 
				strong Special Mention. 
				span Black Panther 2 is set to release on May 6, 2022.
			.controls
				.controls__name
					strong 10
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next

		.page.page-circle
			.controls
				.controls__name
					strong 11
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			.stark-center
				.title A Shout-out to the Ones We Will Miss the Most
				.stark-left
					.shape-human
					.text 
						h5 Iron Man/Tony Stark
						p 
							| In 
							em Endgame
							| , we had to say goodbye to the most important Avenger. Even though he wasn't the leader of the Avengers, Iron Man has always been the team's driving force. His charisma and savvy helped the team bond, and he was instrumental in giving the Avengers a good public face. Tony was also the one bankrolling the Avengers — he built the tower they used as a home base, and he built their new upstate headquarters. Tony is literally giving them a place to assemble.
						p There's perhaps no greater endorsement of Iron Man's status as the most important Avenger than Captain America's word. Cap called Tony "Earth's best defender." It's not hyperbolic, as over a ten-year career as a superhero, Tony truly has cemented himself as the greatest hero around. 
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/tony-ironman.png")
				.stark-right
					.shape-human
					.text 

						p 
							| What will we miss the most? Honestly? His quips and memorable quotes. From the iconic "Genius, billionaire, playboy, philanthropist" line to coming up with fitting names — Lebowski for Bro Thor and Build-A-Bear for Rocket immediately come to mind — we are not convinced that there will be another character who can pull off throwing insults so flawlessly.
						p 
							| Our only consolation is that there is hope that Morgan Stark will grow up and follow in the footsteps of her father. Until then, we'll just have to watch YouTube compilations of Tony Stark's best moments. Here's to Iron Man and Robert Downey Jr, the anchor of the Marvel Cinematic Universe. 

			.character-other
				.character-other__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/blackwidow.png" alt="Black Widow")
				.character-other__text 
					h5 Black Widow 
					p We didn't care much for Black Widow and had very little emotional attachment to her character. Turns out, all it needed to make her death the hardest for us was her complete dedication to the Avengers for 5 years post Thanos-snap and a tear-jerking sacrificial jump, with her best friend unwillingly sending her off.
				.character-other__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/corvusproxima.jpg" alt="Corvus Glaive and Proxima Midnight")
				.character-other__text 
					h5 Proxima Midnight & Corvus Glaive
					p 
						| Wait, hear us out. Proxima Midnight & Corvus Glaive were actually married. Joe Russo 
						a(href="https://comicbook.com/marvel/2018/08/03/avengers-infinity-black-order-proxima-midnight-corvus-glaive-married/") mentioned that they did have plans to explore their relations but the plot threads were ultimately cut for time.
						| . We're just lowkey disappointed that we didn't get that story.
				.character-other__image
					img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/cassielang.jpg" alt="Cassie Lang")
				.character-other__text 
					h5 Young Cassie 
					p 
						| We are glad she wasn't snapped and we know teenage Cassie is important to pave the way to the 
						a(href="https://marvel.fandom.com/wiki/Cassandra_Lang_(Earth-616)") Young Avengers
						| . But man, Abby Ryder Johnson is the best child actor we've seen and we sure will miss this little peanut.

		.page.page-more
			.controls
				.controls__name
					strong 12
					span A Tribute to the Avengers
				a.next.js-prev Back
				a.next.js-next Next
			h5.title-mini Captain America/ Steve Rogers
			img.image(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/captwp2.jpg" alt="Captain America Wallpaper")
			.text 
				| Oh boy, we have so many questions. Perhaps the most hotly debated 
				em Endgame
				|  plot point is the fate of Captain America, who travels back in time to live out his life with Peggy Carter. It is established that Peggy had a husband and two kids, and some fans have theorized that Steve Rogers secretly was this husband all along. Others have stated that Steve created an alternate timeline when he went back to live with Peggy, and somehow got back to the mainline MCU as an old man. In conclusion, we are unsure. All we know is that the shield has been passed onto the Falcon (but he will not take on the name like in the comics, as the name of a new Disney+ show is 
				em The Falcon and the Winter Soldier
				| ) and Chris Evans is done with the MCU. So maybe we won't have to say goodbye to Captain America, but we'll unfortunately have to bid farewell to our favorite Chris.
			.quote 
				| If there’s one thing I’ve learned about working with Marvel, they don’t leave stones unturned. They really don’t.
				br 
				p – Chris Evans
			.title Consolation Videos
				small For when you're missing your favorite actors, we've got some YouTube videos for nostalgia.
			.more
				- moreVideos = [{url:"https://youtu.be/IEr_yj-8MmM",urlText:"Watch video",title:"50 Marvel Questions",image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/show1.jpg",text:"Endgame stars answer 50 of the most Googled questions about Marvel. The questions are weird, but the video is 7 minutes of charisma."},{url:"https://www.youtube.com/watch?v=JWYPT4r9kLU",urlText:"Watch video",title:"Most Likely To...",image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/show2.jpg",text:"Watch the OG6 Avengers answer questions in this terribly short video (but it's the only one we got)."},{url:"https://youtu.be/7XLd9zX6PqU",urlText:"Watch video",title:"The Thanos Snap",image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/show3.jpg",text:"The cast takes a meaningless Buzzfeed quiz to  learn what their fates would be if faced with a real life snap from Thanos."},{url:"https://youtu.be/A9bcFSNB25U",urlText:"Watch teaser",title:"Netflix's <em>The Chef Show</em>",image:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/show4.jpg",text:"Watch Jon Favreau taste food with RDJ, Tom Holland, and the Russo brothers. Only available on Netflix, sorry."}]
				each val, index in moreVideos
					.more__item
						img.more__image(src=val.image alt="Image for Show")
						h5.more__headline!= val.title
						.more__subtext!= val.text
						a(href=val.url target="_blank")= val.urlText


		.page.page-ironman
			.controls
				.controls__name
					a.js-back-to-1 Back to Cover
				a.next.js-prev Back
			.image
				h2.top That's the hero gig.
				img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/ironmanwp.jpg")
			h2.bottom Part of the journey is the end.


footer
	p Click 'Next' on the top right to see more layouts. Under 900px, it will be a single page instead.
	.explanation
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid collection.
            
          
!
            
              body {
	background: #f4f4f4;
	font-family: "Libre Baskerville", sans-serif;
	line-height: 1.6;
	color: #222;
}

* {
	box-sizing: border-box;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

a {
	text-decoration: none;
	color: #222;
}

h5 {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
}

small {
	line-height: 1.7;
	text-transform: uppercase;
	display: block;
	font-family: Libre Baskerville;
	letter-spacing: 2px;
}

main, footer {
	width: 95%;
	margin: 4em auto;
	max-width: 900px;
}

footer {
	text-align: center;
	a {
		border-bottom: .5px dashed;
		&:hover {
			border-bottom: .5px solid;
		}
	}
}

img {
	width: 100%;
}

.page {
	min-height: 1150px;
	font-size: 12px;
	padding: 6em 3.5em 3.5em;
	position: relative;
	z-index: 0;
	margin: 2em auto;
	border: .5px solid #ededed;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
	background: #fff;
	&__wrapper {
		position: relative;
		min-height: 1150px;
	}
	.controls {
		position: absolute;
		width: calc(100% - 6em);
		padding: .5em  0;
		top: 1.6em;
		left: 3em;
		color: #222;
		display: flex;
		font-family: 'Playfair Display';
		font-weight: 500;
		font-size: 14px;
		&__name {
			flex: 1;
			text-align: left;
			strong {
				display: inline-block;
				margin-right: 15px;
				letter-spacing: 2px;
				font-size: 20px;
				margin-top: -3px;
			}
		}
		.js-next, .js-prev, .js-back-to-1 {
			cursor: pointer;
			display: none;
			margin-left: 15px;
			font-weight: 700;
			text-transform: none;
		}
	}
	@media (min-width: 900px) {
		max-height: 1150px;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		box-shadow: none;
		&__wrapper {
			background: #fff;
		}
		* {
			opacity: 0;
			transform: translateY(10px);
			transition:  .3s ease;
			&:nth-child(odd) {
				transform: translateY(-10px);
			}
		}
		&.active {
			z-index: 10;
			* {
				opacity: 1;
				transform: translate(0,0);
			}
		}
		.controls {
			.js-next, .js-prev, .js-back-to-1 {
				display: inline-block;
			}
			.js-back-to-1 {
				margin-left: 0;
			}
		}
	}
	@media (max-width: 500px) {
		padding: 6em 2.5em 2em;
	}
}

.title {
	grid-column: 1 / -1;
	font-size: 40px;
	padding-bottom: 1em;
	font-family: 'Abril Fatface';
	font-size: 4.5em;
	line-height: 1.2;
	margin-top: .5em;
	small {
		font-size: 25%;
		text-transform: uppercase;
		display: block;
		font-family: Libre Baskerville;
		letter-spacing: 1px;
		margin: 2em 0 1em;
		color: #999;
		width: 75%;
	}
}

//contributor page!
.page-contributor {
	@media (min-width: 900px) {
		display: grid;
		grid-auto-flow: dense;
		grid-template-columns: repeat(5, 1fr);
	}
	h5 {
		margin: 10px 0;
	}
	.contributor {
		display: flex;
		border-top: 1px solid #222;
		align-items: center;
		
		&__textwrap {
			flex: 1;
		}
		&__image {
			width: 100%;
			flex: 0 0 50%;
			margin-right: 5%;
			max-width: 40%;
			max-height: 300px;
			object-fit: contain;
		}
		@media (min-width: 900px) {
			padding: 10px;
			&:nth-of-type(2) {
				padding-left: 0;
				border-bottom: 3px solid #222;
				font-size: 120%;
				.contributor__textwrap {
					padding: 20px 35px 20px 0;
				}
			}
			&:nth-of-type(n + 3) {
				display: block;
				border-left: 1px solid #222;
			}
			&:nth-of-type(2) {
				grid-column: 1/5;
			}
			&:nth-of-type(3) {
				grid-column: 5;
				grid-row: 2 / 4;
				padding-right: 0;
			}
			&:nth-of-type(4) {
				padding-left: 0;
				border-left: none;
			}
			&:nth-of-type(6),
			&:nth-of-type(7) {
				grid-row: 3 / 5;
			}
			&:nth-of-type(8) {
				padding-right: 0;
			}
			&__image {
				max-width: 100%;
			}
		}
	}
	.credits {
		grid-row: 3 / 4;
		grid-column: 1 / 3;
		padding: 2em 5em 2em 0;
		border-top: 1px solid #222;
	}
}

//navigator
.page-navigator {
	.navigator {
		margin-bottom: 1.6em;
		position: relative;
		z-index: 2;
		.year {
			color: #999;
			letter-spacing: 2px;
		}
		h5 {
			margin: .25em 0;
		}
	}
	@media (min-width: 900px) {
		display: grid;
		grid-auto-flow: dense;
		grid-template-columns: repeat(4, 25%);
		grid-gap: 5px;
		overflow: hidden;
		padding-top: 8em;
		&.page-navigator-2 {
			grid-template-rows: repeat(7, 1fr);
		}
		.navigator {
			padding-right: 2.5em;
			margin-bottom: 2.5em;
		}
		.navigator-image {
			grid-column: 3 / -1;
			grid-row: 2/4;
			object-fit: contain;
			transform: scaleX(-1);
			margin-top: -2em;
			width: 100%;
			margin-left: -1.2em;
		}
		.navigator-image-2 {
			grid-column: 1 / 2;
			grid-row: 1 / 4;
			height: 100%;
			object-fit: cover;
			max-width: 340px;
			margin-top: 5em;
			margin-left: -4em;
			width: calc(100% + 3.5em);
		}
		.navigator-image-3 {
			grid-column: 2 / 4;
			grid-row: 1 / 4;
			height: 100%;
			object-fit: cover;
			margin-top: 5em;
		}
		.navigator-space {
			grid-column: 1 / 3;
			grid-row: 5 / 6;
		}
		.navigator-space-2 {
			grid-column: 1 / -1;
			grid-row: 1 / 5;
		}
		.navigator-space-3 {
			grid-column: 1 / 2;
			grid-row: 1 / 8;
		}
	}
}

//timer
.page-timer {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	@media (min-width: 900px) {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: min-content 2fr 1.5fr;
	}
	.timer {
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		background-color: #51b7d3;
		background-blend-mode: overlay;
		position: relative;
		min-height: 200px;
		color: #fff;
		text-shadow: 0 1px 4px rgba(0,0,0,0.3);
		&:before {
			content: '';
			position: absolute;
			height: 100%;
			width: 100%;
			background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
		}
		span {
			font-weight: 700;
			font-style: italic;
			font-size: 80px;
			color: #fff;
			opacity: 0.7;
			position: absolute;
			line-height: 1;
			width: 100%;
		}
		&:nth-of-type(2) {
			background-color: rgba(255, 34, 34, 0.5);
			background-image: url(https://olivia-ng.com/codepen/avengers/ironman.png);
		}
		&:nth-of-type(3) {
			background-color: rgba(33, 150, 243, 0.5);
			background-image: url(https://olivia-ng.com/codepen/avengers/cap.png);
		}
		&:nth-of-type(4) {
			background-color: rgba(233, 30, 99, .5);
			background-image: url(https://olivia-ng.com/codepen/avengers/thor.png);
		}
		&:nth-of-type(5) {
			background-color: rgba(76, 175, 80, 0.5);
			background-image: url(https://olivia-ng.com/codepen/avengers/hulk.png);
		}
		&:nth-of-type(6) {
			background-color: rgba(255, 193, 7, 0.5);
			background-image: url(https://olivia-ng.com/codepen/avengers/hawkeye.png);
		}
		&:nth-of-type(7) {
			background-color: rgba(0, 150, 136, .5);
			background-image: url(https://olivia-ng.com/codepen/avengers/antman.png);
		}
		&:nth-of-type(8) {
			background-color: rgba(0, 188, 212, 0.5);
			background-image: url(https://olivia-ng.com/codepen/avengers/nebula.png);
		}
		&:nth-of-type(9) {
			background-color: rgba(255, 152, 0, 0.5);
			background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/blackwidow2.png);
		}
		&:nth-of-type(10) {
			background-color: rgba(103, 58, 183, .5);
			background-image: url(https://olivia-ng.com/codepen/avengers/thanos.png);
		}
		&:nth-of-type(11) {
			background-color: rgba(63, 81, 181, .5);
			background-image: url(https://olivia-ng.com/codepen/avengers/rockt.png);
		}
		@media (min-width: 900px) {
			background-size: 350%;
			background-position: -150px top;
			span {
				text-align: center;
				top: 15px;
			}
			&:nth-of-type(n + 7) {
				background-size: 200%;
			}
			&:nth-of-type(2) {
				background-position: -150px top;
			}
			&:nth-of-type(3) {
				background-position: -160px top;
			}
			&:nth-of-type(4) {
				background-position: -200px top;
			}
			&:nth-of-type(5) {
				background-position: -180px top;
			}
			&:nth-of-type(6) {
				background-position: center top;
				background-size: 450%;
			}
			&:nth-of-type(7) {
				background-position: -170px top;
				background-size: 300%;
			}
			&:nth-of-type(8) {
				background-position: center top;
				background-size: 180%;
			}
			&:nth-of-type(9) {
				background-position: -90px top;
				background-size: 250%;
			}
			&:nth-of-type(10) {
				background-position: -110px top;
				background-size: 350%;
			}
			&:nth-of-type(11) {
				background-position: -110px top;
				background-size: 300%;
			}
		}
		&__hero {
			position: absolute;
			bottom: 15px;
			line-height: 1.5;
			text-align: center;
			width: 100%;
		}
	}
}

//more-page
.page-more {
	.image {
		width: 100%;
		margin-bottom: 3em;
	}
	.title-mini {
		font-family: 'Abril Fatface';
		font-weight: 500;
		font-size: 24px;
		line-height: 1;
		margin-bottom: 10px;
		+ img {
			display: none;
		}
	}
	.quote {
		border-left: 3px solid black;
		padding: 0 3em 0 1.5em;
		p {
			font-style: italic;
			margin-top: 8px;	
		}
	}
	@media (min-width: 900px) {
		display: grid;
		grid-template-columns: 30% 70%;
		.title-mini {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			align-self: center;
			text-align: right;
			z-index: 10;
			color: #fff;
			width: 43%;
			margin: 2em 2em 0 auto;
			+ img {
				display: block;
				margin-bottom: 2em;
			}
		}
		.title {
			grid-column: 1 / -1;
			grid-row: 3;
			z-index: 2;
			justify-content: flex-end;
			align-items: center;
			text-align: center;
			padding-bottom: .5em;
			margin-top: 1em;
			small {
				margin: 1em auto 0;
			}
		}
		.image {
			grid-column: 1 / 3;
			grid-row: 1 / 2;
			z-index: 1;
			width: 100%;
		}
		.text {
			column-count: 2;
			column-span: all;
			column-gap: 30px;
			text-align: justify;
		}
		.quote {
			grid-column: 1;
			grid-row: 2 / 3;
			align-self: start;
		}
	}
	.more {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		&__item {
			padding: 0.4em;
			margin: 2em 0;
			text-align: center;
			a {
				display: block;
				color: #999;
				margin-top: 8px;
				
				&:hover {
					font-weight: 700;
				}
			}
		}
		&__image {
			width: 100%;
			border-radius: 50%;
			max-width: 110px;
		}
		&__headline {
			line-height: 1.3;
			margin: 1em 0 2em;
			position: relative;
			&:after {
				content: "";
				position: absolute;
				width: 50px;
				bottom: -1em;
				left: 50%;
				margin-left: -25px;
				background: black;
				height: 1px;
			}
		}
		@media (min-width: 900px) {
			&__item {
				flex: 0 1 24%;
				margin: 0;
			}
		}
	}
}

.page-diagonal {
	.diagonal {
		display: grid;
		grid-template-columns: 40% 60%;
		align-items: center;
		margin-top: -3%;
		&__image {
			margin-top: 2.5em;
			width: 80%;
			height: 100%;
			object-fit: contain;
			padding: 1em;
		}
		&__text {
			margin-top: 2.5em;
		}
		h5 {
			margin-bottom: 5px;
		}
	}
	@media (max-width: 900px) {
		.free-space-1, .free-space-2, .free-space-3, .free-space-4 {
			display: none;
		}
	}
	@media (min-width: 900px) {
		overflow: hidden;
		.diagonal {
			width: 100%;
			margin-left: 5%;
			grid-template-rows: repeat(2, 150px) 40px repeat(3, 150px);
			grid-template-columns: 20% 3% 30% 15% 30%;
			grid-gap: 5px;
			transform: rotate(45deg);
			&__image,
			&__text {
				margin: 0;
			}
			&__image {
				padding: 0;
				width: 90%;
			}
			&__text {
				padding: 0em;
			}
		}
		
		.show-img-1 {
			grid-column: 1 / span 2;
			grid-row: 2 / 4;
			height: 65%;
			align-self: flex-end;
		}
		.show-text-1 {
			grid-column: 1 / 3;
			grid-row: 4 / 6;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			text-align: right;
			transform: rotate(-180deg);
			padding: 2em 1.5em;
			h5 {
				margin-left: 5px;
			}
		}
		.show-img-2 {
			grid-column: 2 / 4;
			grid-row: 1 / 2;
			width: 70%;
			height: 120%;
			align-self: flex-end;
		}
		.show-text-2 {
			grid-column: 2 / 5;
			grid-row: 2 / 3;
			width: 95%;
		}
		.show-img-3 {
			grid-column: 3 / 4;
			grid-row: 3 / 5;
			padding-top: 1em;
			margin-left: -1em;
		}
		.show-text-3 {
			grid-column: 3 / 5;
			grid-row: 5 / 6;
			width: 85%;
		}
		.show-img-4 {
			grid-column: 3 / 4;
			grid-row: 6 / 7;
			margin-left: -15%;
		}
		.show-text-4 {
			grid-column: 4 / 6;
			grid-row: 6 / 7;
			width: 70%;
			margin-left: -22%;
		}
		.show-img-5 {
			grid-column: 5 / 6;
			grid-row: 5 / 6;
		}
		.show-text-5 {
			grid-column: 5 / 6;
			grid-row: 2 / 5;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			transform: rotate(180deg);
			padding-right: 2.5em;
			h5 {
				margin-left: 5px;
			}
		}
		.free-space-1 {
			background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/pezmovie.jpg) no-repeat right center / cover;
			filter: brightness(1.85);
			grid-row: 1/2;
			grid-column: 1 / 2;
			height: 120%;
			width: 120%;
			transform: translate(-170px, 440px);
			justify-self: flex-end;
		}
		.free-space-2 {
			background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/shawarmamovie.jpg) no-repeat center center / cover;
			filter: brightness(1.4);
			grid-row: 4 / 5;
			height: 100%;
			width: 120%;
			align-items: center;
			transform: translate(-20px, -50px);
		}
		.free-space-3 {
			background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/avengerbenjerrymovie.jpg) no-repeat right center / cover;
			filter: brightness(1.6);
			grid-row: 1 / 2;
			height: 160%;
			width: 200%;
			align-items: center;
			transform: translate(-50px, -70px) scaleX(-1);
		}
		.free-space-4 {
			background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/asgardalemovie.jpg) no-repeat center center / cover;
			filter: brightness(1.6);
			grid-column: 1 / 2;
			grid-row: 6 / 7;
			height: 130%;
			width: 200%;
			align-items: center;
			transform: translate(220px, 200px);
		}
	}
}

.page-thor {
	padding-bottom: 1.5em;
	display: grid;
	grid-template-columns: 30% 15% 55%;
	grid-template-rows: max-content 250px 50px max-content;
	grid-auto-flow: dense;
	overflow: hidden;
	.title {
		line-height: 1.3;
		font-size: 45px;
		max-width: 700px;
		margin: 1em;
		letter-spacing: 1px;
		small {
			color: #777;
			font-size: 40%;
			text-transform: none;
			letter-spacing: 0;
			margin-top: 20px;
			font-weight: 400;
			line-height: 1.5;
		}
	}
	.product-name {
		grid-column: 1 / 4;
		grid-row: 1 / 2;
		z-index: 1;
	}
	.photo-combo {
		position: relative;
		grid-column: 1 / -1;
		grid-row: 1/4;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		background: radial-gradient(#fff, #cecbea);
		max-height: 600px;
		img {
			position: relative;
			width: 53%;
			margin: 2em 2em -1em;
		}
	}
	.window {
		display: flex;
		position: relative;
		grid-column: 1 / -1;
		margin-top: -65px;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		&__left,
		&__right {
			flex: 1 1 50%;
			position: relative;
			text-align: center;
			img {
				width: auto;
				height: 250px;
			}
			span {
				display: block;
				text-align: center;
				padding: 2px 5px 20px;
				font-size: 14px;
				font-style: italic;
				color: #999;
			}
		}
		&__left img {
			margin-left: -30px;
		}
	}
	.persuader {
		grid-column: 1 / -1;
	}
	.testi {
		&__text {
			font-size: 10px;
			margin: 15px;
			width: 90%;
		}
	}
	@media(min-width:900px) {
		grid-template-rows: max-content 1fr 1fr 100px;
		padding-bottom: 0;
		max-height: 90vh;
		.title {
			margin: 2.5em;
		}
		.product-name {
			grid-column: 1 / 4;
			grid-row: 1 / 2;
			z-index: 1;
		}
		.photo-combo {
			justify-content: flex-end;
			max-height: none;
			img {
				margin: 0 8em 15em;
			}
		}
		.window {
			grid-column: 1 / 2;
			margin: 0;
			grid-row: 4 / 5;
			align-items: flex-end;
		}
		.persuader {
			grid-column: 2 / 4;
			display: flex;
			align-items: center;
		}
	}
}

.page-circle {
	overflow: hidden;
	padding-top: 7em;
	h5 { 
		font-family: 'Abril Fatface';
		font-weight: 500;
		font-size: 24px;
		line-height: 1;
		margin-bottom: 10px;
	}
	.stark-center {
		width: 100%;
		text-align: justify;
		.text {
			margin-bottom: 20px;
		}
		@media (min-width: 900px) {
			display: grid;
			grid-template-columns: repeat(2, 50%);
			grid-template-rows: 1fr min-content min-content;
			min-height: 600px;
			.stark-left,
			.stark-right {
				grid-row: 1 / 2;
			}
			.text {
				grid-column: 1 / 2;
				grid-row: 1 / 2;
			}
			.title {
				grid-row: 2 / 3;
				grid-column: 1 / -1;
				text-transform: uppercase;
				line-height: 1;
				border: solid;
				border-width: 8px 0;
				padding: .2em 0;
				text-align: center;
				font-size: 55px;
				margin: 0 0 .6em;
			}
		}
	}
	.shape-human {
		height: 400px;
		width: 250px;
		float: right;
		background: #fff;
		shape-margin: 15px;
		opacity: 0;
		shape-outside: polygon(50% 0%, 46% 2%, 44% 8%, 45% 13%, 37% 15%, 37% 15%, 37% 18%, 30% 24%, 22% 31%, 19% 36%, 17% 45%, 20% 49%, 25% 55%, 31% 59%, 32% 66%, 30% 71%, 28% 79%, 27% 86%, 22% 98%, 22% 100%, 61% 100%);
		clip-path: polygon(50% 0%, 46% 2%, 44% 8%, 45% 13%, 37% 15%, 37% 15%, 37% 18%, 30% 24%, 22% 31%, 19% 36%, 17% 45%, 20% 49%, 25% 55%, 31% 59%, 32% 66%, 30% 71%, 28% 79%, 27% 86%, 22% 98%, 22% 100%, 61% 100%);
		margin-right: -20%;
	}
	.stark-left, .stark-right {
		p {
			margin: 10px 0;
		}
	}
	.stark-left {
		position: relative;
		img {
			position: absolute;
			right: 0;
			object-fit: contain;
			object-position: top;
			top: 0;
			margin-right: -150px;
			width: 250px;
			z-index: 10;
			@media (min-width: 900px) {
				width: 250px;
				height: 100%;
				left: 69%;
				margin: 0;
			}
		}
	}
	.stark-right {
		.shape-human {
			display: none;
			float: left;
			shape-outside: polygon(50% 100%, 51% 0%, 61% 2%, 63% 7%, 65% 10%, 65% 15%, 65% 21%, 72% 21%, 75% 21%, 80% 26%, 85% 34%, 86% 43%, 75% 54%, 80% 60%, 85% 74%, 85% 76%, 84% 82%, 93% 89%, 93% 98%, 93% 100%);
			clip-path: polygon(50% 100%, 51% 0%, 61% 2%, 63% 7%, 65% 10%, 65% 15%, 65% 21%, 72% 21%, 75% 21%, 80% 26%, 85% 34%, 86% 43%, 75% 54%, 80% 60%, 85% 74%, 85% 76%, 84% 82%, 93% 89%, 93% 98%, 93% 100%);
			@media (min-width: 900px) {
				display: block;
				margin-right: 0;
				margin-left: -25%;
			}
		}
		.text {
			margin-top: 40px;
		}
	}	
	.character-other {
		display: grid;
		width: 100%;
		grid-gap: 25px;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top;
		}
		@media (min-width:900px) {
			grid-template-columns: repeat(2, 1fr) 220px;
			grid-template-rows: repeat(2,min-content);
			&__text {
				&:nth-of-type(6) {
					grid-row: 2 / 3;
					grid-column: 3 / 4;
				}
			}
			&__image {
				&:nth-of-type(1) {
					img {
						height: 200px;
					}
				}
				&:nth-of-type(5) {
					grid-column: 3 / 4;
					grid-row: 1 / 2;
				}
			}
		}
	}
}

.page-easter {
	
	@media(min-width:900px) {
		display: grid;
		grid-template-columns: 200px repeat(3,1fr);
		grid-column-gap: 35px;
		.title {
			grid-row: 1 / 4;
			grid-column: 1 / 2;
			margin-top: 2em;
		}
	}
	.easter__item {
		margin-top: 2em;
		img {
			height: 200px;
			object-fit: cover;
			margin-bottom: 10px;
			@media(min-width:900px) {
				height: 140px;
			}
		}
		&:nth-child(3), &:nth-child(4), &:nth-child(5), &:nth-child(9){
			img {
				filter: brightness(2);
			}
		}
		&:nth-child(4) img {
			object-position: 90% top;
		}
		&:nth-child(5) img {
			object-position: right;
		}
		&:nth-child(6) img, &:nth-child(9) img {
			object-position: left;
		}
	}
}

.page-gauntlet {
	.title {
		text-align: center;
		width: 80%;
		margin: 2.8em auto 0;
		small {
			margin: 2em auto 0;
		}
	}
	.gauntlet {
		text-align: justify;
		&:not(:last-child) {
			margin-bottom: 4em;
		}
		@media (min-width: 900px) {
			flex: 0 1 35%;
			&__wrapper {
				display: flex;
				padding: 0 3em;
				justify-content: space-evenly;
			}
		}
		&__image {
			position: relative;
			text-align: center;
			img {
				position: relative;
				z-index: 2;
				width: auto;
				height: 350px;
				max-width: 200px;
				margin-bottom: -6px;
			}
			&:before {
				content: '';
				position: absolute;
				height: 70%;
				width: 80%;
				background: #eaecff;
				left: 0;
				right: 0;
				margin: auto;
				z-index: 0;
				bottom: 0;
				@media(min-width:900px) {
					width: 150%;
					margin-left: -25%;
				}
			}
		}
		&__text {
			h5 {
				text-align: center;
				margin: 2.5em 0 1em;
			}
		}
	}
}

.page-stones {
	.quote {
		font-family: 'Abril Fatface';
		font-size: 2.5em;
		line-height: 1.2;
		position: relative;
		padding-top: 2.8em;
		margin-bottom: 2em;
		&:before {
			content: open-quote;
			font-size: 4em;
			color: #ddd;
			position: absolute;
			top: 0;
		}
	}
	p:first-letter { 
    float: left;
		font-size: 50px;
		font-weight: 700;
		font-family: 'Abril Fatface';
		margin: 5px 10px 2px 0;
		line-height: 1;
		
	}
	p {
		margin: 2em 0;
	}
	.all-holders {
		background: #eaecff;
		padding: 3em;
		margin: 2em 0;
		text-align: center;
		h5 {
			margin: 0 0 25px;
			font-family: "Abril Fatface";
			font-weight: 400;
			font-size: 2.2em;
			line-height: 1.2;
		}
		img {
			margin-top: 2em;
			margin-bottom: -6em;
			width: 100%;
			transform: rotate(5deg);
		}
	}
	@media (min-width: 900px) {
		display: grid;
		grid-gap: 35px;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: min-content repeat(3,auto);
		align-items: flex-end;
		p:first-letter {
			margin: 3px 8px 2px 4px;
		}
		p {
			text-align: justify;
		}
		.title {
			text-align: right;
			grid-row: 1 / 2;
			grid-column: 2 / -1;
			margin: 0;
			padding-bottom: 0;
			small {
				width: 100%;
			}
		}
		.quote {
			grid-row: 1 / 3;
			width: 82%;
			margin-top: 1.5em;
		}
		.column-1 {
			grid-column: 1 / 2;
			grid-row: 3 / 5;
			align-self: flex-end;
		}
		.column-2 {
			grid-row: 2 / 3;
			grid-column: 2 / 3;
			align-self: flex-end;
		}
		.column-3 {
			grid-row: 2 / 5;
			grid-column: 3/ 4;
			margin-top: 40%;
			align-self: flex-end;
		}
		.all-holders {
			grid-row: 3 / 5;
			grid-column: 2 / 3;
			margin: -2em 0 2em;
			line-height: 1.8;
			align-self: stretch;
			img {
				margin-left: -50%;
				width: 200%;
				margin-bottom: -8em;
			}
		}
		.image-2 {
			grid-row: 1 / 3;
			grid-column-end: -1;
		}
	}
}


.page-cap {
	display: grid;
	grid-template-columns: 70% 30%;
	grid-gap: 30px;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: right;
	}
	h2 {
		align-self: center;
		font-family: 'Abril Fatface';
		font-size: 65px;
		line-height: 1;
		text-transform: uppercase;
		max-width: 70%;
	}
}

.page-ironman {
	text-transform: uppercase;
	font-family: 'Abril Fatface';
	display: grid;
	grid-template-rows:  1fr max-content;
	.image {
		position: relative;
	}
	h2.top {
		font-size: 50px;
		top: 10px;
		left: 15px;
		line-height: 1;
		position: relative;
		z-index: 2;
		position: absolute;
		color: rgba(255,255,255,0.8);
	}
	h2.bottom {
		font-size: 40px;
		line-height: 1;
		position: relative;
		z-index: 2;
		margin-top: 10px;
		text-align: right;
	}
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		filter: grayscale(0.6);
	}
}

.page-cover {
	display: grid;
	align-items: flex-end;
	display: grid;
	grid: 100% / 100%;
	text-align: center;
	color: #fff;
	img {
		height: 100%;
		object-fit: cover;
		object-position: bottom;
		grid-row: 1 / 2;
		grid-column: 1 / 2;
	}
	h1 {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		font-size: 70px;
		width: 80%;
		text-transform: uppercase;
		margin: 0 auto 1em;
		line-height: 1;
		font-family: 'Abril Fatface';
		small {
			font-size: 23%;
			width: 90%;
			margin: 2em auto;
		}
	}
}
            
          
!
            
              $('.js-next').on('click', function() {
	var current = $('.page.active');
	var findNext = $(current).next(".page");
	$(current).removeClass('active');
	setTimeout(function() {
		$(findNext).addClass("active");
	}, 200);
});

$('.js-prev').on('click', function() {
	var current = $('.page.active');
	var findPrev = $(current).prev(".page");
	$(current).removeClass('active');
	setTimeout(function() {
		$(findPrev).addClass("active");
	}, 200);
});

$('.js-back-to-1').on('click', function() {
	var current = $('.page.active');
	$(current).removeClass('active');
	setTimeout(function() {
		$('.page-cover').addClass("active");
	}, 400);
});

            
          
!
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.

Console