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

            
              .container
  .man
    .hat
    .head
      .face
      .eyebrows
      .mask
        .left-eye
        .right-eye
      .mouth
    .body
      .hand
        .phone
  .mountain
  %ul.clouds
    %li.cloud
    %li.cloud
    %li.cloud
    %li.cloud
    %li.cloud
    %li.cloud
    %li.cloud
    %li.cloud
            
          
!
            
              $dark: #1B1B1B
$light: #EBE9D1

@function getdelay($left, $time, $size)
	@return -1 * ($left+125)*$time/($size+125) + s

*
	padding: 0
	margin: 0
	&,
	&::before,
	&::after
		box-sizing: border-box


html, body
	min-width: 380px
	width: 100%
	height: 100%
	background: $light
	display: flex
	justify-content: center
	align-items: center

.container
	position: relative
	width: 350px
	height: 350px
	background: #EF556B
	border-radius: 100%
	overflow: hidden
	z-index: 0
	-webkit-clip-path: circle(50% at 50% 50%)

.man
	position: relative
	z-index: 10
	.hat
		position: relative
		margin: 60px auto 22px
		width: 145px
		height: 57px
		border-bottom: 2px solid $light
		&::before
			content: ''
			position: absolute
			width: 100%
			height: 65px
			border-radius: 50% 50% 0 0 / 100% 100% 0 0
			background: $dark
			z-index: -1
		&::after
			content: ''
			position: absolute
			top: 103%
			width: 110%
			height: 22px
			margin-left: -5%
			background: $dark
			z-index: 2

	.head
		position: relative
		margin: -1px auto 0
		width: 154px
		height: 125px
		overflow: hidden
		z-index: 1

	.face
		position: absolute
		margin: -8.5% 0 0 -5%
		width: 110%
		height: 110%
		z-index: -1
		border-radius: 0 0 100% 100%
		overflow: hidden
		&::after
			content: ''
			display: block
			width: 100%
			height: 100%
			background: $light
			box-shadow: inset -85px 0 0 rgba(0,0,0,0.05)


	.eyebrows
		position: relative
		width: 100%
		height: 22px
		text-align: center
		&::before,
		&::after
			content: ''
			display: inline-block
			width: 45px
			height: 5px
			background: $dark
			transform: rotate(4deg)
			margin: 11px 2px 0 0
			animation: movelefteyebrow 8s ease-out 2s infinite
		&::after
			margin-left: 25px
			margin-right: 0
			transform: rotate(-4deg)
			animation: moverighteyebrow 8s ease-out 2s infinite

	.mask
		position: relative
		margin: 0 auto
		width: 100%
		height: 45px
		text-align: center
		background: $dark
		&::after
			content: ''
			display: block
			margin-left: auto
			width: 100%
			height: 100%
			box-shadow: inset -78px 0 0 0 rgba(0,0,0,1)

		.left-eye,
		.right-eye
			position: absolute
			top: 14px
			left: 19px
			width: 42px
			height: 20px
			border-radius: 0 0 50px 50px
			background: white
			transform: rotate(6deg)
			animation: movelefteye 8s ease-out 2s infinite
			&::after
				content: ''
				position: absolute
				top: 12px
				left: 19px
				width: 6px
				height: 6px
				background: $dark
				border-radius: 100%
				animation: moveleftinnereye 8s ease-out 2s infinite

		.right-eye
			left: initial
			right: 20px
			transform: rotate(-4deg)
			animation: moverighteye 8s ease-out 2s infinite
			&::after
				left: 16px
				animation: moverightinnereye 8s ease-out 2s infinite

	.mouth
		width: 28px
		height: 4px
		margin: 11px auto 0
		background: $dark
		&::after
			content: ''
			display: block
			position: relative
			top: 10px
			width: 40%
			height: 2px
			margin: auto
			background: rgba($dark, 0.05)

	.body
		position: relative
		width: 154px
		height: 145px
		margin: -50px auto 0
		background: $dark
		z-index: 0

		.hand
			position: absolute
			top: 65%
			left: -15%
			width: 65px
			height: 50px
			background: $light
			border-radius: 100%

			.phone
				position: relative
				width: 50px
				height: 100px
				background: #fff
				border-radius: 5px
				top: -40px
				left: 35px
				z-index: -10
				&::before
					content: ''
					position: absolute
					top: -7px
					left: -7px
					border: 30px solid #eee
					border-left: 30px solid transparent
					border-radius: 30px
					transform: scale(0.25)
				&::after
					content: ''
					position: absolute
					top: 30%
					left: 50%
					width: 5px
					height: 5px
					background: rgba(255, 255, 255, .08)
					border-radius: 100%
					transform: translate3d(-50%, 0, 0)
					box-shadow: 0 0 10px 0 rgba(255,255,255,0.2)
					animation: bright 1.5s linear infinite
					z-index: 10

