Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                
<body id="galaxy">

	
	<section id="fight-your-page">
    <a href="https://scotch.io/demos/star-wars-attack-of-the-dom" class="fade-color" target="_top">Full Screen Demo is better</a>
		<a class="meh" href="https://scotch.io/apps/star-wars-attack-of-the-dom" class="fade-color" target="_top">Fight your Web Page</a>
	</section>

	<section id="huuuge-dom"></section>

	<section id="intro">
		<div id="long-long-time-ago">
			<h1>A long time ago, in a galaxy<br>far, far away....</h1>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="logo" x="0px" y="0px" viewBox="0 0 693.615 419.375" enable-background="new 0 0 693.615 419.375" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
			<g id="Layer_2">
				<g>
					<path fill="#FFE81F" d="M148.718,221.207l8.67,25.461c4.691,13.768,8.879,24.779,9.425,24.779c0.009,0,0.017-0.004,0.024-0.01    c0.6-0.53,17.57-49.811,17.57-49.811h32.89l-39.68,115.619h-22.86c0,0-24.4-70.471-24.3-70.739l-25.47,69.851h-22.63    l-39.18-115.15l32.73,0.021c0,0,17.929,50.821,18.168,50.821c0.001,0,0.001-0.001,0.002-0.002l17.89-50.841H148.718 M32.003,213.2    l3.601,10.584l39.18,115.149l1.845,5.424h5.729h22.63h5.598l1.918-5.26l17.685-48.5c1.524,4.434,3.171,9.213,4.818,13.988    c6.089,17.655,12.191,35.277,12.191,35.277l1.864,5.383h5.696h22.86h5.712l1.854-5.403l39.68-115.618l3.637-10.598h-11.204h-32.89    h-5.706l-1.858,5.396c-2.974,8.635-6.921,20.031-10.296,29.676c-0.509-1.463-1.039-3.001-1.587-4.611l-8.669-25.46l-1.846-5.421    h-5.727h-36.75h-5.666l-1.881,5.345l-10.453,29.706c-3.453-9.706-7.456-21.017-10.516-29.691l-1.882-5.334l-5.657-0.004    l-32.73-0.021L32.003,213.2L32.003,213.2z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M655.258,220.758l-0.075,30.305c0,0-32.643-0.109-49.239-0.109c-5.521,0-9.266,0.013-9.444,0.045    c-2.86,0.521-4.681,6.602-3.87,9.271c0.399,1.35,3.391,5.76,6.63,9.81c3.229,4.051,8.54,10.681,11.78,14.729    c8.319,10.381,9.46,12.43,10.229,18.391c1.25,9.681-3.329,20.16-11.829,27.07c-8.518,6.93-8.145,6.979-71.383,6.979    c-0.916,0-1.835,0-2.777,0c-38.46-0.01-58.8-0.329-61.761-0.989c-5.26-1.19-13.64-8.03-35.79-29.28    c-7.967-7.636-15.309-14.322-15.686-14.324c-0.01,0-0.015,0.006-0.015,0.016l-0.261,44.579l-35.899-0.159l-0.221-114.98h45.271    h34.79c24.13,0.871,40.46,24.91,37.21,40.24c-0.74,3.479-2.62,8.521-4.181,11.2c-3.21,5.5-11.38,12.56-18.011,15.591    c-2.449,1.108-4.449,2.398-4.449,2.858c0,1.71,8.061,9.649,11.08,10.91c2.579,1.079,10.09,1.319,43.21,1.319    c3.882,0,7.408,0.002,10.608,0.002c33.293,0,31.618-0.24,34.19-5.741c1.801-3.83,0.431-6.12-12.239-20.39    c-16.051-15.971-14.37-23.621-14.48-29.271c-0.229-6.77,5.102-28.069,32.812-28.069L655.258,220.758 M440.188,273.878    c15.37,0,18.49-0.239,21.761-1.66c11.04-4.8,11.63-18.979,1.04-25.271c-2.319-1.381-5.3-1.609-21.96-1.7l-19.279-0.101    c0.159,0.15-0.061,27.57-0.061,27.57S426.518,273.878,440.188,273.878 M663.277,212.758h-8.021h-73.8    c-16.032,0-25.515,6.328-30.646,11.637c-8.347,8.633-10.313,19.504-10.162,24.629c0.008,0.427,0.003,0.865-0.002,1.322    c-0.073,8.329,1.154,17.758,16.659,33.246c3.065,3.452,8.193,9.239,10.131,12.115c-4.238,0.521-14.98,0.521-26.262,0.521h-4.792    l-5.816-0.002c-19.904,0-36.688-0.057-40.128-0.736c-0.481-0.314-1.156-0.854-1.898-1.498c6.877-4.235,13.83-10.799,17.104-16.412    c1.987-3.413,4.178-9.243,5.098-13.568c2.04-9.625-1.325-21.236-9.001-31.068c-8.956-11.471-21.985-18.334-35.746-18.83    l-0.145-0.006h-0.145h-34.79h-45.271h-8.016l0.016,8.017l0.221,114.979l0.016,7.949l7.949,0.035l35.899,0.159l7.988,0.035    l0.047-7.988l0.155-26.706c0.733,0.696,1.491,1.419,2.269,2.165c24.227,23.24,32.359,29.679,39.562,31.308    c1.979,0.441,5.253,1.172,63.523,1.188h2.779c31.546,0,47.38,0,56.799-0.91c10.789-1.043,14.259-3.49,19.461-7.725l0.173-0.141    c10.685-8.687,16.323-21.83,14.715-34.3c-1.048-8.11-3.194-11.479-11.922-22.368l-2.594-3.24    c-3.04-3.799-6.713-8.387-9.175-11.475c-1.986-2.484-3.546-4.689-4.487-6.133c1.236-0.003,2.841-0.005,4.918-0.005    c16.395,0,48.887,0.108,49.213,0.11l8.008,0.026l0.02-8.008l0.075-30.306L663.277,212.758L663.277,212.758z M429.739,265.586    c0.013-2.021,0.025-4.287,0.038-6.557c0.01-2,0.019-4.004,0.022-5.84l11.187,0.058c6.429,0.035,16.103,0.088,17.989,0.623    c2.407,1.461,3.75,3.72,3.604,6.06c-0.08,1.264-0.682,3.588-3.821,4.951c-1.75,0.76-4.54,0.997-18.57,0.997    C435.738,265.878,432.305,265.749,429.739,265.586L429.739,265.586z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M312.908,220.287l40.29,115.92l-32.83,0.15l-5.45-17.41l-58.7-0.471l-5.18,17.431l-32.5-0.341    l39.78-115.229L312.908,220.287 M286.507,237.283c-0.083,0.333-5.144,14.219-10.222,28.104c-5.12,14-10.257,28-10.328,28.109    c0,0.001-0.001,0.001,0,0.001l0,0c0,0,0,0,0-0.001c0.136-0.04,18.316-0.08,29.968-0.08c5.453,0,9.475,0.009,9.55,0.029    c0.001,0.004,0.001,0.005,0.001,0.005s0-0.001,0-0.003c0,0,0,0-0.001-0.002C305.271,292.916,286.566,237.959,286.507,237.283    c0.001-0.004,0.001-0.006,0.001-0.006l0,0C286.507,237.277,286.507,237.279,286.507,237.283 M318.595,212.282l-5.693,0.005    l-54.59,0.051l-5.696,0.005l-1.859,5.386l-39.78,115.229l-3.623,10.494l11.102,0.115l32.5,0.341l6.033,0.063l1.719-5.782    l3.466-11.662l46.854,0.375l3.708,11.848l1.765,5.638l5.907-0.026l32.829-0.15l11.195-0.052l-3.676-10.574l-40.29-115.92    L318.595,212.282L318.595,212.282z M277.472,285.424c1.515-4.129,3.556-9.71,6.327-17.289c0.869-2.376,1.664-4.551,2.393-6.545    c0.663,1.956,1.385,4.084,2.169,6.398c0.646,1.906,3.485,10.27,5.92,17.428C287.041,285.416,281.591,285.417,277.472,285.424    L277.472,285.424z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M326.488,81.928v28.6h-57.28v87.47h-34.15v-87.54l-66.86,0.19c-8.06,0-9.14,6.42-9.14,8.88    c0,3.02,1.97,6.04,12.79,19.74c7.02,8.9,13.47,17.78,14.32,19.72c4.64,10.68-1.36,27.32-12.29,34.08    c-7.79,4.813-6.459,4.931-64.308,4.931c-2.974,0-6.096,0-9.392,0h-62.27v-32.13h97.9l2.89-2.01c1.95-1.36,3.08-3.23,3.51-5.79    c0.6-3.68,0.29-4.16-11.8-17.78c-14.29-16.1-15.8-19.04-15.06-29.32c0.84-11.73,11.3-28.77,29.58-28.77L326.488,81.928     M334.488,73.916l-8.013,0.012l-181.56,0.27c-10.458,0-20.171,4.518-27.342,12.722c-5.814,6.652-9.63,15.429-10.206,23.477    c-0.973,13.511,2.137,18.393,17.056,35.202c4.33,4.877,8.447,9.516,9.821,11.486c-0.022,0.079-0.042,0.13-0.054,0.159    c-0.015,0.012-0.038,0.03-0.07,0.052l-0.822,0.572H37.908h-8v8v32.13v8h8h62.27h4.937h4.455c28.522,0,42.6-0.027,50.894-0.635    c9.49-0.695,12.518-2.323,17.054-5.14l0.566-0.351c14.262-8.821,21.612-29.827,15.422-44.074    c-1.91-4.358-14.003-19.746-15.376-21.486c-3.796-4.807-10.062-12.74-11.054-15.036c0.024-0.193,0.071-0.393,0.121-0.532    c0.165-0.042,0.481-0.098,1.001-0.098l58.86-0.167v79.517v8h8h34.15h8v-8v-79.47h49.28h8v-8v-28.6V73.916L334.488,73.916z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M419.548,82.857l40.18,116.22l-32.77-0.18l-5.32-17.41l-58.439-0.26l-5.221,16.77h-33.369l39.739-115.14    H419.548 M372.737,156.478l39.801-0.05c0.001,0,0.001,0.001,0.001,0.001c0.136,0-19.342-57.201-19.472-57.241l0,0    C392.925,99.183,372.288,156.478,372.737,156.478 M425.247,74.857h-5.699h-55.2h-5.701l-1.86,5.39l-39.74,115.141l-3.662,10.61    h11.225h33.37h5.889l1.75-5.623l3.461-11.121l46.632,0.207l3.599,11.774l1.721,5.629l5.887,0.033l32.77,0.18l11.297,0.062    l-3.691-10.676l-40.18-116.22L425.247,74.857L425.247,74.857z M383.851,148.464c2.468-7.027,5.904-16.657,9.014-25.312    c2.948,8.644,6.209,18.245,8.588,25.29L383.851,148.464L383.851,148.464z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M532.396,82.857c25.921,0,43.91,0.37,47.37,0.97c8,1.39,15.23,5.66,20.65,12.22    c5.67,6.86,6.97,10.14,7.71,19.54c1.061,13.27-5.25,24.72-17.7,32.15c-3.63,2.17-7.359,4.28-8.29,4.7    c-1.43,0.65-1.239,1.27,1.32,4.27c1.649,1.93,4.51,4.68,6.35,6.11l3.36,2.61l62.08,0.89l0.609,31.68h-38.061    c-29.439,0-38.86-0.27-41.62-1.2c-4.13-1.4-14.069-9.82-34.271-29.04l-14.42-13.72l0.152,43.96h-37.043V82.857H532.396     M526.938,134.627h19.671c19.141,0,19.739-0.06,22.47-2.11c4.881-3.66,6.609-7.43,6.091-13.22c-0.53-5.97-2.83-9.08-8.601-11.58    c-3.25-1.42-6.381-1.65-21.721-1.65h-17.91V134.627 M532.396,74.857h-41.8h-8v8v115.14v8h8h37.043h8.028l-0.028-8.028    l-0.088-25.216l0.84,0.799c24.986,23.773,32.356,29.173,37.218,30.821c3.733,1.259,9.982,1.624,44.188,1.624h38.061h8.154    l-0.156-8.154l-0.609-31.68l-0.148-7.734l-7.734-0.111l-59.402-0.851l-1.245-0.967c-0.396-0.309-0.876-0.717-1.389-1.179    c0.446-0.264,0.854-0.507,1.207-0.717c15.003-8.953,22.866-23.407,21.569-39.653c-0.863-10.959-2.82-15.896-9.52-24    c-6.584-7.969-15.621-13.298-25.447-15.005C575.678,74.999,548.257,74.857,532.396,74.857L532.396,74.857z M534.938,114.067h9.91    c14.027,0,16.806,0.233,18.518,0.981c3.25,1.408,3.58,2.091,3.835,4.957c0.256,2.848-0.097,3.994-2.922,6.112    c-0.093,0.069-0.164,0.123-0.223,0.166c-1.865,0.345-8.786,0.345-17.447,0.345h-11.67L534.938,114.067L534.938,114.067z"/>
				</g>
			</g>
		</svg>
		<div id="welcome-text">
			<div id="scroll-text">
				<p class="center">Episode HTML5</p>
				<h1 class="center">ATTACK OF THE DOM</h1>
				<p>Not long ago, we guys at <a href="https://scotch.io">scotch.io</a> made some Pure CSS3 lightsabers for fun. They were pretty cool, but we wanted to take it a little further... for more fun.</p>
				<p>You can now grab the lightsaber and fight your webpages. Enjoy this demo, and make sure you click the link at the top to battle your webpage!</p>
				<p>We also added a Mickey Mouse lightsaber and a Darth Maul one. Mickey's is the weakest lightsaber, Yoda's is the strongest, and everyone else is in between. Enjoy!</p>
					<section id="social-stuff-inline" class="box-sizing clearfix">
					<iframe src="http://ghbtns.com/github-btn.html?user=scotch-io&repo=stencil&type=watch"
					  allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
					<a href="https://twitter.com/share" class="twitter-share-button" data-via="scotch_io">Tweet</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
							<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fscotch.io&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=dark&amp;action=like&amp;height=80&amp;appId=1383840388498157" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
						</section>
				<h2 class="center">Begin!</h2>
			</div>
		</div>
	</section>

	<h1 id="character-name"></h1>
	<a href="#" id="begin-wars" class="box-sizing">Click to Fight!</a>

	<section id="lightsabers-box">
		<!-- OBI WAN KENOBI -->
		<div class="lightsaber" id="obi" title="Obi Wan Kenobi">
			<label for="obi-wan-example"></label>
			<input type="checkbox" id="obi-wan-example">
			<div class="switch"></div>
			<div class="plasma obi-wan"></div>
		</div>

		<!-- DARTH VADER -->
		<div class="lightsaber" id="vader" title="Darth Vader">
			<label for="vader-example"></label>
			<input type="checkbox" id="vader-example">
			<div class="switch"></div>
			<div class="plasma vader"></div>
		</div>

		<!-- MACE WINDU -->
		<div class="lightsaber" id="windu" title="Mace Windu">
			<label for="windu-example"></label>
			<input type="checkbox" id="windu-example">
			<div class="switch"></div>
			<div class="plasma windu"></div>
		</div>

		<!-- MICKEY MOUSE -->
		<div class="lightsaber" id="mickey" title="Mickey Mouse">
			<label for="mickey-example"></label>
			<input type="checkbox" id="mickey-example">
			<div class="switch"></div>
			<div class="plasma mickey mickey5"></div>
			<div class="plasma mickey mickey4"></div>
			<div class="plasma mickey mickey3"></div>
			<div class="plasma mickey mickey2"></div>
			<div class="plasma mickey mickey1"></div>
		</div>

		<!-- YODA -->
		<div class="lightsaber" id="yoda" title="Yoda">
			<label for="yoda-example"></label>
			<input type="checkbox" id="yoda-example">
			<div class="switch"></div>
			<div class="plasma yoda"></div>

        <img src="https://scotch.io/images/yoda.png">
		</div>

		<!-- DARTH MAUL -->
		<div id="maul-container">
			<div class="lightsaber" id="maul" title="Darth Maul">
				<label for="maul-example"></label>
				<input type="checkbox" id="maul-example">
				<div class="switch"></div>
				<div class="plasma vader"></div>
				<div class="plasma vader maul"></div>
			</div>
		</div>
	</section>

	<section id="the-enemies">
		<div id="checkboxes" class="input-cluster clearfix"></div>
		<div id="radio-buttons" class="input-cluster clearfix"></div>
	</section>
	<section id="form-guys">
		<h1>Heading 1</h1>
		<label>Label 1</label>
		<input type="text" class="enemy">
		<label>Label 2</label>
		<input type="text" class="enemy">
		<input type="submit" class="enemy">
	</section>

