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

            
              
// Custom Jade Code Here
.container
	.check
		input(id="check" type="checkbox")
		label(for="check")
			.box
				i.fa.fa-check
		
	.check
		input(id="check1" type="checkbox")
		label(for="check1")
			.box
				i.fa.fa-check
		
	.check
		input(id="check2" type="checkbox")
		label(for="check2")
			.box
				i.fa.fa-check
		
	.check
		input(id="check3" type="checkbox")
		label(for="check3")
			.box
				i.fa.fa-check
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Poiret+One'

body
	background: #123456
	display: flex
	justify-content: center
	flex-direction: column
	align-items: center
	font-family: 'Poiret One', cursive
	color: #fff
	font-size: 100%
	height: 100vh

/* Custom Code Here */
.container
	
	
	.check
		input
			display: none
	
			&:checked + label
				.box
					animation: animOn 0.8s 1 forwards
					background: rgba(#000, 0.5)
		
					i
						transform: translate(-50%, -50%) scale(1)
						transition-duration: 250ms
						opacity: 1
	
		label
			min-width: 100px
			display: flex
			justify-content: center
			align-items: center
			flex-direction: row
			min-height: 60px
			cursor: pointer
			
			.box
				background: rgba(#000, 0.3)
				border-radius: 5px
				position: relative
				width: 50px
				height: 50px
				transition: background 300ms ease
		
				&:hover 
					background: rgba(#000, 0.5)
				
				i
					position: absolute
					top: 50%
					left: 50%
					font-size: 20px
					display: inline-block
					opacity: 0
					pointer-events: none
					transition: all 0.2s ease-in-out
					transition-delay: 200ms
					transform: translate(-50%, -50%) scale(6)
				

@keyframes animOn
	40%
		height: 20px
		width: 100px

	50%
		height: 60px
		width: 30px

	60%
		height: 40px
		width: 70px

	70%
		height: 55px
		width: 45px

	100%
		height: 50px
		width: 50px

/* end of custom code */

            
          
!
            
              $(document).ready(function(){
	console.log('ready!')
	// Custom jQuery Functions Here
})
            
          
!
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