123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              .title
	h1 Cat
	ul.socials
		li
			a(href="https://ivanodintsov.ru", target="_blank")
				img(src="https://maxcdn.icons8.com/Android_L/PNG/24/Messaging/link-24.png", alt="Twitter icon")
		li
			a(href="https://twitter.com/odintsov_design", target="_blank")
				img(src="https://img.icons8.com/color/48/000000/twitter.png", alt="Twitter icon")

.container
	.artboard
		.window
			.window__outside.outside
				.outside__moon
				.outside__clouds.cloud
					.cloud__one
					.cloud__two
					.cloud__three
					.cloud__four
					.cloud__five
				.outside__trees.trees
					.trees__one
					.trees__two
					.trees__three
					.trees__four
					.trees__five
				.outside__stars.stars
					.star.stars__one
					.star.stars__two
					.star.stars__three
					.star.stars__four
					.star.stars__five
					.star.stars__six
					.star.stars__seven
					.star.stars__eight
					.star.stars__nine
					.star.stars__ten
					.star.stars__eleven
					.star.stars__twelve
					.star.star__thirteen
					.star.star__fourteen
					.star.star__fifteen
			.window__glass.window__glass-one
			.window__glass.window__glass-two
			.cat
				.cat__head
					.cat__eyes
						.cat__eye.cat__eye-left
						.cat__eye.cat__eye-right
					.cat__ears
						.cat__ear.cat__ear-left
						.cat__ear.cat__ear-right
				.cat__body
				.cat__tail
					.line-one
						.line-one
							.line-one
								.line-one
									.line-one
										.line-one
											.line-one
												.line-one
													.line-one
														.line-one
															.line-two
																.line-two
																	.line-two
																		.line-two
																			.line-two
																				.line-two
																					.line-two
																						.line-two
																							.line-two
																								.line-two
																									.line-two
																										.line-two
																											.line-two
			.window__sill.sill
				.sill__one


.credits.
	Created with <span class="love"></span> by <a href="https://codepen.io/ivanodintsov">Ivan Odintsov</a>  &nbsp;&nbsp;&middot;&nbsp;&nbsp;	Original by <a href="https://dribbble.com/shots/1848905-Cat-Antics">Motion Authors</a>
            
          
!
            
              // Colors
$gray: #f4f4f4
$pink: #e66
$red: #c9533e
$brown: #2d2623
$blue: #29467a
$light-blue: #439abf
$light-blue-two: #386071
$yellow: #e8ae4a
$dark-blue: #22366d

$anim-time: 10s

// Template styles
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600)

a
	font-weight: 600
	color: #91a7ff
	text-decoration: none
	
	&:hover
		color: #5c7cfa
		text-decoration: underline

html,
body
	font-family: 'Open Sans'

body
	background-color: #f8f9fa
	color: #adb5bd

.title
	text-align: center
	
	h1
		font-size: 1.5em
		margin: 100px 0 10px 0
	
.socials
	display: block
	font-size: 14px
	margin: 0
	padding: 0

	li
		display: inline

		&:not(:last-child)
			margin-right: .75em

		a
			vertical-align: middle
	
			&:hover
				img
					animation: link .5s

			img
				width: 1.3em

.credits
	font-size: .8em
	text-align: center

.love
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/heart-smil.svg)
	display: inline-block
	height: 16px
	vertical-align: middle
	width: 16px

@keyframes link
	25%
		transform: rotate(10deg)
	50%
		transform: rotate(-10deg)

.container
	background-color: $red
	border-radius: 4px
	box-shadow: 0 1px 3px #dee2e6
	height: 300px
	margin: 40px auto 50px auto
	position: relative
	width: 450px

.artboard
	height: 100%
	overflow: hidden
	position: relative
	width: 100%
	
.window
	height: 185px
	margin: 58px auto
	position: relative
	width: 136px

	&__glass
		border: 8px solid $brown
		box-shadow: inset 1px -1px $light-blue-two, inset -1px 0px $light-blue-two, inset 3px -3px $light-blue,	inset -3px 0px $light-blue
		height: 84px
		margin: auto
		position: relative
		width: 106px
		z-index: 2
		
		&-one
			border-bottom: 3px solid $brown
		
		&-two
			border-bottom: 0
			border-top: 3px solid $brown

.sill
	position: relative
	z-index: 2

	&__one
		background: $light-blue
		border-bottom: 6px solid $brown
		box-shadow: inset 10px 0 $blue, inset -10px 0 $blue
		height: 3px
		position: relative
		top: -3px
		width: 100%

.outside
	background: $blue
	height: 100%
	left: 0
	margin: auto
	position: absolute
	right: 0
	width: 120px
	z-index: 1
	
	&__moon
		border-radius: 50%
		box-shadow: inset 4px -4px 0 0 $yellow
		height: 24px
		left: 22px
		position: relative
		top: 20px
		transform: rotate(50deg)
		width: 24px
	
	&__clouds