</body>
!

CSS 

              
                @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@font-face {
	font-family: 'FranklinGothicBookRegular';
	src: url('https://scotch.io/files/fonts/frabk-webfont.eot');
	src: url('https://scotch.io/files/fonts/frabk-webfont.eot?#iefix') format('eot'),
	url('https://scotch.io/files/fonts/frabk-webfont.woff') format('woff'),
	url('https://scotch.io/files/fonts/frabk-webfont.ttf') format('truetype'),
	url('https://scotch.io/files/fonts/frabk-webfont.svg#webfontbRCxujAM') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ---------- Begin Reset ---------- */
html, body 	{ margin: 0; padding: 0; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

a 			{ text-decoration: none; }

body, div {
	-webkit-transform : translateZ(0);
	-o-transform : translateZ(0);
	-moz-transform : translateZ(0);
	-ms-transform : translateZ(0);
	transform : translateZ(0);
}

input[type=checkbox], input[type=radio] {
	-webkit-transform : translateZ(0) !important;
	-o-transform : translateZ(0) !important;
	-moz-transform : translateZ(0) !important;
	-ms-transform : translateZ(0) !important;
	transform : translateZ(0) !important;
}
/* ---------- End Reset ---------- */


/* ---------- Begin Base ---------- */
body { font-family: 'Open Sans', sans-serif; color: #FFF; }
a { color: #00B4FF; }
section { position: relative; }

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.box-sizing {
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.fade-color {
	-webkit-transition: color 100ms;
	-moz-transition: color: 100ms;
	-o-transition: color: 100ms;
	-ms-transition: color: 100ms;
	transition: color: 100ms; ;
}

h2 { font-size: 1.4em; }

.center { text-align: center !important; }
.caps { text-transform: uppercase !important; }
/* ---------- End Base ---------- */

/* ---------- Begin Nav ---------- */
#navbar { display: block; z-index: 99999; position: relative; background: #444; padding: 10px; width: 100%; min-width: 100%; font-size: 13px; border-bottom: 1px solid #00B4FF; }
#navbar a {
	color: #FFF; margin: 0 10px;
}
#navbar i 								{ color: #00B4FF; margin-right:5px; }
#navbar a:hover > i 					{ color: #FDE273; }
	#navbar #url-scotch:hover 			{ color: #F9D3C8; }
	#navbar #url-cssdeck:hover 			{ color: #B25452; }
	#navbar #url-codepen:hover 			{ color: #B25452; }
	#navbar #url-github:hover 			{ color: #B25452; }

#social-stuff {
	top: 50px;
	left: 15px;
	position: absolute;
	z-index: 99999;
}

#social-stuff-inline 					{ margin:0 auto; text-align:center; width:65%; }
#social-stuff-inline iframe 			{ display:block; float:left; text-align:center; }

#fight-your-page {
 
}

#fight-your-page a {
	background: #00B4FF;
	border: 1px solid #000;
	color: #FFF;
	font-size: 20px;
	right: 20px;
	padding: 10px 30px;
	position:absolute;
	top:20px;
	width: 20%;
	text-align:center;
	z-index:9999;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

.meh {
  top: 100px !important;
}

#fight-your-page a:hover {
  background: orange;
}

/* ---------- End Nav ---------- */


/* ---------- Begin Galaxy ---------- */
#galaxy { background: #090909; overflow: hidden;}

.star {
	position: absolute;
	border-radius: 360px;
	z-index: -1;
	-webkit-animation-name: glow;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: glow;
	-moz-animation-iteration-count: infinite;
	-o-animation-name: glow;
	-o-animation-iteration-count: infinite;
	-ms-animation-name: glow;
	-ms-animation-iteration-count: infinite;
	animation-name: glow;
	animation-iteration-count: infinite;
}

.glow-slow {
	-webkit-animation-duration: 7s;
	-moz-animation-duration: 7s;
	-o-animation-duration: 7s;
	-ms-animation-duration: 7s;
	animation-duration: 7s;
}
.glow-medium {
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;
	-ms-animation-duration: 5s;
	animation-duration: 5s;
}
.glow-fast {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;
}


.distance-close {
	-moz-filter: blur(0.8px);
	-webkit-filter: blur(0.8px);
	-o-filter: blur(0.8px);
	-ms-filter: blur(0.8px);
	filter: blur(0.8px);
}
.distance-medium {
	-moz-filter: blur(1.5px);
	-webkit-filter: blur(1.5px);
	-o-filter: blur(1.5px);
	-ms-filter: blur(1.5px);
	filter: blur(1.5px);
}
.distance-far {
	-moz-filter: blur(4.5px);
	-webkit-filter: blur(4.5px);
	-o-filter: blur(4.5px);
	-ms-filter: blur(4.5px);
	filter: blur(4.5px);
}
/* ---------- End Galaxy ---------- */


/* ---------- Begin Intro ---------- */
#intro 						{ font-family: FranklinGothicBookRegular;}
#long-long-time-ago h1 		{
	width: 830px;
	display: none;
	margin: 0 auto;
	color: #56bfe3;
	font-size: 69px;
	margin-top: 300px;
}
#logo {
	display: none;
	width: 100%;
	margin: 0 auto;
	-webkit-animation: shrink 9s;
}
#welcome-text {
	position: absolute;
	display: none;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;	-moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
	-webkit-transform: perspective(500px) rotateX(25deg); -moz-transform: perspective(500px) rotateX(25deg); -ms-transform: perspective(500px) rotateX(25deg); -o-transform: perspective(500px) rotateX(25deg); transform: perspective(500px) rotateX(25deg);
}

