Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

+ 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.

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

              
                .container
	.pricing
		%h1.header Starter
		%section.content
			%h2.price 19
			%ul.features
				%li 10GB disk space
				%li 20GB monthly bandwidth
				%li 5 email accounts
				%li Unlimited subdomains
		%div.button.select
	.pricing.spotlight
		%h1.header Pro
		%section.content
			%h2.price 39
			%ul.features
				%li 64GB disk space
				%li 50GB monthly bandwidth
				%li 15 email accounts
				%li Unlimited subdomains
		%div.button.select
	.pricing
		%h1.header Premium
		%section.content
			%h2.price 89
			%ul.features
				%li 128GB disk space
				%li 100GB monthly bandwidth
				%li 50 email accounts
				%li Unlimited subdomains
		%div.button.select
              
            
!

CSS

              
                @import 'nib'

$ACCENT 			= #FFA400
$ACCENT_DARK 	= spin(darken($ACCENT, 15%), -10deg)

$GREY 				= #34495e
$DARK_GREY 		= #2c3e50

$WHITE				= #F2F2F8
	
html, body
	display block
	position relative
	top 0
	left 0
	width 100%
	height 100%
	padding 0
	margin 0
	overflow hidden
	
body
	display flex
	justify-content center
	align-items center
	background $GREY
	
*
	box-sizing border-box
	
.container
	display flex
	position relative
	border-radius 10px
	box-shadow 0 0 50px rgba(0, 0, 0, .2),
						 0 0 25px rgba(0, 0, 0, .2)
	&::before
		content ''
		display block
		position absolute
		bottom 0
		left 0
		width 100%
		height calc(100% - 5.75em)
		background $WHITE
		border-radius 10px
		border-top-left-radius 0
		border-top-right-radius 0
		z-index -1
	&>.pricing
		display flex
		flex-direction column
		justify-content space-between
		align-items center
		position relative
		font-family 'Lato', Verdana, sans-serif
		width 20em
		height 30em
		padding-bottom 2em
		background $WHITE
		z-index 100
		overflow hidden
		transform rotateZ(360deg) scale(1)
		transition transform .2s, border-radius .2s, box-shadow .2s, z-index .2s
		will-change transform, border-radius
		&:first-child
			border-radius 10px
			border-top-right-radius 0
			border-bottom-right-radius 0
		&:last-child
			border-radius 10px
			border-top-left-radius 0
			border-bottom-left-radius 0
		&.spotlight
			transform rotateZ(360deg) scale(1.2)
			z-index 200
			border none
			border-radius 10px
			box-shadow 0 0 50px rgba(0, 0, 0, .2),
						 		 0 0 25px rgba(0, 0, 0, .2)
		&>h1.header
			margin 0
			width 100%
			color $WHITE
			text-align center
			padding-top .75em
			padding-bottom .75em
			background linear-gradient(top, $ACCENT, $ACCENT_DARK)
			font-size 2.2em
			&::selection
				background transparent
				color darken($ACCENT_DARK, 40%)
			&::-moz-selection
				background transparent
				color darken($ACCENT_DARK, 40%)
		&>section.content
			display flex
			flex-direction column
			justify-content space-between
			align-items center
			position relative
			color #282828
			width 100%
			padding .5em 0
			flex-grow 1
			&>h2.price
				font-size 2em
				margin 0
				padding-top .25em
				&::selection
					background $ACCENT
					color $WHITE
				&::-moz-selection
					background $ACCENT
					color $WHITE
				&::before
					content '$'
					font-size .9em
					font-weight 300
				&::after
					content '/mo'
					font-weight 300
					font-size .9em
			&>ul
				display flex
				flex-direction column
				justify-content space-around
				align-items center
				flex-grow 1
				padding 0
				list-style none
				&>li
					display inline-flex
					justify-content center
					align-items center
					width 100%
					flex-grow 1
					&:not(:last-child)
						border-bottom 1px solid darken(#ecf0f1, 5%)
					&::selection
						background $ACCENT
						color $WHITE
					&::-moz-selection
						background $ACCENT
						color $WHITE
		&>.button.select
			display block
			position relative
			height 2.6em
			width 50%
			border-radius 2.6em / 2.6em
			border none
			overflow hidden
			cursor pointer
			&::before
				content ''
				display block
				position absolute
				box-sizing border-box
				top 0
				left 0
				width 100%
				height 100%
				background $WHITE
				opacity .6
				transform-origin left
				transform skewX(-10deg) scaleX(0) translateX(0)
				border 5px solid transparent
				pointer-events none
				transition transform 0s
				z-index 200
			&:hover
				&::before
					transform skewX(-10deg) scaleX(1) translateX(100%)
					transition transform .3s
			&::after
				content 'Choose plan'
				display flex
				justify-content center
				align-items center
				position relative
				font-size 1.1em
				border none
				color $WHITE
				background linear-gradient(top, $GREY, $DARK_GREY)
				height 100%
				padding 0 1em
				outline none
				cursor pointer
				-webkit-touch-callout none
				-webkit-user-select none
				-moz-user-select none
				-ms-user-select none
				user-select none
				z-index 100
			&:active::after
				background linear-gradient(top, $DARK_GREY, $GREY)
				
.pricing.spotlight
	&>div.button.select
		&::after
			content 'Selected plan'
			background linear-gradient(top, $ACCENT, $ACCENT_DARK)
		&:active::after
			background linear-gradient(top, $ACCENT_DARK, $ACCENT)
              
            
!

JS

              
                buttons 	= document.querySelectorAll 'div.button.select'
pricings	= document.getElementsByClassName 'pricing'

console.log buttons

for button in buttons
	button.addEventListener('click', (e) ->
		for pricing in pricings
			pricing.classList.remove 'spotlight'
		e.target
			.parentNode
			.classList.add 'spotlight'
	)
              
            
!
999px

Console