.cloud
	left: 18px
	position: relative
	top: 15px
	width: 80px
	
	&__one
		background: $dark-blue
		border-radius: 15px
		height: 6px
		width: 80px
	
	&__two
		background: $dark-blue
		border-radius: 15px
		height: 6px
		position: absolute
		right: 12px
		top: -12px
		width: 26px
	
	&__three
		background: $dark-blue
		border-radius: 15px
		height: 6px
		position: absolute
		left: 16px
		top: 12px
		width: 42px
	
	&__four
		background: $dark-blue
		height: 6px
		position: absolute
		right: 18px
		top: -6px
		width: 10px
		
		&:before,
		&:after
			border-radius: 15px
			content: ''
			display: block
			height: 6px
			position: absolute
			width: 6px
		
		&:before
			box-shadow: inset 2px 0 0 0 $dark-blue
			right: -4px
	
		&:after
			box-shadow: inset -2px 0 0 0 $dark-blue
			left: -4px
	
	&__five
		background: $dark-blue
		height: 6px
		position: absolute
		left: 24px
		top: 6px
		width: 15px
		
		&:before,
		&:after
			border-radius: 15px
			content: ''
			display: block
			height: 6px
			position: absolute
			width: 6px
		
		&:before
			box-shadow: inset 2px 0 0 0 $dark-blue
			right: -4px
	
		&:after
			box-shadow: inset -2px 0 0 0 $dark-blue
			left: -4px

.trees
	&__one,		
	&__two,		
	&__three,
	&__four,
	&__five
		border-bottom: 35px solid $dark-blue
		border-left: 15px solid transparent
		border-right: 15px solid transparent
		bottom: 0
		height: 0
		position: absolute
		width: 0
	
	&__one
		left: -5px
	&__two
		left: 6px
	&__three
		left: 17px
	&__four
		right: -5px
	&__five
		right: 6px

.star
	background: $yellow
	border-radius: 50%
	transform: rotate(45deg)
	position: absolute

.stars
	
	&__one
		height: 3px
		width: 3px
		left: 40px
		top: 30px
	&__two
		height: 1px
		width: 1px
		left: 50px
		top: 20px
	&__three
		animation: star $anim-time/2 5s infinite ease-in-out
		height: 2px
		width: 2px
		left: 55px
		top: 23px
	&__four
		animation: star $anim-time/2 4s infinite ease-in-out
		height: 5px
		width: 5px
		left: 60px
		top: 110px
	&__five
		height: 1px
		width: 1px
		right: 25px
		top: 22px
	&__six
		animation: starTwo $anim-time/2 3s infinite ease-in-out
		height: 1px
		width: 1px
		right: 30px
		top: 55px
	&__seven
		animation: starTwo $anim-time/2 5s infinite ease-in-out
		height: 1px
		width: 1px
		right: 20px
		top: 70px
	&__eight
		animation: starTwo $anim-time/2 6s infinite ease-in-out
		height: 1px
		width: 1px
		left: 25px
		top: 65px
	&__nine
		height: 1px
		width: 1px
		left: 35px
		top: 75px
	&__ten
		height: 3px
		width: 3px
		left: 60px
		top: 68px
	&__eleven
		height: 3px
		width: 3px
		left: 28px
		top: 105px
	&__twelve
		animation: starTwo $anim-time/2 5.5s infinite ease-in-out
		height: 1px
		width: 1px
		left: 22px
		top: 130px
	&__thirteen
		height: 1px
		width: 1px
		right: 25px
		top: 110px
	&__fourteen
		animation: starTwo $anim-time/2 4.5s infinite ease-in-out
		height: 1px
		width: 1px
		right: 20px
		top: 118px
	&__fifteen
		height: 1px
		width: 1px
		left: 70px
		top: 125px

