CodePen Embed - 408 Pizza delivery!

<div class="door"></div>

<div class="wall">
	<div class="number">408</div>
	<div class="bell">
		<div class="label">Mr. Server</div>
	</div>
</div>

<div class="mrserver">
	<div class="head">
		<div class="jaw"></div>
		<div class="spine">
			<div class="rib-left"></div>
			<div class="rib-right"></div>
		</div>
		<div class="arm-left"></div>
		<div class="arm-right"></div>
		<div class="leg-left"></div>
		<div class="leg-right"></div>
	</div>
</div>

<div class="delivery-guy">
	<div class="hands hand--left">
		<div class="smartphone">
			<span>boss</span>
			<p class="msg-1">too late again?</p>
			<p class="msg-2">you're fired!!</p>
		</div>
	</div>
	<div class="hands hand--right"></div>
	<div class="pizza-box">
		<h1>Juicy Request</h1>
		<h2>Pizza's</h2>
		<span>Best Pizza in town! &nbsp;--&nbsp; Call us: 12 70 01</span>
		
		<div class="sticky">Mr. Server - Codepen Ave. 408</div>
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

$floor: #e8CCa6;
$wall: #4ba193;
$metal: #d4d4e5;
$box: #e0dad1;
$typo: #d83838;
$sticky: #fcc75c;

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

*::selection {
	background: rgba(0,0,0,.8);
	color: $typo;
}

html, body {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

body {
	background: $floor;
	box-shadow: inset 0 calc(50vh - 100px) 0 0 darken($floor, 10),
		inset 0 -200px 0 0 darken($metal, 10);
	-webkit-perspective: 1200;
}

.door {
	position: absolute;
	left: calc(50vw - 400px);
	top: 0;
	height: calc(100vh - 200px);
	width: 800px;
	background: darken($wall, 20);
	z-index: 3;
	box-shadow: inset 20px 0 0 0 darken($wall, 30),
		inset -20px 0 0 0 darken($wall, 30),
		inset 0 20px 0 0 darken($wall, 30);
	transform: skew;
	transform-origin: left center;
	transition: 1s ease;
	
	&:before {
		content: '';
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 20%;
		width: 20px;
		height: 20px;
		background: #fff;
		border-radius: 50%;
		box-shadow: inset 0 0 0 2px $sticky;
	}
	
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		right: 50px;
		width: 80px;
		height: 20px;
		background: darken($wall, 40);
		border-radius: 10px;
	}
	
	&.open {
		transform: rotateY(-80deg);
	}
}

.wall {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vh - 200px);
	background: rgba(0,0,0,.2);
	z-index: 2;
	box-shadow: inset calc((100vw / 2) - 400px) 0 0 0 $wall,
							inset calc(((100vw / 2) - 400px) * -1) 0 0 0 $wall;
	
	&:before, &:after {
		content: '';
		position: absolute;
		bottom: -10px;
		width: calc((100vw / 2) - 400px);
		height: 20px;
		background: darken($wall, 20);
	}
	
	&:before {
		left: 0;
	}
	
	&:after {
		right: 0;
	}
	
	.number {
		position: absolute;
		right: calc((100vw / 2) - 560px);
		bottom: 250px;
		color: darken($wall, 30);
		font-size: 80px;
		font-weight: 900;
		user-select: none;
	}
	
	.bell {
		position: absolute;
		right: calc((100vw / 2) - 580px);
		bottom: 100px;
		width: 100px;
		height: 120px;
		background: darken($metal, 10);
		padding: 10px;
		
		&:before, &:after {
			content: '';
			position: absolute;
			margin: auto;
		}
		
		&:before {
			display: block;
			width: calc(100% - 20px);
			height: 40px;
			background: $metal;
			bottom: 10px;
			left: 0;
			right: 0;
		}
		
		&:after {
			width: calc(100% - 20px);
			height: 2px;
			background: darken($metal, 20);
			left: 0;
			right: 0;
			bottom: 10px;
			box-shadow: 0 -4px 0 0 darken($metal, 20),
				0 -8px 0 0 darken($metal, 20),
				0 -12px 0 0 darken($metal, 20),
				0 -16px 0 0 darken($metal, 20),
				0 -20px 0 0 darken($metal, 20),
				0 -24px 0 0 darken($metal, 20),
				0 -28px 0 0 darken($metal, 20),
				0 -32px 0 0 darken($metal, 20),
				0 -36px 0 0 darken($metal, 20);
		}
		
		.label {
			position: relative;
			background: lighten($metal, 5);
			padding: 4px;
			font-size: 14px;
			font-weight: 600;
			color: darken($metal, 35);
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			
			&:before {
				content: '';
				position: absolute;
				margin: auto;
				left: 0;
				right: 0;
				top: calc(100% + 10px);
				width: 30px;
				height: 16px;
				background: darken($metal, 20);
				box-shadow: inset 0 -14px 0 0 darken($metal, 30);
			}
		}
	}
}

