cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="parallax">
	<input type="checkbox" id="menu-toggle" class="hidden">
	<label for="menu-toggle">
		<span class="glyphicon"></span>
	</label>
	<div class="menu">
		<h2>Dashboard</h2>
		<ul>
			<li>FILTERS</li>
			<li><a href="javascript:void(0)" class="active">Reports</a></li>
			<li><a href="javascript:void(0)">Documents</a></li>
			<li><a href="javascript:void(0)">Reviews</a></li>
			<li><a href="javascript:void(0)">Messages</a></li>
		</ul>
	</div><!--/.menu-->
	<div class="content">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h1>Consectetur adipiscing</h1>
					<hr>
				</div><!--/.col-md-12-->
				<div class="col-sm-4">
					<img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?q=80&fm=jpg&s=13c892f6ad31fb47e453970580ad28e1" class="img-responsive">
					<h4>Lorem ipsum dolor</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit id orci eget vulputate. Duis quam quam, molestie ac rhoncus vel, convallis at libero.</p>
				</div><!--/.col-sm-4-->
				<div class="col-sm-4">
					<img src="https://picjumbo.imgix.net/IMG_6640.jpg?q=40&w=3000&sharp=40" class="img-responsive">
					<h4>Cras suscipit id</h4>
					<p>Consectetur adipiscing elit. Cras suscipit id orci eget vulputate. Etiam in libero sed magna fermentum condimentum. Duis at nibh vel lectus ullamcorper fermentum. Maecenas congue sem vitae magna posuere ullamcorper.</p>
				</div><!--/.col-sm-4-->
				<div class="col-sm-4">
					<img src="https://images.unsplash.com/uploads/1413259835094dcdeb9d3/6e609595?q=80&fm=jpg&s=34df8de331cae7450247b04ed37d9ede" class="img-responsive">
					<h4>Etiam in libero</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit id orci eget vulputate. Etiam in libero sed magna fermentum condimentum.</p>
				</div><!--/.col-sm-4-->
			</div><!--/.row-->
			<h5><a href="http://www.codepen.io/brycesnyder" target="_blank">CHECK OUT MY OTHER PENS</a></h5>
		</div><!--/.container-->
	</div><!--/.content-->
</div><!--/.parallax-->
            
          
!
            
              transitions(x, y, z)
	-webkit-transition x y z
	transition x y z

.parallax
	input[type="checkbox"]
		&:checked
			~
				label
					span
						&::after
							content "\e236"
							color inherit
							transitions(all, .25s, ease-in-out)
				.menu
					left -25%
				.content
					.container
						margin-left 0
	label
		position absolute
		top 20px
		right 20px
		left inherit
		z-index 999
		span
			&::after
				transitions(all, .25s, ease-in-out)
				content "\e014"
				font-size 30px
				cursor pointer
				color #DA4453
	.menu
		position absolute
		top 0
		left 0
		width 25%
		height 100%
		background #25262D
		z-index 9
		transitions(all, .5s, ease-in-out)
		h2
			color white
			font-weight lighter
			margin-left 20px
		ul
			list-style-type none
			padding 0
			li
				position relative
				&:first-child
					margin-left 20px
					color #555
					padding 10px 0
					font-size 10px
				a
					display block
					width 100%
					color white
					font-weight lighter
					padding 5px 20px
					&.active
						background #1E2025
						&::before
							content ""
							position absolute
							left 0
							top 0
							height 100%
							width 5px
							background #5C9DF5
	.content
		.container
			width initial
			margin-left 25%
			transitions(all, .5s, ease-in-out)
			h1
				font-weight normal
				margin-bottom 30px
			h4
				font-weight normal
				margin 15px 0
			p
				font-weight lighter
				text-align justify
				
@media (max-width 767px)
	input[type="checkbox"]
		&:checked
			~
				.menu
					left -100% !important
				label
					span
						color inherit
						transitions(all, .5s, ease-in-out)
	label
		span
			color white
			transitions(all, .5s, ease-in-out)
	.menu
		width 100% !important
		
		
h5
	a
		color white
		position fixed
		background #3BAFDA
		font-weight normal
		width 100%
		margin 0
		padding 10px 25px
		bottom 0
		left 0
		z-index 999
		&:hover
			color white
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console