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.

            
              <article>
	<header>
		<h1>main title</h1>
	</header>
	<section>
		<header>
			<h2>awesome title</h2>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam sed quaerat aspernatur delectus, ipsum. Corrupti quibusdam aspernatur optio rem, architecto, minus deserunt earum. Quidem nihil, nam natus laudantium repudiandae commodi.</p>
		<p>Hic impedit obcaecati quo aliquam? Ipsum, officia, quasi? Recusandae cupiditate unde nostrum molestias, possimus quod sed nihil totam, aspernatur tempora reprehenderit facilis, quam nemo quia deleniti voluptatum expedita. Perferendis, culpa.</p>
		<p>Sed, ullam, quia. Vero nisi veniam ducimus assumenda cum non repudiandae a eum, eligendi vitae necessitatibus obcaecati expedita dolore, atque ut fugit. Pariatur atque minus vitae sed magni modi quaerat.</p>
		<div>
			<input id="inp1" type="text" required>
			<label for="inp1"><span>what's your name?</span></label>
		</div>
	</section>
	<section>
		<header>
			<h2>another awesome title</h2>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, consequatur voluptate quis, enim velit at quibusdam, corporis veritatis sed dolore perferendis libero vitae tempora corrupti culpa laborum ullam? Sapiente, voluptate!</p>
		<p>Aperiam inventore unde quasi, laborum deleniti esse porro nesciunt libero debitis eius voluptatibus officia repudiandae reiciendis quo aliquid temporibus eaque qui repellat culpa dignissimos eos! Quisquam quidem quaerat ad harum.</p>
		<p>Ipsam, dolor, velit. Minus numquam dignissimos aliquam velit est recusandae labore nemo adipisci, blanditiis mollitia natus asperiores, illum nihil, dolorem doloremque. Omnis vero magnam, doloremque. Labore id, libero rem sit!</p>
	</section>
	<section>
		<header>
			<h2>what an awesome title</h2>
		</header>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, excepturi fugiat porro commodi, possimus maiores mollitia nemo consectetur non molestias quia suscipit iste doloribus voluptates voluptatem animi ipsum saepe facilis!</p>
		<p>Magni quaerat aliquid iure quis illum sint architecto, cumque nobis aliquam, nostrum, amet! Quas reiciendis totam minus? Aliquid nam adipisci officiis temporibus quia ea assumenda aut vero, porro dolorum possimus.</p>
		<p>Repellat nobis quia, quo impedit odio molestias. Quis eligendi fuga dignissimos odio, provident non quas. Magni sunt omnis vero, velit perferendis iure at autem nam. Alias adipisci tempore corporis illo!</p>
	</section>
</article>
            
          
!
            
              div {
	position: relative;
	width: 80%;
	margin: 3em auto;
	@media(min-width:60em){
		width: 40%;
	}
}
label {
	// nothing here!
}
span {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	cursor: text;
}
label::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	background: rgba(#000,.7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
input {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: .2em;
	box-sizing: border-box;
	outline: none;
	background: white;
}
input, span {
	padding: .5em;
	margin: 0;
	border: 0;
	font: 1.2em/1.5 "droid serif", sans-serif;
	text-align: left;
	color: #555;
}
span, label::before {
	transition: all .2s ease-out;
}
input:focus {
	box-shadow: 0 0 3em darken(#000,20%);
	& + label span {
		color: white;
		transform: translateY(-2em);
	}
	& + label::before {
		opacity: 1;
		visibility: visible;
	}
}
input:focus, input:valid {
	& + label span {
		font-size: 1.1em;
		transform: translateY(-2em);
	}
}

/* misc */
body { background: #dddde5; color: #556; font: 1.1em/1.4 "droid serif", sans-serif; }
article { width: 60%; margin: 0 auto; padding: 2em; background: #eeeeea; }
            
          
!
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.
Loading ..................

Console