<body>
	<div class="title">
	<h2>CSS Images</h2>
	<h1>:: 01 Bear Cub</h1>
	</div>
	<div class="box">
		<div class="head-shade"></div>
		<div class="left-e-shade"></div>
			<div class="right-e-shade"></div>
		<div class="head">

			<div class="head-copy"></div>

			<div class="left-cheek"></div>
			<div class="right-cheek"></div>
			<!-- ears -->
			<div class="left-ear"></div>
			<div class="right-ear"></div>
			<!-- eyes -->
			<div class="left-eyebrow"></div>
			<div class="right-eyebrow"></div>
			<div class="eye-container">
				<div class="left-eye">
					<div class="pupil"></div>
				</div>
				<div class="right-eye">
					<div class="pupil"></div>
				</div>
			</div>
			<!-- nose/mouth -->
			<div class="left-c-line"></div>
			<div class="snout-line"></div>
			<div class="right-c-line"></div>
			<div class="nose">
				<div class="nose-shine"> </div>
			</div>
				<div class="left-lip"></div>
				<div class="left-smile-line"></div>
				<div class="right-lip"></div>
				<div class="right-smile-line"></div>
				<div class="chin-line"></div>
			
		</div>
			<!-- head -->
		</div>
		<!-- box -->
</body>
@mixin width-height($width, $height) {
	width: $width;
	height: $height;
}

@mixin left-top($margin-left, $margin-top) {
	margin-left: $margin-left;
	margin-top: $margin-top;
}

$primary-gold: #FFBE67;
$shade-gold: #B47D44;
$line-gold: #78532D;
body {
	background-color: #C9635F;
}

