Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
$blonde:#B46401;
$skin:darken(#F2C081,5%);
$red:#FF3414;
$blue:#00466B;

html, body {
  height:100%;
  width:100%;
  position:absolute;
  margin:0;
  padding:0;
  background:linear-gradient(to top right, $blue, darken($blue,10%)) fixed;
}

.wrapper {
	height:200px;
	width:300px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	//filter:drop-shadow(0 0 2px #222);
	.zzz {
		height:200px;
		width:300px;
		position:relative;
		top:100px;
		left:-25px;
		font-family:"Roboto";
		@for $i from 1 through 3 {
			.z#{$i} {
				position:absolute;
				right:25px*$i;
				bottom:200px - 25px*$i;
				font-size:64px/$i
			}
		}
	}
	.sleepyhead {
		height:74px;
		width:80px;
		position:relative;
		margin:auto;
		background:linear-gradient(to bottom right, $skin, lighten($skin,10%));
		border-radius:100%;
		overflow:hidden;
		z-index:100;
		.hair {
			height:100%;
			width:20px;
			position:absolute;
			right:6px;
			background:linear-gradient(to left, $blonde, lighten($blonde,10%));
			transform:rotate(-11.25deg);
			transform-origin:center top;
			//border:medium darken($blonde,5%) solid;
			&::before,
			&::after {
				content:"";
				height:50%;
				width:20px;
				position:absolute;
				background:linear-gradient(to left, $blonde, lighten($blonde,10%));
				transform-origin:center bottom;
			}
			&::before {
				top:-20px;
				left:0;
				transform:rotate(-22.5deg);
			}
			&::after {
				top:50%;
				left:-14px;
				transform:rotate(22.5deg);
			}
		}
		.eyes {
			height:100%;
			width:10px;
			position:absolute;
			left:0;
			right:0;
			margin:0 auto;
			display:flex;
			display:-webkit-flex;
			align-content:space-around;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			&__left,
			&__right {
				height:12px;
				width:8px;
				position:relative;
				border:thin transparent solid;
				border-left:thin #000 solid;
				border-radius:100%;
				&::after {
					content:"";
					height:20px;
					width:8px;
					position:absolute;
					top:-5px;
					right:-4px;
					border-radius:100%;
					border:thin transparent solid;
					border-right:thin #000 solid;
				}
			}
		}
		.nose {
			height:10px;
			width:10px;
			position:absolute;
			top:0;
			left:0;
			right:26px;
			bottom:0;
			margin:auto;
			border:thin transparent solid;
			border-left-color:#333;
			border-radius:100%;
		}
		.mouth {
			height:20px;
			width:10px;
			border-radius:100%;
			border:1px transparent solid;
			border-left-color:#333;
			position:absolute;
			top:0;
			bottom:0;
			left:10px;
			margin:auto;
		}
	}
	.chair {
		height:16px;
		width:60px;
		position:absolute;
		top:162.5%;
		left:36px;
		background:#B97009;
		transform:rotate(11.25deg);
		z-index:3;
		&::before {
			content:"";
			height:100px;
			width:16px;
			position:absolute;
			bottom:0;
			left:-15px;
			background:#B97009;
			border-bottom-left-radius:50%;
		}
		.stand {
			height:36px;
			width:12px;
			position:absolute;
			top:92%;
			left:0;
			right:0;
			margin:auto;
			background:#1a1a1a;
			transform:rotate(-11.25deg);
			&::before {
				content:"";
				height:6px;
				width:48px;
				position:absolute;
				bottom:0;
				left:-150%;
				background:#1a1a1a;
			}
		}
	}
	.body {
		height:80px;
		width:60px;
		position:absolute;
		top:230px;
		right:180px;
		margin:auto;
		background:$red;
		transform:rotate(22.5deg);
		border-top-left-radius:100%;
		border-top-right-radius:90%;
		z-index:10;
		.arm-left {
			height:14px;
			width:80px;
			position:absolute;
			top:-8px;
			left:90%;
			background:$red;
			transform:rotate(-22.5deg);
			.hand {
				height:100%;
				width:20px;
				position:absolute;
				right:-18px;
				background:$skin;
				border-top-right-radius:50%;
				border-bottom-right-radius:25%;
			}
		}
		.arm-right {
			height:80px;
			width:14px;
			position:absolute;
			top:10px;
			left:70%;
			background:$red;
			border-top-left-radius:30%;
			border-top-right-radius:30%;
			box-shadow:0 0 1px #111;
			transform:rotate(-22.5deg);
			z-index:12;
			.hand {
				height:20px;
				width:100%;
				position:absolute;
				bottom:-18px;
				background:$skin;
				border-bottom-right-radius:50%;
				border-bottom-left-radius:25%;
			}
		}
		.legs {
			&_top {
				height:40px;
				width:100px;
				position:absolute;
				top:72%;
				left:4px;
				background:$blue;
				border-top-right-radius:50%;
				border-bottom-left-radius:70%;
				transform:rotate(-22.5deg);
			}
			&_bottom {
				height:30px;
				width:30px;
				position:absolute;
				top:99%;
				left:81px;
				background:$blue;
				transform:rotate(-11.25deg);
				z-index:2;
			}
			.shoes {
				height:20px;
				width:40px;
				position:absolute;
				top:128%;
				left:91px;
				transform:rotate(-22.5deg);
				transform-origin:center bottom;
				background:#1a1a1a;
				border-top-right-radius:50%;
				border-bottom-left-radius:50%;
				border-bottom-right-radius:25%;
			}
		}
	}
	.table {
		height:20px;
		width:180px;
			background:linear-gradient(darken(#B97009,5%), #B97009);
		position:absolute;
		right:0;
		&::before {
			content:"";
			height:82px;
			width:120px;
			position:absolute;
			top:100%;
			right:0;
			background:linear-gradient(darken(#B97009,15%), #B97009);
			
		}
		.laptop {
			height:10px;
			width:90px;
			position:absolute;
			top:-10px;
			left:60px;
			background:#111;
			&::after {
				content:"";
				height:90px;
				width:5px;
				position:absolute;
				right:0;
				bottom:0;
				transform:rotate(22.5deg);
				transform-origin:right bottom;
				background:#111;
			}
		}
	}
	.floor {
		height:6px;
		width:320px;
		position:absolute;
		bottom:-91%;
		background:#111;
	}
	.text {
    position:absolute;
    top:400px;
    right:0;
    bottom:auto;
    left:0;
    font-size:48px;
    text-align:center;
    font-family:"Ranga";
	}
}

Frontend Forever App