#scroll-text {
	font-family: FranklinGothicBookRegular;
	position: absolute;
	top: 100%;
	color: #ff6;
	animation-delay: 5s;
	-webkit-animation: scroll 75s linear 4s infinite;
	-moz-animation: scroll 75s linear 4s infinite;
	-ms-animation: scroll 75s linear 4s infinite;
	-o-animation: scroll 75s linear 4s infinite;
	animation: scroll 75s linear 4s infinite;
}
#scroll-text p {
	text-align: justify;
	margin: 0.8em 0;
}
/* ---------- End Intro ---------- */


/* ---------- Begin Lightsaber-Box ---------- */
.lightsaber {
	width: 15px;
	height: 310px;
	display: none;
	float: left;
	margin-left: 30px;
	z-index:9999;
}

.lightsaber img 			{ left:-150px; opacity:0; position:absolute; pointer-events:none; top:0; }

/* yoda */
#yoda 												{ height: 200px; margin-top: 110px; }
#yoda input[type=checkbox]:checked ~ div.plasma 	{ height: 150px; z-index:9999; }
#yoda input[type=checkbox]:checked ~ img 			{ opacity:0.2; }

/* maul */
#maul-container {
	height: 550px;
	width: 15px;
	float: left;
	display: none;
	margin-left: 30px;
}
#maul-container .lightsaber 						{ display: block; margin-left: 0; }
#maul-container .lightsaber 						{ float: none; }
.maul 												{ top: 300px; }