.mountain
	position: absolute
	top: 46.4%
	right: -14%
	width: 350px
	height: 250px
	border-radius: 155% 60% 0 0
	background: #DF4459
	z-index: -1

.cloud
	position: absolute
	height: 23px
	background: rgba(255,255,255, 0.25)
	border-radius: 20px
	list-style-type: none
	animation: moveleft 30s linear infinite
	&:nth-child(1)
		top: 18px
		left: 161px
		width: 12px
		height: 12px
		animation-delay: getdelay(161, 30, 350)
	&:nth-child(2)
		top: 12px
		left: 180px
		width: 150px
		animation-delay: getdelay(180, 30, 350)
	&:nth-child(3)
		top: 46px
		left: 5px
		width: 100px
		animation-delay: getdelay(5, 30, 350)
	&:nth-child(4)
		top: 46px
		left: 114px
		width: 35px
		animation-delay: getdelay(114, 30, 350)
	&:nth-child(5)
		top: 84px
		left: 185px
		width: 70px
		animation-delay: getdelay(185, 30, 350)
	&:nth-child(6)
		top: 118px
		left: 298px
		width: 115px
		animation-delay: getdelay(298, 30, 350)
	&:nth-child(7)
		top: 126px
		left: 0px
		width: 35px
		animation-delay: getdelay(0, 30, 350)
	&:nth-child(8)
		top: 188px
		left: 20px
		width: 125px
		animation-delay: getdelay(20, 30, 350)


@keyframes moveleft
	0%
		left: -125px
	100%
		left: 100%

@keyframes bright
	0%
		box-shadow: 0 0 0 15px rgba(255,255,255,0.15),  0 0 0 30px rgba(255,255,255,0.15),  0 0 0 45px rgba(255,255,255,0.15)
	100%
		box-shadow: 0 0 0 30px rgba(255,255,255,0.15),  0 0 0 45px rgba(255,255,255,0.15),  0 0 0 60px rgba(255,255,255,0)

@keyframes movelefteyebrow
	15%, 80%
		transform: rotate(4deg)
	18%, 77%
		transform: rotate(10deg) translate3d(4px, 0, 0)

@keyframes moverighteyebrow
	15%, 80%
		transform: rotate(-4deg)
	18%, 77%
		transform: rotate(-10deg) translate3d(-4px, 0, 0)

@keyframes movelefteye
	15%, 80%
		transform: rotate(6deg)
	18%, 77%
		transform: rotate(15deg)

@keyframes moverighteye
	15%, 80%
		transform: rotate(-4deg)
	18%, 77%
		transform: rotate(-15deg)

@keyframes moveleftinnereye
	15%, 80%
		left: 19px
	18%, 77%
		left: 22px

@keyframes moverightinnereye
	15%, 80%
		left: 16px
	18%, 77%
		left: 13px
            
          
!
            
              /**
Pure CSS. Based on this ilustration https://www.instagram.com/p/BXp48XajhrX/
**/
            
          
!
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.
Loading ..................

Console