Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

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

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

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

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML 

              
                <div class="parallax-header">
	<h1>Everest Centenary</h1>
</div>

<div class="progress-bar"></div>

<div class="content">

	<h2>100 years ago, George Mallory and Andrew Irvine reached the summit of Mount Everest ... or did they...?</h2>

	<img class="revealing-image" src="https://cuadernodeescaladas.com/wp-content/uploads/2024/06/thumbnail-everest-centenario.jpg" alt="Andrew Irvine and George Mallory on Base Camp" title="Andrew Irvine and George Mallory on Base Camp">

	<p>In the following photo part of the team from the 1924 british expedition, from left to right, top: Irvine, Mallory, Norton, Odell, Macdonald, and bottom: Shebbeare, Bruce, Somervell, Beetham.</p>

	<img class="revealing-image" src="https://cuadernodeescaladas.com/wp-content/galerias/fotos/everest/everest-1924-miembros-expedicion-rgs.jpg" alt="The 1924 expedition team from left to right, top: Irvine, Mallory, Norton, Odell, Macdonald, and bottom: Shebbeare, Bruce, Somervell, Beetham." title="The 1924 expedition team from left to right, top: Irvine, Mallory, Norton, Odell, Macdonald, and bottom: Shebbeare, Bruce, Somervell, Beetham.">

	<p>The first attempt was made by Mallory and Geoffrey Bruce. After climbing to try to set up Camp VI at 8,200 meters, they descended without success.</p>

	<img class="revealing-image" src="https://cuadernodeescaladas.com/wp-content/galerias/fotos/everest/everest-1924-campamento-base-rgs.jpg" alt="Base Camp of the 1924 expedition with Mount Everest in the background." title="Base Camp of the 1924 expedition with Mount Everest in the background.">

	<p class="doble">A second attempt by Norton and Somervell along the Northeast Ridge first and then down the Great Corridor (called Norton Corridor since then) took it to a height of 8,573 meters (without oxygen). <br> <br>
		Somervell, exhausted and with a very sore throat, told Norton to continue, waited for him a few meters behind and took a photo that went down in history as the highest point reached by a human for almost 30 years, until the Swiss expedition to Everest in 1952, which managed to reach 8,595 meters on the southeast ridge.</p>

	<img class="revealing-image doble" src="https://cuadernodeescaladas.com/wp-content/galerias/fotos/everest/everest-1924-norton-8573m-rgs.jpg" alt="Norton at 8573 meters with the final pyramid of Everest in the background." title="Norton at 8573 meters with the final pyramid of Everest in the background.">

	<p>At 38 years old, Mallory knew that it was possibly his last chance and seeing that oxygen could be crucial, he decided, for the final attack to the summit, to be accompanied by Irvine who, although more novice in high mountains, was the most expert with the devices of oxygen, modifying them several times by adding, removing and changing parts to improve their operation, since they failed more than a shotgun at a fair. The other option for the attack on the summit was Noel Odell, more experienced and better acclimatized, but without the technical knowledge to handle the oxygen devices, so he was discarded by Mallory, finally choosing Irvine instead.</p>

	<p>On June 6, Odell took this photograph of Mallory and Irvine preparing to leave Camp IV at about 7,000 meters, not knowing that it would be the last photo of these two adventurers before they disappeared into the mountain.</p>

	<img class="revealing-image" src="https://cuadernodeescaladas.com/wp-content/galerias/fotos/everest/everest-1924-mallory-irvine-campo-4-rgs.jpg" alt="Mallory and Irvine about to leave Camp IV shortly before nine o'clock on the morning of June 6." title="Mallory and Irvine about to leave Camp IV shortly before nine o'clock on the morning of June 6.">

	<p>That same day the group formed by Mallory, Irvine and eight Sherpas reached Camp V located at 7750 meters without problems, largely due to good weather.</p>

	<p>On June 7 they ascended to Camp VI at about 8,250 meters (they moved it about 100 meters higher than where Norton and Somervell had previously set it up) and sent the four remaining Sherpas back to the North Col. From that point they would face the mountain completely alone.</p>

	<p>On June 8, 1924, Mallory and Irvine left for the summit from Camp VI, it is believed that they were somewhat delayed due to the disorder that Odell found hours later after reaching this camp. Around 12:50 in the morning Odell, who was climbing from Camp V and was in a group of rocks at 7900 meters, saw (or thought he saw) his companions on the northeast ridge. Until that moment the mist hid the edge and summit of the mountain, but the clouds dissipated and according to Odell later:</p>

	<blockquote class="revealing-image"><p>At 12.50 there was a sudden clearing of the atmosphere, and the entire summit ridge and final peak of Everest were unveiled. My eyes became fixed on one tiny black spot silhouetted on a small snow-crest beneath a rock-step in the ridge; the black spot moved. Another black spot became apparent and moved up the snow to join the other on the crest. The first then approached the great rock-step and shortly emerged at the top; the second did likewise. Then the whole fascinating vision vanished, enveloped in cloud once more.</p>
	<cite>Noel Odell</cite>
		
	</blockquote>

	<p>Odell was convinced that that rocky outcrop was the Second Step, so if that were the case and after overcoming it, his companions would be at 8,635 meters more or less, a little more than 250 meters vertically from the summit, and about three or four hours of walking away from this, for some too long to reach the summit and return to Camp VI during the day. Later, and surely under pressure, he changed his testimony, doubting the exact location of the "black spots", perhaps they were in the First Step, however Odell was a fairly experienced geologist and it is difficult to think that he was wrong in the location of his vision.</p>

	<h2>Irvine and Mallory were never seen alive again, their epic adventure went down in history and perhaps it is better this way, not knowing what really happened and everyone can imagine what they want...</h2>

	<hr>

	<p>
		<small>Article extracted from the blog <a href="https://cuadernodeescaladas.com/everest-centenario/" target="_blank">Cuaderno de Escaladas</a></small>
		<small>Header photo by <a href="https://es.m.wikipedia.org/wiki/Archivo:Mount_Everest_North_Face.jpg" target="_blank">Carsten Nebel (Wikipedia)</a></small>
		<small>Black and white photos by <a href="https://rgs.org/" target="_blank">Royal Geographical Society</a></small>
		<small>Translation made with <A href="https://translate.google.com/" target="_blank">Google Translator</a></small>
	</p>

