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 id='pages'>
	<section>

		<div>
		</div>
		<div>
		
			<div class="content">
					<h1 class="zetta">Lord Ullin's Daughter</h1>
			<h5 class="space-bottom">by Thomas Cambell</h5>
				<p>A chieftain, to the Highlands bound,<br> Cries, "Boatman, do not tarry!<br> And I'll give thee a silver pound<br> To row up o'er the ferry"--
				</p>
				<p>
					"Now who be ye, would cross Lochgyle, <br> This dark and storm water?"<br> "Oh, I'm the chief of Ulva's isle,<br> And thiss Lord Ullin's daughter.--
				</p>
				<p>"And fast before her father's men<br> Three days we've fled together,<br> For should he find us in the glen, <br> My blood would stain the heather.</p>
				<p>His horsemen hard behind us ride;<br> Should they our steps discover, <br> Then who will cheer my bonny bride<br> When they have slain her lover?"
				</p>
				</div>
			<div class="arrow">

			</div>				<h5>Scroll</h5>
<!-- 			  <i class="material-icons large">arrow_downward</i> -->
		
		</div>
	</section>
	<section>
		<div></div>
		<div class="content">
		<div>
			<p>
				Out spoke the hardy Highland wight,<br> "I'll go, my chief -- I'm ready:--<br> It is not for your silver bright, <br> But for you winsome lady:
			</p>
			<p>"And by my word! the bonny bird<br> In danger shall not tarry;<br> So through the waves are raging white<br>I'll row you o'er the ferry."--</p>
			<p>
				By this the storm Grew loud apace, <br> The water-wraith was shrieking;<br> And in the scowl of heaven each face<br> Grew dark as they were speaking<br>
			</p>
			<p>
				But still as wilder blew the wind, <br> And as the night grew drearer, <br> Adown the glen rode armed men, <br> Their trampling sounded nearer.--<br>
			</p>
			<p>
				"O haste thee, haste!" the Lady cries, <br> "Though tempests round us gather;<br> I'll meet the raging of the skies, <br> But not an angry father."--
			</p>
		</div>
		<div>
			<p>
				The boat has left a storm land, <br> A stormy sea before her, --<br> When, oh! too strong for human hand, <br> The tempest gather'd o'er her.--
			</p>
			<p>
				And still they row'd amist the roar<br> Of water fast prevailing: <br> Lord Ullin reach'd that fatal shore, <br> His wrath was changed to wailing.
			</p>
			<p>
				For, sore dismay'd, through storm and shade. <br> His child he did discover:--<br> One lovely hand she stretch'd for aid, <br> And one was round her lover.</p>
			<p>
				"Come back! come back!" he cried in grief,<br> "Across this stormy water: <br> And I'll forgive you Highland chief, <br>My daughter! --oh, my daughter!"--</p>
			<p>Twas vain: the loud waves lash'd the shore, <br> Return or aid preventing:--<br> The water wild wen o'er his child, <br> And he was left lamenting.</p>

		</div>
		</div>
		
	</section>
	<section>
		<div>
			<h2 class="yotta">Fin.</h2>
		</div>
		<div>
			<div class="content">
			<h3> Acknowledgements</h3>
			<h5> Photography from Unsplash</h5>
			<h6>Acknowledgement order same as presentation order</h6>
			<br>
			<span>
		<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px"
		 href="https://unsplash.com/@tjholowaychuk?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Tj Holowaychuk"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Tj Holowaychuk</span></a>
			</span>
			<br>
			<span>
		<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@alexkalligas?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Alex Kalligas"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Alex Kalligas</span></a>
			</span>
			<br>
			<span><a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@mgshannon?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Michael Shannon"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Michael Shannon</span></a></span>
			</div>
		</div>
	</section>
</main>
            
          
!
            
              body {
	font-size: 18px;
	.yotta,
	.zetta,
	.exa,
	.peta,
	.tera,
	.giga,
	.mega,
	.kilo,
	.milli,
	.micro,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		font-family: serif;
	}
	p {
		font-size: 20px;
		color: $grey-d-0;
	}
}
main {
	display: flex;
	overflow: hidden;
	white-space: nowrap;
	flex-wrap: no-wrap;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	section {
		width: 100vw;
		height: 100vh;
		display: flex;
		position: relative;
		.content {
			margin-top: 5rem;
			display: flex;
			flex-direction: column;
			align-content: center;
			justify-content: center;

			p {
				margin-right: 1rem;
				text-align: center;
			}
		}
	}
	section:nth-child(1) {
		.content {
			h1 {
				margin-left: -20rem;
			}
			width: 35vw;
			padding-right: 2rem;
		}
	}
	section:nth-child(1) > div:first-child {
		box-sizing: border-box;
		width: 65vw;
		height: 100vh;
		background-image: linear-gradient(
				to left,
				hsla(0, 0%, 100%, 0.99) 15%,
				hsla(0, 0%, 100%, 0.1)
			),
			url("https://source.unsplash.com/KBoWO5yV668");
		background-size: cover;
		background-position: bottom;
		backgroud-repeat: no-repeat;
		border: 1.2em solid $light-0;
	}

	section:nth-child(2) > div:first-child {
		background-image: linear-gradient(
				to left,
				hsla(0, 0%, 100%, 0.2) 15%,
				hsla(0, 0%, 100%, 0.2)
			),
			url("https://source.unsplash.com/MM7rH-zTllQ");
		width: 30vw;
		backgroud-repeat: no-repeat;
		border: 1.2em solid $light-0;
	}
	section:nth-child(2) {
		.content {
			flex-direction: row;
			align-content: center;
			div {
				padding: 2rem;
				width: 35vw;
			}
		}
	}
	section:nth-child(3) > div:nth-child(1) {
		background-image: linear-gradient(
				to left,
				hsla(0, 0%, 100%, 0.2) 15%,
				hsla(0, 0%, 100%, 0.2)
			),
			url("https://source.unsplash.com/ZvdDmDZSv7s");
		background-size: cover;
		backgroud-repeat: no-repeat;
		width: 75vw;
		border: 1.2em solid $light-0;
		h2 {
			color: $light-1;
			font-size: 10rem;
			text-align: center;
			padding-right: 20%;
		}
	}
	@keyframes attention {
		from {
			transform: scale(1);
		}
		to {
			transform: scale(1.03);
		}
	}
	.arrow {
		justify-content: center;
		animation-name: attention;
		animation-direction: alternate;
		animation-iteration-count: infinite;
		animation-duration: 1.5s;
		margin-left: -5rem;
		i {
			display: inline;
			font-size: 3rem;
		}
	}
}

            
          
!
            
              const page = document.getElementById('pages');
const panes = page.children;
let dummyX = null;
let lastPane = panes[panes.length - 1];

window.onscroll = function(){
	let y = document.body.getBoundingClientRect().top;
	console.log(document.body.getBoundingClientRect());
	page.scrollLeft = -y;
}

window.onresize = resize;

resize();

function resize(){
	let w = page.scrollWidth - window.innerWidth + window.innerHeight;
	document.body.style.height = w +'px';
	
	dummyX = lastPane.getBoundingClientRect().left+window.scrollY;
}
            
          
!
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