.mrserver {
	position: absolute;
	left: calc(50% - 120px);
	// bottom: 300px;
	top: calc(50vh - 110px);
	transform: translateX(-50%) rotate(-80deg);
	z-index: 1;
	
	.head {
		position: relative;
		width: 80px;
		height: 80px;
		background: #fff;
		border-radius: 50%;
		
		&:before {
			content: '';
			position: absolute;
			right: 8px;
			top: 50%;
			width: 20px;
			height: 20px;
			background: #000;
			border-radius: 50%;
			z-index: 1;
		}
		
		&:after {
			content: '';
			position: absolute;
			width: 6px;
			height: 10px;
			background: #000;
			right: 0;
			top: calc(50% + 20px);
			border-top-left-radius: 150%;
			border-bottom-left-radius: 10px;
			border-top-right-radius: 50%;
		}
		
		.jaw {
			position: absolute;
			width: 40px;
			height: 50px;
			background: #fff;
			right: 0;
			top: 50%;
			border-bottom-left-radius: 50%;
			border-bottom-right-radius: 6px;
			overflow: hidden;
			
			&:before {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				width: 8px;
				height: 8px;
				background: darken(#fff, 15);
				border-top-left-radius: 50%;
				border-top-right-radius: 50%;
				box-shadow: -9px 0 0 0 darken(#fff, 15),
					-18px 0 0 0 darken(#fff, 15);
			}
		}
		
		.spine {
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top: calc(100% - 5px);
			width: 10px;
			height: 150px;
			background: #fff;
			border-radius: 5px;
			
			.rib-left {
				position: absolute;
				width: 10px;
				height: 60px;
				background: #fff;
				left: -25px;
				top: 10px;
				border-radius: 5px;
				transform: rotate(80deg);
				
				&:before, &:after {
					content: '';
					position: absolute;
					background: #fff;
					width: 10px;
					border-radius: 5px;
				}
				
				&:before {
					top: 4px;
					left: calc(100% + 10px);
					height: 45px;
				}
				
				&:after {
					top: 8px;
					left: calc(100% + 30px);
					height: 30px;
				}
			}
			
			.rib-right {
				position: absolute;
				width: 10px;
				height: 60px;
				background: #fff;
				right: -25px;
				top: 10px;
				border-radius: 5px;
				transform: rotate(-80deg);
				
				&:before, &:after {
					content: '';
					position: absolute;
					background: #fff;
					width: 10px;
					border-radius: 5px;
				}
				
				&:before {
					top: 4px;
					right: calc(100% + 10px);
					height: 45px;
				}
				
				&:after {
					top: 8px;
					right: calc(100% + 30px);
					height: 30px;
				}
			}
		}
		
		.arm-left {
			position: absolute;
			width: 10px;
			height: 80px;
			background: #fff;
			left: -4px;
			border-radius: 5px;
			top: calc(100% - 8px);
			transform: rotate(60deg);
			
			&:before {
				content: '';
				position: absolute;
				width: 10px;
				height: 60px;
				background: #fff;
				top: calc(100% - 6px);
				left: 20px;
				border-radius: 5px;
				transform: rotate(-40deg);
			}
		}
		
		.arm-right {
			position: absolute;
			width: 10px;
			height: 100px;
			background: #fff;
			right: 9px;
			border-radius: 5px;
			top: calc(100% + 6px);
			transform: rotate(-30deg);
			
			&:before {
				content: '';
				position: absolute;
				width: 10px;
				height: 60px;
				background: #fff;
				top: calc(100% - 6px);
				left: -15px;
				border-radius: 5px;
				transform: rotate(30deg);
			}
		}
		
		.leg-left {
			position: absolute;
			background: #fff;
			width: 10px;
			height: 80px;
			border-radius: 5px;
			top: calc(100% + 145px);
			transform: rotate(10deg);
			left: 24px;
			
			&:before {
				content: '';
				position: absolute;
				width: 10px;
				height: 60px;
				background: #fff;
				border-radius: 5px;
				top: 100%;
				left: 0;
			}
		}
		
		.leg-right {
			position: absolute;
			background: #fff;
			width: 10px;
			height: 80px;
			border-radius: 5px;
			top: calc(100% + 145px);
			transform: rotate(-2deg);
			right: 28px;
			
			&:before {
				content: '';
				position: absolute;
				width: 10px;
				height: 60px;
				background: #fff;
				border-radius: 5px;
				top: 100%;
				left: -6px;
				transform: rotate(10deg);
			}
		}
	}
}

.delivery-guy {
	width: 900px;
	height: 240px;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	
	.hands {
		background: lighten($floor, 10);
		bottom: -20px;
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		transition: all 1 ease;
	}
	
	.hand--left {
		left: -60px;
		
		&:before {
			content: '';
			position: absolute;
			width: 30px;
			height: 80px;
			background: lighten($floor, 10);
			right: 14px;
			bottom: 0;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			transform: rotate(30deg);
			z-index: 4;
		}
		
		.smartphone {
			position: absolute;
			right: -55px;
			bottom: 45px;
			width: 90px;
			height: 140px;
			background: #fff;
			box-shadow: inset 0 -14px 0 0 darken($metal, 60),
				inset 0 0 0 4px darken($metal, 60),
				inset 0 24px 0 0 darken(#fff, 12);
			border-radius: 6px;
			z-index: 3;
			
			span {
				width: 100%;
				display: block;
				text-align: center;
				font-size: 14px;
				font-weight: 900;
				margin: 8px 0 4px;
			}
			
			p {
				border-radius: 6px;
				background: darken(#fff, 10);
				margin: 0 8px 6px;
				padding: 4px;
				font-size: 14px;
				opacity: 0;
			}
		}
	}
	
	.hand--right {
		right: -60px;
		transition: all 1s ease;
		
		&:before {
			content: '';
			position: absolute;
			width: 30px;
			height: 80px;
			background: lighten($floor, 10);
			left: 14px;
			bottom: 0;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			transform: rotate(-30deg);
			z-index: 4;
			transition: all 1s ease;
		}
		
		&:after {
			content: '';
			position: absolute;
			width: 100px;
			height: 300px;
			left: 0;
			top: 50%;
			background: lighten($floor, 10);
		}
		
		&.point {
			z-index: 5;
			right: -120px;
			
			&:before {
				transform: rotate(0);
				left: 50%;
				bottom: calc(100% - 20px);
				width: 25px;
			}
		}
	}
	
	.pizza-box {
		position: relative;
		background: lighten($box, 10);
		width: 100%;
		height: 100%;
		z-index: 3;
		padding-top: 40px;
		box-shadow: inset 20px 0 0 0 darken($box, 10),
			inset -20px 0 0 0 darken($box, 10),
			inset 0 20px 0 0 darken($box, 10),
			inset 90px 0 0 lighten($box, 10),
			inset 170px 0 0 darken($box, 1),
			inset 250px 0 0 lighten($box, 10),
			inset 330px 0 0 darken($box, 1),
			inset 410px 0 0 lighten($box, 10),
			inset 450px 0 0 darken($box, 1),
			inset -90px 0 0 lighten($box, 10),
			inset -170px 0 0 darken($box, 1),
			inset -250px 0 0 lighten($box, 10),
			inset -330px 0 0 darken($box, 1),
			inset -410px 0 0 lighten($box, 10),
			inset -450px 0 0 darken($box, 1);
		
		&:before, &:after {
			content: '';
			position: absolute;
			background: darken($box, 10);
			width: 20px;
			height: 20px;
			top: 20px;
		}
		
		&:before {
			left: 20px;
			border-bottom-right-radius: 80%;
		}
		
		&:after {
			right: 20px;
			border-bottom-left-radius: 80%;
		}
		
		h1, h2 {
			font-weight: 900;
			color: $typo;
			text-align: center;
			margin: 0;
		}
		
		h1 {
			font-size: 100px;
			position: relative;
			
			&:before {
				content: '';
				position: absolute;
				margin: auto;
				width: 520px;
				height: 160px;
				background: darken(#fff, 10);
				left: 0;
				right: 0;
				bottom: -90px;
				border-radius: 50%;
				z-index: -1;
			}
			
			&:after {
				content: '';
				position: absolute;
				margin: auto;
				width: 500px;
				height: 140px;
				background: #fff;
				left: 0;
				right: 0;
				bottom: -80px;
				border-radius: 50%;
				z-index: -1;
			}
		}
		
		h2 {
			font-size: 80px;
			margin-top: 20px;
		}
		
		span {
			position: absolute;
			left: 50%;
			right: 0;
			top: 164px;
			transform: translateX(-50%);
			color: darken($box, 20);
			text-align: center;
		}
		
		.sticky {
			position: absolute;
			font-family: 'Indie Flower', cursive;
			width: 100px;
			height: 80px;
			background: $sticky;
			left: 10px;
			top: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 4px;
			line-height: 1.2;
			box-shadow: inset 0 10px 0 0 darken($sticky, 10),
				-2px 5px 0 0 rgba(0,0,0,.1);
			transform: rotate(-10deg);
		}
	}
}

View Compiled

var tl = new TimelineMax(),
		hand = $('.hand--right'),
		door = $('.door'),
		handleft = $('.hand--left'),
		msg1 = $('.msg-1'),
		msg2 = $('.msg-2');

tl.call(function() { 
	hand.addClass('point');
}, null, null, 0);

tl.to(hand, 2, {
	bottom: '190px'
});

tl.to(hand, .1, {
	delay: 1,
	bottom: '220px'
});

tl.to(door, 1, {
	delay: 1,
	transform: 'rotateY(-80deg)',
	ease: Power4.easeOut
});

tl.to(hand, .2, {
	delay: 1,
	bottom: '180px'
}, '-=2');

tl.to(hand, .2, {
	delay: 1,
	bottom: '-20px'
});

tl.call(function() { 
	hand.removeClass('point');
}, null, null, 7);

tl.to(handleft, 1, {
	delay: 1,
	left: '-180px'
});

tl.to(msg1, .2, {
	delay: 1,
	opacity: 1
});

tl.to(msg2, .2, {
	delay: 1,
	opacity: 1
});

This Pen is owned by creme on CodePen.

See more by @creme on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript