Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <main>
	<p>Candy canes tiramisu cake lollipop pudding icing jujubes. Gummi bears jujubes ice cream chocolate bar gummi bears danish chocolate bar cake. Fruitcake candy canes toffee muffin jelly beans. Tootsie roll ice cream marzipan cotton candy powder danish pudding cupcake.</p>
	<p>Caramels jujubes sugar plum sweet toffee jelly oat cake. Cookie halvah bear claw bear claw carrot cake soufflé soufflé dragée. Candy tootsie roll bonbon marshmallow chocolate cake bonbon cheesecake tootsie roll caramels. Marzipan jelly-o lemon drops donut.</p>
	<div class='banner'></div>
	<p>Candy sesame snaps bear claw cookie. Tart marzipan dessert gummies. Marzipan dragée wafer croissant cake. Biscuit muffin carrot cake.</p>
	<p>Fruitcake donut icing gummi bears. Donut cake jujubes wafer chocolate bar cotton candy carrot cake. Bear claw tart sweet powder cake. Gummies ice cream dessert cupcake pudding jelly-o.</p>
	<div class='banner'></div>
	<p>Marshmallow cupcake marzipan topping tootsie roll jelly-o cake liquorice. Toffee cotton candy danish tiramisu bonbon caramels liquorice halvah. Biscuit donut bear claw chupa chups pudding biscuit powder sweet roll donut. Tart candy canes marzipan.</p>
	<p>Sugar plum pastry bonbon danish apple pie. Cookie cheesecake candy canes chocolate powder dessert fruitcake jelly. Powder halvah sweet sugar plum lollipop.</p>
	<p>Powder bonbon chocolate caramels cheesecake soufflé. Cake icing icing ice cream pudding jelly carrot cake ice cream tiramisu. Candy canes wafer marzipan pie chocolate bar dessert jujubes. Biscuit oat cake donut icing brownie.</p>
	<div class='banner'></div>
	<p>Dragée marzipan lollipop sesame snaps chocolate bar toffee jelly. Croissant cupcake sesame snaps tiramisu gummi bears ice cream sugar plum cotton candy. Soufflé cake gummi bears muffin soufflé soufflé marshmallow macaroon. Caramels caramels lemon drops.</p>
	<p>Croissant oat cake cake. Cheesecake liquorice muffin chocolate cake candy canes powder muffin tiramisu. Candy canes donut jelly beans jelly beans cotton candy jelly beans muffin. Candy apple pie dessert soufflé tiramisu.</p>
	<div class='banner'></div>
	<p>Ice cream gingerbread gummi bears pastry dragée muffin. Apple pie cake cake. Chupa chups dessert jelly pastry wafer tootsie roll toffee lemon drops lollipop.</p>
	<p>Jelly cookie wafer gummi bears caramels toffee. Jelly beans chocolate fruitcake. Lollipop halvah halvah cake tiramisu.</p>
	<p>Powder halvah sweet marzipan croissant. Tootsie roll carrot cake cheesecake biscuit jelly sugar plum oat cake. Lemon drops bear claw marshmallow chocolate cake biscuit gummies.</p>
	<p>Tootsie roll carrot cake lollipop pastry fruitcake sesame snaps tootsie roll icing. Soufflé cake croissant candy. Donut wafer candy cookie jujubes marshmallow. Biscuit tart donut gummi bears.</p>
	<p>Cake donut pudding toffee apple pie sweet roll. Liquorice chocolate bar jujubes jelly-o chupa chups carrot cake dragée macaroon carrot cake. Sesame snaps carrot cake cotton candy danish ice cream caramels bonbon. Apple pie icing brownie dessert marshmallow tootsie roll muffin.</p>
	<div class='banner'></div>
	<p>Jelly-o jujubes candy jujubes jujubes dragée muffin tiramisu cheesecake. Halvah candy biscuit fruitcake jelly beans pie sugar plum. Wafer jelly beans tiramisu jelly toffee sweet jujubes cake.</p>
	<p>Wafer brownie chocolate bar gummies tiramisu jelly-o carrot cake dragée gummies. Dessert chocolate cake sesame snaps macaroon. Oat cake cookie candy canes sweet roll sweet lemon drops sweet roll cake donut.</p>
	<p>Liquorice cotton candy tiramisu jelly beans. Pastry candy tiramisu. Marzipan chupa chups tiramisu. Jelly beans candy canes tart.</p>
	<div class='banner'></div>
	<p>Cake sugar plum pie gingerbread croissant jelly-o. Chocolate bar gummi bears cookie sesame snaps chocolate liquorice halvah jelly-o. Tiramisu cupcake pudding oat cake.</p>
	<p>Toffee danish tootsie roll chupa chups bear claw icing. Ice cream cake wafer halvah pastry bear claw toffee. Apple pie pudding pastry cookie brownie tootsie roll.</p>
	<div class='banner'></div>
	<p>Soufflé gingerbread gingerbread cake powder tart carrot cake soufflé soufflé. Chocolate halvah tart tootsie roll apple pie. Sugar plum marzipan carrot cake tart pastry tiramisu topping chupa chups. Toffee bonbon cupcake chupa chups muffin jelly ice cream.</p>
	<p>Carrot cake jujubes liquorice ice cream carrot cake croissant pudding tootsie roll. Jelly cake candy dragée apple pie topping lollipop. Gummies dessert pie pie chocolate bar candy. Toffee icing chocolate ice cream cupcake.</p>
	<div class='banner'></div>
	<p>Marzipan lemon drops pastry chupa chups fruitcake caramels jujubes. Jelly beans lemon drops gingerbread macaroon toffee bear claw carrot cake macaroon. Cake topping brownie jujubes pastry chocolate pudding croissant.</p>
	<p>Wafer jelly-o chupa chups cake bear claw. Cake biscuit sweet chocolate bar apple pie cake tiramisu apple pie. Powder dragée liquorice oat cake toffee cake gummies jelly-o. Wafer fruitcake pastry marshmallow carrot cake bear claw donut.</p>
	<p>Cake chupa chups lemon drops sesame snaps cheesecake tiramisu caramels. Cake caramels sweet gummies tootsie roll danish gingerbread biscuit topping. Icing icing gummies chocolate bar cupcake sesame snaps lollipop danish sweet. Gummies wafer bear claw jelly cookie.</p>
	<div class='banner'></div>
	<p>Dessert dragée pudding oat cake sweet chocolate cake chocolate cake sesame snaps. Bonbon dessert croissant dragée. Pie chupa chups chocolate cake apple pie.</p>
	<p>Chupa chups jujubes macaroon candy canes lollipop candy canes donut. Candy pie ice cream pie ice cream cake soufflé danish cotton candy. Chocolate cake chupa chups apple pie jujubes pie lemon drops oat cake danish.</p>
	<p>Wafer caramels soufflé wafer cheesecake sweet roll jelly soufflé. Lollipop chupa chups marzipan halvah bear claw topping cake candy. Jelly-o halvah caramels. Oat cake pie biscuit oat cake danish macaroon pie pie.</p>
	<p>Pastry gummi bears gummi bears croissant pudding marshmallow bonbon soufflé. Sugar plum biscuit gummies caramels tiramisu donut marzipan brownie. Chocolate cake tiramisu oat cake. Gingerbread dragée tiramisu chocolate bar jelly candy canes bonbon candy canes.</p>
	<p>Jelly beans bear claw marzipan dessert. Cupcake caramels candy canes. Sweet dessert macaroon gummi bears biscuit pie pudding. Toffee pie tootsie roll macaroon jelly dessert donut fruitcake wafer.</p>
	<div class='banner'></div>
	<p>Chocolate cotton candy apple pie ice cream icing jelly beans cake topping. Bonbon gummies ice cream marshmallow biscuit. Brownie cookie icing.</p>
	<p>Topping oat cake liquorice. Cake gummi bears macaroon chupa chups cheesecake croissant chocolate bar. Cake brownie jujubes tiramisu sweet sweet cheesecake.</p>
	<div class='banner'></div>
	<p>Candy canes donut pastry jelly beans donut jujubes macaroon donut carrot cake. Cotton candy pastry cheesecake lollipop cheesecake. Bonbon gingerbread soufflé jujubes.</p>
	<p>Jelly sugar plum tart chocolate. Macaroon cotton candy chupa chups biscuit gummies chupa chups dragée. Gummi bears halvah muffin.</p>
	<p>Lollipop powder chocolate bar bonbon marzipan jelly-o. Gingerbread pudding topping chocolate cake bonbon. Pastry pudding brownie chocolate bar. Gummi bears liquorice macaroon dessert lemon drops biscuit cake dessert.</p>
	<div class='banner'></div>
	<p>Candy biscuit croissant. Wafer tart sweet roll croissant sugar plum. Sugar plum tootsie roll pie lemon drops. Sweet roll tootsie roll marzipan cake.</p>
	<p>Cake candy canes chupa chups jelly beans jelly beans carrot cake caramels ice cream tiramisu. Pie macaroon sugar plum. Jelly tootsie roll marzipan pastry candy canes tart. Sweet roll carrot cake tiramisu jelly-o donut chocolate icing chupa chups.</p>
	<div class='banner'></div>
	<p>Bear claw sesame snaps jujubes sugar plum wafer. Cake marshmallow marshmallow marzipan bear claw muffin topping. Cookie dragée soufflé.</p>
	<p>Tiramisu donut toffee pie liquorice topping. Sesame snaps ice cream marshmallow cake lollipop. Lollipop tiramisu ice cream cupcake sugar plum cupcake.</p>
