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

              
                <div id="mainContainer">
  <div class="wrapper">
    <div class="page group">
      <nav>
				<div class="menu">
					<h3>Main Menu</h3>
					<ul>
						<li><a href=""><span>Link #001</span></a></li>
						<li><a href=""><span>Link #002</span></a></li>
						<li><a href=""><span>Link #003</span></a></li>
						<li><a href=""><span>Link #004</span></a></li>
						<li><a href=""><span>Link #005</span></a></li>
						<li><a href=""><span>Link #006</span></a></li>
						<li><a href=""><span>Link #007</span></a></li>
						<li><a href=""><span>Link #008</span></a></li>
						<li><a href=""><span>Link #001</span></a></li>
						<li><a href=""><span>Link #002</span></a></li>
						<li><a href=""><span>Link #003</span></a></li>
						<li><a href=""><span>Link #004</span></a></li>
						<li><a href=""><span>Link #005</span></a></li>
						<li><a href=""><span>Link #006</span></a></li>
						<li><a href=""><span>Link #007</span></a></li>
						<li><a href=""><span>Link #008</span></a></li>
						<li><a href=""><span>Link #001</span></a></li>
						<li><a href=""><span>Link #002</span></a></li>
						<li><a href=""><span>Link #003</span></a></li>
						<li><a href=""><span>Link #004</span></a></li>
						<li><a href=""><span>Link #005</span></a></li>
						<li><a href=""><span>Link #006</span></a></li>
						<li><a href=""><span>Link #007</span></a></li>
						<li><a href=""><span>Link #008</span></a></li>					
					</ul>
				</div>
      </nav>
			<div id="home">
				<div class="content">
					<h1>Untitled Page</h1>
					<p><b>I'm currently in the process of running cross-compatibility QA.</b></p>
					<p>
						<div class="group">
							<div class="box"></div>
							<div class="box"></div>
							<div class="box"></div>
							<div class="box"></div>
						</div>
					</p>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error rem, libero provident dolores corporis? Nam voluptas cupiditate consectetur numquam expedita. Minus quasi repudiandae consectetur officiis ea, animi repellat reiciendis voluptatem!</p>
					<p>Dignissimos animi non, accusamus tenetur. Veritatis laudantium, qui fuga assumenda corrupti harum dolore at necessitatibus velit. Sequi, veniam reprehenderit maxime delectus ex sint voluptate pariatur, quasi, recusandae repudiandae vero, asperiores!</p>
					<p>Repellendus provident iusto, quae veniam praesentium laudantium ea quidem, ratione impedit modi perspiciatis omnis qui? Id veritatis explicabo magni sapiente nisi aspernatur ex, consequuntur quas. Aspernatur et ex, inventore sequi.</p>
					<p>Dignissimos corporis quas similique consequuntur illum, esse commodi quidem, nostrum repellendus velit, nam repellat rem labore optio possimus ex accusantium, iusto recusandae nemo officia! Dignissimos voluptates maiores, repellendus nulla doloremque.</p>
					<p>Qui voluptate minima cumque, dolorem non saepe soluta sed molestias nisi, consequuntur facilis. Autem, unde, facere! Perferendis deleniti doloribus quis vitae iure, rerum asperiores! Accusantium non ab placeat ratione dolore.</p>
					<p>Maiores ut quisquam sunt saepe, facere repellat nisi possimus, mollitia numquam ducimus porro repudiandae placeat! Quod voluptas nostrum ipsam magnam aliquam sint dolorem, autem minus, optio, laboriosam neque exercitationem fuga?</p>
					<p>Tempore quaerat quisquam, iusto libero. Temporibus provident neque repudiandae cum id dolores incidunt obcaecati, et est minus voluptas, similique vel. Architecto eveniet inventore numquam, odio facilis nisi porro et natus!</p>
					<p>Quidem accusamus dolores deleniti aliquid sint eum fugiat, blanditiis inventore, cum minima, dolorem eaque culpa. Quidem necessitatibus, ea laborum quibusdam officia saepe vitae, esse veniam. Temporibus quibusdam voluptate assumenda laboriosam?</p>
					<p>Sunt dolorum ullam unde ad ex doloribus sint laboriosam omnis accusamus totam! Vitae ipsa vero minima praesentium reprehenderit cupiditate nisi beatae, accusamus rem molestias quae magnam dolores libero assumenda. Architecto.</p>
					<p>Consequuntur deleniti est sapiente nesciunt quas, non aliquam praesentium quasi. Quis necessitatibus molestiae doloremque repellendus enim harum minima nisi nam. Incidunt, consectetur dolore vitae autem placeat ipsam nesciunt quasi, libero.</p>
					<p>Saepe porro obcaecati placeat aspernatur reprehenderit labore tempore et, perferendis pariatur culpa, quidem, fuga quasi voluptate? Eum debitis, dolores temporibus sunt cum voluptate vel nihil dolore autem aspernatur officia laboriosam.</p>
					<p>Tenetur, odit culpa. Recusandae iusto molestiae aperiam quos officiis sapiente explicabo quia, perferendis mollitia veritatis laboriosam voluptate, est dignissimos non repudiandae porro error beatae vitae dolorum eum eveniet molestias deserunt.</p>
				</div><!-- content -->
			</div><!-- home -->
    </div><!-- page -->
  </div><!-- wrapper -->
</div><!-- mainContainer -->
              
            
!

CSS

              
                // Theme Settings

$space: 20px;
$color: rgb(52, 73, 94);
$dark: #ddd;
$light: #666;
$bg: #999;

$navSize: 200px;
$navMenu: $navSize+20;

// General Mixins