/* mickey */
#mickey 						{  }
#mickey label 					{ background: white; border-color: pink; }

.mickey 						{ filter: blur(0px) !important; -moz-filter: blur(0px) !important; -webkit-filter: blur(0px) !important; -o-filter: blur(0px) !important; -ms-filter: blur(0px) !important; }

.lightsaber input[type=checkbox]:checked ~ div.mickey5 {
	height: 250px;
	background: red;
	width: 6px;
	margin-left: 2px;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey4 {
	height: 200px;
	z-index: 20;
	background: orange;
	width: 8px;
	margin-left: 1px;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey3 {
	height: 150px;
	z-index: 30;
	background: yellow;
	width: 8px;
	margin-left: 1px;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey2 {
	height: 100px;
	z-index: 40;
	background: green;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey1 {
	height: 50px;
	z-index: 50;
	background: blue;
	width: 12px;
	margin-left: -1px;
}

#lightsabers-box {
	height: 350px;
	top: 0;
	width: 300px;
	margin: 0 auto 0;
}
#character-name {
	font-size: 50px;
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 0;
	text-transform: uppercase;
}

#begin-wars {
	background:#444;
	border:1px solid #000;
	bottom: 20px;
	color:#FFF;
	display:none;
	font-size:35px;
	right: 20px;
	padding:10px 30px;
	position:absolute;
	text-align:center;
	width:30%;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  
}

#begin-wars:hover 		{ background: #00B4FF; }


/* ---------- End Lightsaber-Box ---------- */




/* ---------- Begin Enemies ---------- */

.enemy { display: block; position: absolute; top: 0; left: 0;}

h1.enemy { width: 200px; height: 43px; }
h2.enemy { width: 145px; height: 35px; }
h3.enemy { width: 110px; height: 30px; }
h3.enemy { width: 90px; height: 25px; }
input[type=radio].enemy { width: 15px; height: 15px; }
input[type=checkbox].enemy { width: 15px; height: 15px; }
input[type=text].enemy { height: 25px; width: 200px; background: white; border: grey 2px solid; }
ul.enemy, ol.enemy { width: 190px; height: 70px; }

#the-enemies {
	position: absolute;
	top: 0;
	left: 100px;
	display: none;
}