.cat
	position: absolute
	bottom: 0
	left: 60px
	z-index: 3

	&__head
		animation: head $anim-time infinite
		background: $brown
		border-radius: 10px 10px 0 0
		height: 20px
		position: relative
		transition: transform .5s
		width: 22px
		z-index: 2
	
	&__eye
		background: $light-blue
		border-radius: 3px
		height: 4px
		left: 0
		width: 4px
		position: absolute
		top: 7px
		
		&s
			position: absolute
			z-index: 1
	
		&-left
			animation: eye-left $anim-time infinite
		
		&-right
			animation: eye-right $anim-time infinite

	&__ear
		&s
			position: absolute
			top: -5px
			width: 100%
		
		&-left
			animation: ear-left $anim-time infinite
			border-bottom: 12px solid $brown
			border-right: 15px solid transparent
			height: 0
			position: absolute
			top: 0
			transition: transform .5s
			width: 0
		
		&-right
			animation: ear-right $anim-time infinite
			border-bottom: 12px solid $brown
			border-left: 15px solid transparent
			border-bottom-left-radius: 15px
			height: 0
			position: absolute
			right: 0
			top: 0
			transition: transform .5s
			width: 0
		
	
	&__body
		animation: body $anim-time infinite
		background: $brown
		border-radius: 0px 20px 10px 0
		height: 35px
		position: relative
		width: 35px
		
		&:before
			animation: body-two $anim-time infinite
			background: $brown
			bottom: 0
			content: ''
			display: block
			height: 100%
			position: absolute
			width: 50%
	
	&__tail
		animation: tail $anim-time infinite ease-in-out
		bottom: 0
		right: 0
		position: absolute
		.line
			&-one,
			&-two
				background-color: $brown
				border-radius: 100%
				height: 5px
				transform-origin: center right
				width: 5px
		
			&-one
				animation: tail-one $anim-time infinite ease-in-out
	
			&-two
				animation: tail-two $anim-time infinite ease-in-out

@keyframes tail
	5%
		transform: translate(-20px, 0)
	40%
		transform: translate(-20px, 0)
	50%
		transform: translate(-5px, 0)
	100%
		transform: translate(-5px, 0)

@keyframes tail-one
	0%
		transform: translate(0, 2px)
	5%
		transform: translate(2px, 0)
	40%
		transform: translate(2px, 0)
	50%
		transform: translate(0, 1px)
	100%
		transform: translate(0, 1px)

@keyframes tail-two
	0%
		transform: translate(0, 2px) rotate(0)
	5%
		transform: translate(3px, 1px) rotate(15deg)
	30%
		transform: translate(3px, 1px) rotate(15deg)
	40%
		transform: translate(3px, 1px) rotate(-5deg)
	50%
		transform: translate(0, 4px) rotate(15deg)
	60%
		transform: translate(0, 3px) rotate(-15deg)
	70%
		transform: translate(0, 4px) rotate(15deg)
	80%
		transform: translate(0, 3px) rotate(-15deg)
	85%
		transform: translate(0, 3px) rotate(5deg)
	90%
		transform: translate(0, 3px) rotate(-2.5deg)
	95%
		transform: translate(0, 3px) rotate(1deg)
	100%
		transform: translate(0, 3px) rotate(0)
	
@keyframes star
	7.5%
		border-radius: 0
		transform: rotate(45deg) scale(1.5)
	15%
		border-radius: 50%
		transform: rotate(45deg) scale(1)

@keyframes starTwo
	7.5%
		border-radius: 0
		transform: rotate(45deg) scale(2)
	15%
		border-radius: 50%
		transform: rotate(45deg) scale(1)
		

@keyframes body
	5%
		border-radius: 15px 20px 10px 0
	30%
		border-radius: 15px 20px 10px 0
	35%
		border-radius: 0 20px 10px 0

@keyframes body-two
	5%
		height: 50%
		transform: translateX(-4px)
	30%
		height: 50%
		transform: translateX(-4px)
	35%
		height: 100%
		transform: translateX(0)

@keyframes eye-left
	0%
		transform: rotateY(0) translateX(2px)
	30%
		transform: rotateY(0) translateX(2px)
	35%
		transform: rotateY(90deg) translateX(-4px)
	75%
		transform: rotateY(90deg) translateX(-4px)
	80%
		transform: rotateY(0) translateX(2px)
	100%
		transform: rotateY(0) translateX(2px)

@keyframes eye-right
	0%
		transform: rotateY(0) translateX(10px)
	30%
		transform: rotateY(0) translateX(10px)
	35%
		transform: rotateY(90deg) translateX(-4px)
	75%
		transform: rotateY(90deg) translateX(-4px)
	80%
		transform: rotateY(0) translateX(10px)
	100%
		transform: rotateY(0) translateX(10px)

@keyframes ear-left
	0%
		transform: scaleX(-1) translateX(-6px)
	30%
		transform: scaleX(-1) translateX(-6px)
	35%
		transform: scaleX(1) translateX(0)
	75%
		transform: scaleX(1) translateX(0)
	80%
		transform: scaleX(-1) translateX(-6px)
	100%
		transform: scaleX(-1) translateX(-6px)

@keyframes ear-right
	0%
		transform: translate(-9px, 1px)
	30%
		transform: translate(-9px, 1px)
	35%
		transform: translate(0, 0)
	75%
		transform: translate(0, 0)
	80%
		transform: translate(-9px, 1px)
	100%
		transform: translate(-9px, 1px)

@keyframes head
	5%
		transform: translate(-4px, 20px)
	30%
		transform: translate(-4px, 20px)
	35%
		transform: translate(0, 0)

@keyframes link
	25%
		transform: rotate(10deg)
	50%
		transform: rotate(-10deg)
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console