@mixin shadow($shadowColor, $shadowSize: 4px, $shadowBlur: 0px, $shadowOpacity: 0) {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=rgba($shadowColor, $shadowOpacity)";/*IE 8*/
  -moz-box-shadow: $shadowSize $shadowSize $shadowBlur rgba($shadowColor, $shadowOpacity);/*FF 3.5+*/
  -webkit-box-shadow: $shadowSize $shadowSize $shadowBlur rgba($shadowColor, $shadowOpacity);/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
  box-shadow: $shadowSize $shadowSize $shadowBlur rgba($shadowColor, $shadowOpacity);/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=rgba($shadowColor, $shadowOpacity)); /*IE 5.5-7*/
}

@mixin roundEven($rCorners) {
  -moz-border-radius: $rCorners;
  -webkit-border-radius: $rCorners;
  -o-border-radius: $rCorners;
  -ms-border-radius: $rCorners;
  border-radius: $rCorners;
}
@mixin roundOdd($tLeft, $tRight, $bLeft, $bRight) {
  -webkit-border-top-left-radius: $tLeft;
  -webkit-border-top-right-radius: $tRight;
  -webkit-border-bottom-left-radius: $bLeft;
  -webkit-border-bottom-right-radius: $bRight;
  -moz-border-top-left-radius: $tLeft;
  -moz-border-top-right-radius: $tRight;
  -moz-border-bottom-left-radius: $bLeft;
  -moz-border-bottom-right-radius: $bRight;
  -o-border-top-left-radius: $tLeft;
  -o-border-top-right-radius: $tRight;
  -o-border-bottom-left-radius: $bLeft;
  -o-border-bottom-right-radius: $bRight;
  -ms-border-top-left-radius: $tLeft;
  -ms-border-top-right-radius: $tRight;
  -ms-border-bottom-left-radius: $bLeft;
  -ms-border-bottom-right-radius: $bRight;
  border-top-left-radius: $tLeft;
  border-top-right-radius: $tRight;
  border-bottom-left-radius: $bLeft;
  border-bottom-right-radius: $bRight;
}
@mixin trans($speed) {
  -webkit-transition: $speed all;
  -moz-transition: $speed all;
  -o-transition: $speed all;
  transition: $speed all;
}

// GLOBAL
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  color: #333;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  background: #999;
  min-width: 320px;
  overflow-x: hidden;
}

p {
  margin: $space 0;
  &:first-child {
    margin-top: 0;
  }
}

a {
  &:link,
  &:visited {
    color: #333;
    text-decoration: none;
  }
  &:hover,
  &:visited:hover {
    color: #000;
  }
}

.group {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// THEME
/*
========================================
Column Sizes
========================================
01 - 8.333333333333332%
02 - 16.666666666666664%
03 - 25%
04 - 33.33333333333333%
05 - 41.66666666666667%
06 - 50%
07 - 58.333333333333336%
08 - 66.66666666666666%
09 - 75%
10 - 83.33333333333334%
11 - 91.66666666666666%
12 - 100%
*/


nav {
	z-index: 9500;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: $navSize;
	background: #ddd;
	overflow: hidden;
	@include trans(1s);
	.menu {
		z-index: 9250;
		position: absolute;
		width: $navMenu;
		top: 0;
		bottom: 0;
		overflow: auto;
		overflow-x: hidden;
		h3 {
			color: #fff;
			font-size: 1.65em;
			padding: $space;
			margin: 0;
			background: #333;
		}
		ul {
			li {
				border-top: 2px solid rgba(255,255,255,0.2);
				border-bottom: 2px solid rgba(0,0,0,0.05);
				a {
					@include trans(0.5s);
					&:link, &:visited,
					&:hover, &:visited:hover {
						display: block;
						color: #666;
						font-size: 1.15em;
						line-height: 1em;
						padding: $space;
					}
					&:hover,
					&:visited:hover {
						color: #333;
						background: #ccc;
					}
					&:before {
						content: "\2022";
						position: absolute;
						font-size: 2em;
					}
					span {
						display: block;
						padding-left: $space;
					}
				}
			}
		}
	}
}

#mainContainer{
  padding: 0 0 $space*4;
}

.wrapper {
  width: 100%;
  max-width: 94%;
  margin: 0 auto;
}

.page {
  min-width: 320px;
  min-height: 500px;
  background: #fefefe;
  padding: 0;
  margin-left: $navSize;
  overflow: hidden;
  @include roundOdd(0,0,$space/4,$space/4);
  @include shadow(#000, 4px, 0, 0.15);
  h1 {
		font-size: 1.65em;
		border-bottom: 1px solid #999;
    padding: 0 0 $space;
    margin: 0 0 $space;
  }
}

.content {
  padding: $space;
}
.box {
	float: left;
	width: 48%;
	padding-top: 48%;
	margin: 1%;
	border: 1px dotted #ccc;
	background: #fff;
}

@media screen and (min-width: 768px) {
	.box {
		width: 24%;
		padding-top: 24%;
		margin: 0.5%;
	}
}

@media screen and (min-width: 1180px) {
	#mainContainer{
		padding: $space*2 0 $space*4;
	}
  .wrapper {
    width: 980px;
  }
  nav {
		float: left;
		position: relative;
		margin: 0;
		.menu {
			position: relative;
			width: $navSize;
			overflow: auto;
		}
  }
  .page {
		position: relative;
    margin: 0;
		@include roundEven($space/4);
		#home {
			width: (980px)-$navSize;
			float: right;
		}
	}
}

.dontMove {
	display: block;
	position: fixed;
}
              
            
!

JS

              
                
              
            
!
999px

Console