#input-cluster {
	width: 150px;
}

#input-cluster .input {
	float: left;
}

#form-guys {
	position: absolute;
	right: 200px;
	bottom: 300px;
	display: none;
}

#form-guys input {
	position: relative !important;
}

/* ---------- End Enemies ---------- */







/* ---------- Begin Keyframes  ---------- */
@-webkit-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@-o-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@-moz-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@-ms-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}

@-webkit-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@-o-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@-moz-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@-ms-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}

@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
/* ---------- End Keyframes  ---------- */
!

JS 

              
                // Initializers
var introFinished;

$(document).ready(function() {
	var bigHeight = $(window).height();
	$('body').height(bigHeight);

  // If you want to see the Intro, uncomment these and then
	/*startIntro();
	playIntroMusic();
	createStars(50);*/
	
  // Comment this line out out
  showLightsabers();
  
  // Or just go checkout the full demo link

	$('#begin-wars').click(function() {
		$('#huuuge-dom').remove();
		startBattle();
		createEnemies(5000);
		return false;
	});
});

// Create Space
function createStars(starCount) {

	var huuugeDom     = $('#huuuge-dom');

	// arrays to create random stars
	var starColors    = new Array('#eaeaea', '#ddf7dd', '#c7cbe8', '#e8c7c7', '#fff', '#fff', '#fff', '#fcfcfc');
	var starDistances = new Array('distance-close', 'distance-medium', 'distance-far');
	var glowSpeeds    = new Array('glow-slow', 'glow-medium', 'glow-fast');

	for (var i = 0; i < starCount; i++)	{
		var starId = 'star' + i;

		// randomly select star size, position, and other properties
		var size      = Math.floor((Math.random() * 10) + 1);
		var positionX = (Math.random() * ($(document).width() - size)).toFixed();
		var positionY = (Math.random() * ($(document).height() - size)).toFixed();
		var color     = starColors[Math.floor(Math.random() * starColors.length)];
		var distance  = starDistances[Math.floor(Math.random() * starDistances.length)];
		var glowSpeed = glowSpeeds[Math.floor(Math.random() * glowSpeeds.length)];
		var speed     = Math.floor(Math.floor(Math.random() * (700000) - 650000 + 1) + 650000);

		// append the star to the dom
		huuugeDom.append('<div id="' + starId + '"></div>');

		// add styles to the star
		$('#' + starId)
			.addClass('star move-stars ' + distance + ' ' + glowSpeed)
			.css({
				'width'		: size + 'px',
				'height' 	: size + 'px',
				'left' 		: positionX + 'px',
				'top' 		: positionY + 'px',
				'background': color
		});

		// move the star constantly
		moveStar(starId, ($(document).width()), speed);
	}
}