.title {
	text-align: center;
	font-family: 'Open Sans Condensed', sans-serif;
	color: $primary-gold;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

.box {
	position: relative;
	margin: auto;
	display: block;
	@include width-height(400px, 400px);
	margin-top: 100px;
	
	.head {
		@include width-height(80%, 80%);
		@include left-top(10%, 10%);
		border-radius: 40%;
		background-color: $primary-gold;
		position: absolute;
		//border-top: 6px solid $secondary-gold; 
		border-bottom: 6px solid $line-gold;
		.head-copy {
			@include width-height(100%, 100%);
			border-radius: 40%;
			background-color: $primary-gold;
			position: absolute;
			z-index: 2;
		}
		.left-cheek {
			@include width-height(77%, 75%);
			@include left-top(-7.5%, 20%);
			background-color: $primary-gold;
			border-left: 6px solid $line-gold;
			border-radius: 50%;
			-ms-transform: rotate(-15deg);
			-webkit-transform: rotate(-15deg);
			transform: rotate(-15deg);
		}
		.right-cheek {
			@include width-height(75%, 75%);
			@include left-top(30.5%, -75%);
			background-color: $primary-gold;
			border-right: 6px solid $line-gold;
			border-radius: 50%;
			-ms-transform: rotate(15deg);
			-webkit-transform: rotate(15deg);
			transform: rotate(15deg);
		}
		.left-ear {
			@include left-top(2%, -109%);
			@include width-height(25%, 30%);
			position: absolute;
			border-top-left-radius: 40%;
			border-top-right-radius: 40%;
			border-bottom-left-radius: 90%;
			background-color: $primary-gold;
			z-index: 1;
			-ms-transform: rotate(-30deg);
			-webkit-transform: rotate(-30deg);
			transform: rotate(-30deg);
		}
		.right-ear {
			@include left-top(72%, -109%);
			@include width-height(25%, 30%);
			position: absolute;
			border-top-left-radius: 40%;
			border-top-right-radius: 40%;
			border-bottom-right-radius: 90%;
			background-color: $primary-gold;
			z-index: 1;
			-ms-transform: rotate(30deg);
			-webkit-transform: rotate(30deg);
			transform: rotate(30deg);
		}
		.left-eyebrow {
			position: absolute;
			z-index: 3;
			@include left-top(18%, -77%);
			@include width-height(12%, 10px);
			border-top: 5px solid $line-gold;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			-ms-transform: rotate(-25deg);
			-webkit-transform: rotate(-25deg);
			transform: rotate(-25deg);
		}
		.right-eyebrow {
			position: absolute;
			z-index: 3;
			@include left-top(70%, -77%);
			@include width-height(12%, 10px);
			border-top: 5px solid $line-gold;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			-ms-transform: rotate(25deg);
			-webkit-transform: rotate(25deg);
			transform: rotate(23deg);
		}
		.eye-container {
			position: absolute;
			@include width-height(75%, 30%);
			@include left-top(13%, -80%);
			//background-color: #E8AD5E;
			z-index: 2;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			.left-eye {
				position: absolute;
				@include left-top(15%, 26%);
				@include width-height(8%, 34%);
				background-color: $line-gold;
				border-radius: 50%;
				z-index: 3;
			}
			.right-eye {
				position: absolute;
				@include left-top(78%, 26%);
				@include width-height(8%, 34%);
				background-color: $line-gold;
				border-radius: 50%;
				z-index: 3;
			}
			.pupil {
				position: absolute;
				@include left-top(25%, 25%);
				@include width-height(10%, 10%);
				background-color: #fff;
				border-radius: 50%;
				z-index: 4;
			}
		}
		.left-c-line {
			position: absolute;
			z-index: 5;
			@include left-top(20%, -52%);
			@include width-height(9%, 10px);
			border-top: 5px solid $shade-gold;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			-ms-transform: rotate(15deg);
			-webkit-transform: rotate(15deg);
			transform: rotate(15deg);
		}
		.snout-line {
			position: absolute;
			z-index: 5;
			@include left-top(36%, -52%);
			@include width-height(30%, 15%);
			border-top: 5px solid $shade-gold;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
		}
		.right-c-line {
			position: absolute;
			z-index: 5;
			@include left-top(73%, -52%);
			@include width-height(9%, 10px);
			border-top: 5px solid $shade-gold;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			-ms-transform: rotate(-15deg);
			-webkit-transform: rotate(-15deg);
			transform: rotate(-15deg);
		}
		.nose {
			position: absolute;
			background-color: $line-gold;
			@include left-top(42%, -45%);
			@include width-height(18%, 10%);
			border-radius: 50%;
			z-index: 3;
			.nose-shine {
				position: absolute;
				background-color: #fff;
				@include left-top(30%, 15%);
				@include width-height(40%, 10%);
				border-radius: 50%;
				z-index: 3;
			}
		}
		.left-lip {
			position: absolute;
			@include width-height(35%, 25%);
			@include left-top(16%, -35%);
			border-bottom: 5px solid $line-gold;
			border-bottom-left-radius: 100%;
			z-index: 4;
		}
		.left-smile-line {
			position: absolute;
			z-index: 5;
			@include left-top(12%, -33%);
			@include width-height(12%, 30px);
			border-top: 5px solid $line-gold;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			-ms-transform: rotate(-23deg);
			-webkit-transform: rotate(-23deg);
			transform: rotate(-23deg);
		}
		.right-lip {
			position: absolute;
			@include width-height(35%, 25%);
			@include left-top(51%, -35%);
			border-bottom: 5px solid $line-gold;
			border-bottom-right-radius: 100%;
			z-index: 4;
		}
		.right-smile-line {
			position: absolute;
			z-index: 5;
			@include left-top(78%, -33%);
			@include width-height(12%, 30px);
			border-top: 5px solid $line-gold;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			-ms-transform: rotate(23deg);
			-webkit-transform: rotate(23deg);
			transform: rotate(23deg);
		}
		.chin-line {
			position: absolute;
			z-index: 5;
			@include left-top(45%, -8%);
			@include width-height(12%, 20px);
			border-top: 5px solid $line-gold;
			border-top-left-radius: 90%;
			border-top-right-radius: 90%;
			-ms-transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
		}
	}
}

//shading
.head-shade {
	@include width-height(79%, 79%);
	@include left-top(9%, 8.8%);
	border-radius: 40%;
	border: 6px solid $line-gold;
	position: absolute;
	background-color: $line-gold;
}

.left-e-shade {
	@include left-top(10.8%, -2.4%);
	@include width-height(19.5%, 25%);
	position: absolute;
	border-top-left-radius: 40%;
	border-top-right-radius: 40%;
	border-bottom-left-radius: 90%;
	border: 6px solid $line-gold;
	-ms-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
	background-color: $line-gold;
}

.right-e-shade {
	@include left-top(66%, -2.4%);
	@include width-height(19.5%, 25%);
	position: absolute;
	border-top-left-radius: 40%;
	border-top-right-radius: 40%;
	border-bottom-right-radius: 90%;
	border: 6px solid $line-gold;
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	background-color: $line-gold;
}

@media all and (max-width: 600px) {
	.box {
		position: relative;
		margin: auto;
		display: block;
		margin-top: 2%;
		width: 300px;
		height: 300px;
		background: none;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.