</main>
              
            
!

CSS

              
                * { margin: 0 }

html { background: gainsboro }

body { overflow-x: hidden }

main {
	margin: 0 auto;
	padding: .875em .5em;
	max-width: 32em;
	background: whitesmoke;
	font: 1.25em/ 1.375 segoe script, comic sans ms, cursive;
	
	* + * { margin-top: 1.375em }
}

.banner {
	margin-left: calc(50% - 50vw);
	width: 100vw; height: 37.5vmin;
	min-height: 15em;
	background: linear-gradient(#000, transparent, #000), 
		var(--img) 50%/ cover;
	background-attachment: fixed;
	background-blend-mode: multiply;
	
	&:nth-of-type(1) {
		--img: url(https://images.unsplash.com/photo-1509456592530-5d38e33f3fdd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
	}
	
	&:nth-of-type(2) {
		--img: url(https://images.unsplash.com/photo-1536056298178-a36a9ba0b0f5?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
	}
	
	&:nth-of-type(3) {
		--img: url(https://images.unsplash.com/photo-1481391243133-f96216dcb5d2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(4) {
		--img: url(https://images.unsplash.com/photo-1547675999-f71c79b90fb6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(5) {
		--img: url(https://images.unsplash.com/photo-1476097297040-79e9e1603142?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
	}
	
	&:nth-of-type(6) {
		--img: url(https://images.unsplash.com/photo-1469533667357-006056eaf780?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
	}
	
	&:nth-of-type(7) {
		--img: url(https://images.unsplash.com/photo-1546896687-bb1645078119?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(8) {
		--img: url(https://images.unsplash.com/photo-1499969942143-ad2a66bc72dc?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(9) {
		--img: url(https://images.unsplash.com/photo-1519676867240-f03562e64548?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(10) {
		--img: url(https://images.unsplash.com/photo-1506084868230-bb9d95c24759?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(11) {
		--img: url(https://images.unsplash.com/photo-1495147466023-ac5c588e2e94?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(12) {
		--img: url(https://images.unsplash.com/photo-1530915493757-0677252ffeee?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
	
	&:nth-of-type(13) {
		--img: url(https://images.unsplash.com/photo-1525124541374-b7eaf79d0dbf?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ)
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console