function moveStar(starId, distance, speed) {
	if (speed < 40000)
		speed = 40000;

	$('#' + starId).animate({
			left: distance + 20
		},
		speed,
		'linear',
		function() {
			$(this).css("left", "-10px");
			moveStar(starId, $(document).width(), speed);
		}
	);
}

// Enter Logo
function startIntro() {
	var longTime    = $('#long-long-time-ago h1');
	var logo        = $('#logo');
	var welcomeText = $('#welcome-text');
	var beginButton = $('#welcome-text h2');

	longTime.fadeIn(2000);
	setTimeout(function() {longTime.fadeOut(2000);}, 5000);

	setTimeout(function() {
		longTime.remove();
		logo.css('display', 'block');
	}, 7500);

	setTimeout(function() {
		welcomeText.css('display', 'block');
	}, 7000);

	setTimeout(function() {
		logo.css('visibility', 'hidden');
	}, 16300);

	setTimeout(function() {
		longTime.remove();
		logo.remove();
		welcomeText.remove();
		if (introFinished != 1) {
			introFinished = 1;
			moveGalaxyDown();
		}
	}, 40000);

	beginButton.click(function() {
		longTime.fadeOut(1500);
		logo.fadeOut(1500);
		welcomeText.fadeOut(1500);
		setTimeout(function() {
			longTime.remove();
			logo.remove();
			welcomeText.remove();

			if (introFinished != 1) {
				introFinished = 1;
				moveGalaxyDown();
			}
		}, 1500);
	});
}