</div>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');

:root {
	--c1: #f0f8ff;
	--c2: #303030;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	background: var(--c2);
	padding-top: 100vh;
}

body * {
	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	margin: 0;
	font-weight: normal;
	font-size: 1.25em;
	font-family: "Days One", Arial, Helvetica, serif;
}

h2 {
	font-weight: normal;
	font-size: 1.6em;
	font-family: "Days One", Arial, Helvetica, serif;
}

p {
	font-size: 1.25em;
	margin: 2em 0;
	color: #666;
}

.content {
	width: 60vw;
	height: auto;
	padding: 5vmin;
	background: #fbfbfb;
	box-sizing: border-box;
	box-shadow: 0 0 1em 0em #000;
}

.progress-bar {
	background: #ff9800;
	width: 0;
	height: 1vmin;
	position: fixed;
	left: 0;
	top: 0;
	animation: grow-bar linear forwards;
	animation-timeline: scroll(root);
	z-index: 5;
}

@keyframes grow-bar {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

img {
	width: 100%;
}

.doble {
	width: 49%;
	margin: 10% 0 10% 1%;
	float: left;
}

@keyframes reveal {
	0% {
		opacity: 0;
		clip-path: inset(45% 20% 45% 20%);
	}
	100% {
		opacity: 1;
		clip-path: inset(0% 0% 0% 0%);
	}
}

.revealing-image {
	animation: reveal linear both;
	animation-timeline: view(10% 10%);
	animation-range: entry -50% cover 30%;
	animation-range: entry -100% cover 25%;
}

.parallax-header {
	color: #fff;
	height: 100vh;
	width: 100%;
	background-image: url(https://cdn.josetxu.com/img/everest-cara-norte-carsten-nebel-wikipedia.jpg);
	background-size: cover;
	background-position: 50% 50%;
	background-blend-mode: soft-light;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: calc(4vw + 1em);
	z-index: 3;
	position: fixed;
	top: 0;
	animation: sticky-parallax-header linear forwards;
	animation-timeline: scroll();
	animation-range: 0vh 90vh;
	box-shadow: 0 0 1em 0 #000;

	text-shadow: 1vmin 1vmin 1vmin #000, 1px 1px 1px #000, -1px -1px 1px #000,
		-1px 1px 1px #000, 1px -1px 1px #000;
}

@keyframes sticky-parallax-header {
	0% {
		background-position: 50% 0;
		height: 100vh;
		font-size: calc(4vw + 1em);
	}
	100% {
		background-position: 50% 100;
		height: 10vh;
		font-size: 2em;
		background-color: #00000080;
		filter: sepia(1);
		text-shadow: 0 0 0 #000, 1px 1px 1px #000, -1px -1px 1px #000,
			-1px 1px 1px #000, 1px -1px 1px #000;
	}
}

blockquote {
	position: relative;
	padding: 2.5em 5em 4em 5em;
	margin: 4em 0em;
	font-size: 1.25em;
	color: var(--c2);
	background: conic-gradient(from 180deg at 100% calc(100% - 0.65em), var(--c2) 0 25%, #fff0 0 100%), conic-gradient(from 180deg at 0.65em 50%, var(--c2) 0 25%, #fff0 0 100%), conic-gradient(from 0deg at calc(100% - 0.65em) 50%, var(--c2) 0 25%, #fff0 0 100%), conic-gradient(from 0deg at 0em 0.65em, var(--c2) 0 25%, #fff0 0 100%);
}

blockquote:before, 
blockquote:after {
	content: "";
	position: absolute;
	width: 3.5em;
	height: 4.5em;
	top: 3em;
	left: 0.25em;
	transform: rotate(5deg) scale(0.6);
	background: 
		radial-gradient(circle at 1.75em 3em, var(--c2) 1.5em, #fff0 calc(1.5em + 1px)), 
		radial-gradient(circle at 3.5em 1.5em, #fff0 2em, var(--c2) calc(2em + 1px) calc(4em + 1px), #fff0 calc(4em + 2px));
	filter: drop-shadow(3.5em -0.5em 0px var(--c2));
	border-radius: 100%;
}

blockquote:after {
	top: inherit;
	bottom: 3em;
	transform: rotate(195deg) scale(0.6);
	right: 0.25em;
	left: inherit;
}

blockquote p {
	font-size: 1.2em;
	margin-top: 1.5em;
	font-family: "Days One", Arial, Helvetica, serif;
}

blockquote p:first-letter {
	background: var(--c2);
	color: var(--c1);
	padding: 0 0.75em;
	margin-top: 0;
	margin-left: 0.65em;
	margin-right: 0.25em;
	box-sizing: border-box;
	font-size: 2em;
	float: left;
}

blockquote cite {
	font-weight: bold;
	position: absolute;
	bottom: 2.5em;
	background: var(--c2);
	color: var(--c1);
	right: 6em;
	padding: 0.5em 1em;
}

small {
	font-size: 0.7em;
}

small + small {
	opacity: 0.6;
	font-size: 0.55em;
	margin-top: 2em;
	width: 100%;
	display: block;
}

a {
	text-decoration: none;
	color: #47c;
	border-bottom: 2px dotted #9998;
}
a:hover {
	border-bottom-color: #47c;
}
!

JS
!
999px

Console