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.

            
              <header>
	HEADER
</header>
<div class="container">
	<aside class="leftbar">
		LEFTBAR
	</aside>
	<section class="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna elit, sodales nec pellentesque eu, blandit sit amet ipsum. Vestibulum pulvinar accumsan diam, eget blandit felis hendrerit non. Morbi ligula metus, consequat in consequat vel, rhoncus ut felis. Suspendisse viverra eu ipsum nec porttitor. Sed eu sodales elit. Morbi venenatis, sem id iaculis tempus, leo mi egestas felis, sed suscipit ligula elit non est. Mauris egestas nisi et sapien blandit, eget convallis massa ultrices.
<br><br>
Suspendisse lobortis condimentum mollis. Sed maximus ligula mauris, tincidunt maximus metus euismod ac. Pellentesque cursus mollis ipsum sed molestie. Phasellus felis justo, imperdiet eu venenatis in, pretium et turpis. Etiam venenatis elit eu pulvinar interdum. Vivamus sagittis lobortis risus sed commodo. Vestibulum pellentesque turpis at porta euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec dapibus odio diam, ut pulvinar lacus pulvinar tincidunt. Nulla auctor urna non volutpat cursus. Ut ac tellus nulla. Nulla faucibus sed odio in lobortis.
<br><br>
Donec et viverra libero. Integer a sem ullamcorper, varius metus at, malesuada lectus. Integer fermentum leo mi, a placerat turpis vestibulum ac. Sed non risus quis purus posuere mattis in ut diam. Maecenas vehicula nec tortor eu mattis. Vivamus vehicula vel nisi quis mattis. Morbi vestibulum hendrerit eros quis condimentum. Etiam sed diam laoreet, vestibulum diam nec, ullamcorper lorem. Ut consequat diam vel sapien tempor porta.
<br><br>
Nullam varius lectus a odio rutrum vulputate. Vivamus pulvinar accumsan lorem at ullamcorper. In non neque finibus, aliquet leo non, faucibus quam. Sed ornare ut tellus non tempus. Etiam maximus venenatis cursus. Morbi suscipit massa sed mi varius tincidunt eu et dolor. Pellentesque eu ante nec ante ultricies laoreet ut eget nibh. Ut vel ex urna.
<br><br>
In vel nibh egestas, lacinia dui et, ultrices nulla. Duis semper turpis ut semper rhoncus. Ut tempor metus libero, a tristique felis imperdiet non. Suspendisse imperdiet, dolor sit amet vehicula lobortis, nibh libero porttitor nisi, nec pulvinar leo nisi nec felis. Aliquam porttitor vulputate suscipit. Proin arcu tortor, pellentesque eu justo ac, venenatis ultricies nunc. Cras vitae dui nisi.
<br><br>
Vestibulum vel leo non lacus laoreet convallis. Fusce molestie imperdiet sapien, sed convallis magna. Integer mattis quis augue a sodales. Duis turpis ante, pellentesque auctor erat id, sagittis finibus ante. Pellentesque fermentum, elit id ultricies elementum, est ipsum eleifend quam, sit amet mollis nibh leo ac urna. Morbi vehicula urna odio, ut egestas quam sagittis vitae. Vivamus vitae fringilla enim, facilisis rhoncus enim. Suspendisse ultrices diam sit amet nibh scelerisque, non eleifend mauris aliquet.
<br><br>
Suspendisse sed ligula et metus imperdiet consequat. Donec bibendum elit nisi, vel pharetra leo efficitur in. Proin sed justo nec orci aliquam sodales sed ac enim. Donec ornare quam nisi, eu pulvinar felis pellentesque eu. Sed vel sapien in eros rutrum congue non quis neque. Donec vel orci velit. Fusce suscipit, purus vel aliquet feugiat, tellus nibh maximus diam, ut cursus dui odio nec mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Vestibulum fringilla sodales eros, et pretium est. Mauris hendrerit egestas lorem nec porta. Sed gravida consectetur ullamcorper. Quisque neque eros, rutrum ac convallis et, dictum convallis ante. Curabitur et lorem sagittis, pharetra nisi sollicitudin, tempus nulla. Donec nec elementum arcu. Aenean mattis vitae augue eget dictum. Proin velit urna, sagittis pretium elit nec, rhoncus suscipit turpis. Fusce auctor felis ut tortor aliquet, ut laoreet eros dignissim. Aenean eget tempus elit. Nam congue felis sit amet nisi rhoncus, vel fermentum eros luctus.
<br><br>
Morbi ullamcorper lacus ut odio varius, sit amet placerat turpis dignissim. Vivamus eget eleifend elit. Nullam mollis pellentesque pretium. Proin vitae lacus dictum, eleifend ante nec, scelerisque ex. Pellentesque eu magna tellus. Aenean venenatis quam nisi, sed auctor est tristique in. Aenean elementum sapien id urna iaculis eleifend. Mauris ut nibh varius, porttitor orci eget, egestas velit.
<br><br>
Vestibulum iaculis urna sed eleifend ullamcorper. Curabitur vitae vehicula nisi, vitae pulvinar lorem. Donec facilisis mauris et tellus ultricies hendrerit. In hac habitasse platea dictumst. Donec dapibus ornare velit, imperdiet cursus ex malesuada ut. Aenean eget dui quis mauris congue luctus. Etiam eget lectus nisl.
	</section>
	<aside class="rightbar">
		RIGHTBAR
	</aside>
</div>
<footer>
	FOOTER
</footer>
            
          
!
            
              * {
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
	height: 100%;
}
body {
	height: 100%;
	display: flex;
	flex-direction: column;
}

header {
	height: 60px;
	min-height: 60px;
	background: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.container {
	display: flex;
	flex: 1;
	min-height: 0;
	.leftbar {
		width: 200px;
		min-width: 200px;
		background: #eee;
		text-align: center;
		padding: 20px;
		box-sizing: border-box;
	}
	.content {
		overflow: auto;
		padding: 20px;
	}
	.rightbar {
		box-sizing: border-box;
		width: 150px;
		min-width: 150px;
		background: #ddd;
		text-align: center;
		padding: 20px;
	}
}

footer {
	background: #666;
	height: 50px;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
            
          
!
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