function moveGalaxyDown() {
	$('#huuuge-dom').animate({
			'top': -110
		},
		1500,
		'linear',
		function() {showLightsabers();}
	);
}


function showLightsabers() {
	// hide the characters
	$('.lightsaber img').hide();

	$('#obi').fadeIn(100,function() {
		playLightsaberNoise();
		$(this).find('input:first').prop('checked', true);

		$('#vader').fadeIn(100, function() {
			playLightsaberNoise();
			$(this).find('input:first').prop('checked', true);

			$('#windu').fadeIn(100, function() {
				playLightsaberNoise();
				$(this).find('input:first').prop('checked', true);

				$('#mickey').fadeIn(100, function() {
					playLightsaberNoise();
					$(this).find('input:first').prop('checked', true);

					$('#yoda').fadeIn(100, function() {
						playLightsaberNoise();
						$(this).find('input:first').prop('checked', true);

						$('#maul-container').fadeIn(100, function() {
							playLightsaberNoise();
							$(this).find('input:first').prop('checked', true);

							setTimeout(function() {
								$('.lightsaber').find('input:first').prop('checked', false);
								$('#begin-wars').fadeIn();

								$('.lightsaber img').show();
							}, 1000);
						});

					});
				});
			});
		});
	});

	saberHover();
}

