cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.


			.nth-line-1 A piece
			.nth-line-2 of Pierce
		p.lead A short talk with contemporary sculptural artist from Ireland


		p Sorem ipsum dolor sit amet, consectetur adipisicing elit. Est voluptate et asperiores. Consequatur beatae aperiam, dolore? Amet, a, unde. Accusamus repellat adipisci aut quasi quibusdam voluptate pariatur repellendus distinctio omnis, nulla iste soluta deserunt quae veniam reprehenderit. Ea dignissimos obcaecati dicta aliquam, suscipit maxime atque modi quas asperiores laboriosam assumenda quos deserunt tempore debitis facilis optio itaque autem quidem iusto quaerat nulla perferendis vero veritatis minus delectus! Natus quam ullam porro, blanditiis hic numquam, incidunt eligendi minus ab, soluta animi.
		p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos sit, adipisci tempore molestiae, accusantium praesentium consequatur asperiores facilis ipsum mollitia autem. Aspernatur, reiciendis. Debitis ullam expedita voluptatibus illo sequi, ut cumque eaque quibusdam officiis pariatur, recusandae mollitia illum nostrum optio facere, at quisquam! Repellat adipisci ullam, soluta quo autem officia expedita itaque consectetur id accusantium et beatae animi nisi veniam sed accusamus voluptate necessitatibus maxime minus fugit sint, unde ratione placeat! Iste, possimus magni nihil? Accusantium, porro officia quidem eaque, libero placeat enim ipsa blanditiis quis ea beatae atque, aspernatur cumque quas laborum fugiat minima minus temporibus in deserunt.
		blockquote Could be better, could be worse
		p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque exercitationem delectus ipsam dolor, corporis iusto facere sint mollitia nemo aut. Excepturi rem tempore laborum mollitia explicabo sunt quisquam, ut provident, cum temporibus facere enim, facilis consequuntur nostrum porro corporis. Molestiae quam impedit consectetur facilis architecto nostrum voluptas, ducimus adipisci quos nulla, obcaecati culpa est totam rem harum laborum, asperiores quibusdam. Nam blanditiis ea temporibus delectus, quo officiis reprehenderit quasi illo praesentium magni amet laboriosam deserunt asperiores quidem. Odit, iure.
		p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis ullam error necessitatibus ab non velit vero beatae illum temporibus. Laborum hic neque ut quidem. Consectetur quis, quod tenetur harum dolorem quia unde odit at blanditiis deserunt aspernatur incidunt placeat, magni mollitia similique, velit porro nobis vitae hic possimus. Dolorem, iusto eveniet. Magnam perspiciatis repellendus sequi, explicabo soluta quidem atque ex animi, autem doloremque delectus esse in consequatur. Ipsam in vero minus ad non sequi molestiae impedit a sit dignissimos? Quo repudiandae laborum minus, omnis voluptates praesentium officiis.
		p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusamus consectetur consequatur molestias, blanditiis placeat autem fugiat eligendi earum repellendus nihil sed, architecto.
		p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, quaerat, illo. Culpa?
		p Autor Name
		img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-music-01.jpg" alt="Guitar guy"
		img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-tank-01.jpg" alt="Tank"
              @import 'modular-scale'
@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT:400|Lora:400)

$ms-base: 1em
$ms-ratio: $major-third

$yellow: #fcf704
$cement: #ccc
$black: #191919

=mq($w: 55em)
	@media (min-width: $w)

	font: 400 1em/1.33 'Lora', serif
	background-color: $black

	padding-bottom: 3em

	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/unsplash-man-01.jpg') center 30%
	height: 50vh
	background-size: cover
		width: 40%
		position: fixed
		top: 0
		left: 0
		bottom: 0
		height: auto // reset
		width: 50%

	color: $cement
		margin-left: 40%
		position: relative
		max-width: 66em
		margin-left: 50%

	text-align: center
	padding: 0 2em

	font-family: 'Old Standard TT', serif
	color: $yellow
	text-transform: uppercase
	font-weight: 400

	line-height: 1

	font-size: 19vw
		font-size: 10.5vw

	font-size: 14.5vw
		font-size: 8vw
	color: $cement
	font-size: ms(2)
	max-width: 20em
	margin: 0 auto
	text-align: center

	border: none
	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/5175/hr-01.png') no-repeat center
	height: 40px
	margin: 5em 0

	column-width: 14em
	column-gap: 1.33em
	padding: 0 1em
		padding: 0 3em

section p:first-of-type:first-letter
	color: $yellow
	float: left
	font-size: 7em
	line-height: 1
	margin-top: -0.2em
	margin-bottom: -0.2em
	margin-right: 0.1em

		// text-align: justify

	max-width: 100%
	margin-bottom: 1.33em
	vertical-align: middle

	border-left: 0.2em solid $yellow
	font-size: ms(3)
	padding: 0.1em 0.5em
	line-height: 1.5
	margin-left: 0
	margin-right: 0
	quotes: "“" "”" "‘" "’"
		color: $yellow
		font-size: ms(1)
		line-height: 0
		content: open-quote
		content: close-quote
		position: absolute
		right: 100%
		top: 80vh
		width: 9em
		background: $black
🕑 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.
Loading ..................