// Handle Lightsaber Hover
function saberHover() {
	var sabersBox 	= $('#lightsabers-box');
	var sabers 		= $('#lightsabers-box .lightsaber');

	sabers.hover(function() {
		// change the name
		var name = $(this).attr('title');
		$('#character-name').stop().hide().html(name).fadeIn();
	},
	function() {
		// hide the name
		$('#character-name').stop().fadeOut();
	});
}


function startBattle() {

	$('#begin-wars').fadeOut();

	// hide the characters
	$('.lightsaber img').remove();

	$('#yoda').box2d({
		'y-velocity': 0.5,
		'density': 2000
	});
	$('#windu').box2d({
		'density': 400
	});
	$('#vader').box2d({
		'density': 1500
	});
	$('#obi').box2d({
		'density': 500
	});
	$('#maul-container').box2d({
		'density': 900
	});
	$('#mickey').box2d({
		'density': 10
	});

	setTimeout(function() {
		$('.lightsaber').find('input:first').prop('checked', true);
		$('#maul-container').find('input:first').prop('checked', true);
	}, 1500);


	for (var i = 0; i < 5; i++)
	{
		$('#checkboxes').append('<input type="checkbox" checked="checked" class="enemy">');
		$('#radio-buttons').append('<input type="radio" checked="checked" class="enemy">');
	}

	$('#the-enemies').fadeIn();
	$('#form-guys').fadeIn();

	$('#the-enemies input').box2d({
		density: 150,
		restitution: 0.9
	});

	$('#form-guys input').box2d({
		density: 500
	});

	$('#form-guys label, #form-guys h1').box2d({
		density: 500
	});
}

function createEnemies(interval) {
	var iteration = 0;

	window.setInterval(function () {
		var size = Math.floor((Math.random() * 10) + 1);
		var x    = (Math.random() * ($(document).width() - size)).toFixed();
		var y    = 0;

		$('body').append(getNewEnemy('enemy-' + iteration, x, y));

		$('#enemy-' + iteration).box2d({
			'density': Math.random() * (500 - 100) + 100
		});

		iteration = iteration + 1;
	}, interval);
}

function getNewEnemy(id, x, y) {
	var elements = [];
		elements.push('<input type="checkbox" style="left: '+x+'px; top: '+y+'px;" class="enemy" checked="checked" id="'+id+'">');
		elements.push('<input type="text" style="left: '+x+'px; top: '+y+'px;" class="enemy" value="Text input field" id="'+id+'">');
		elements.push('<input type="radio" checked="checked" style="left: '+x+'px; top: '+y+'px;" class="enemy" id="'+id+'">');
		elements.push('<h1 id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy">Heading 1</h1>');
		elements.push('<h2 id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy">Heading 2</h2>');
		elements.push('<ul id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy"><li>List Item</li><li>List Item</li></ul>');
		elements.push('<ol id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy"><li>List Item</li><li>List Item</li></ol>');

		return elements[Math.floor(Math.random()*elements.length)];
}

function playIntroMusic() {
	setTimeout(function() {
		var audioElement = document.createElement('audio');
		audioElement.setAttribute('src', 'https://scotch.io/files/starwars.wav');
		audioElement.play();
	}, 7200);
}

// Lightsaber noise
$(function() {
	$('label').click(function() {
	    var input = $(this).parent().find('input');

	    if (!input.is(':checked')) {
	    	var audioElement = document.createElement('audio');
				audioElement.setAttribute('src', 'https://scotch.io/files/lightsaber.wav');
				audioElement.play();
	    }
	});
});

function playLightsaberNoise() {
	var audioElement = document.createElement('audio');
		audioElement.setAttribute('src', 'https://scotch.io/files/lightsaber.wav');
		audioElement.play();
}
!
999px

Console