Bedroom Ghost by

Fergus Jordan

On: 8 Sep 2016

fullscreen 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ghostly</title>
</head>
<body>

	<div class="wall">

		<div class="window">
			<div class="frame"></div>
			<div class="moon"></div>
		</div>

		<div class="desk">

			<ul class="lamp">
				<div class="beam"></div>
				<li class="base"></li>
				<li class="stem"></li>
				<li class="bulb"></li>
			</ul>

			<div class="book"></div>

		</div>

		<div class="ghost">
			<ul class="eyes">
				<li></li>
				<li></li>
			</ul>
			<ul class="sheet">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

	</div>

</body>
</html>

/* RESETS / INITIAL SETUP
 ================================================================== */
*:before,
*:after {
	content: '';
}

body {
	margin: 0px;
}

html:before {
	display: none;	
}

li {
	list-style-type: none;
}


/* BACKGROUND
 ================================================================== */
.wall {
	max-height: 500px;
	width: 100%;
	height: 100%;
	background: rgba( 138, 157, 164, 0.5 );
	position: relative;
	overflow: hidden;
}


/* WINDOW
 ================================================================== */
.window {
    position: absolute;
    top: 5%;
    right: 5%;
    height: 0px;
    padding-bottom: 30%;
    width: 25%;
    background: #594862;
    border: 5px solid #DC843B;
    overflow: hidden;
}

.frame {
	position: absolute;
	height: 100%;
	width: 100%;
}

.frame:after,
.frame:before {
	position: absolute;
	width: 100%;
	height: 5px;
	background: #DC843B;
	top: 50%;
	transform: translateY( -50% );
}

.frame:before {
	width: 5px;
	height: 100%;
	left: 50%;
	top: 0px;
	transform: translateX( -50% );
}

.moon {
	position: absolute;
	width: 64%;
    height: 50%;
	background: #FCFED4;
	top: 0px;
	right: 0px;
	border-radius: 100%;
	transform: translate( 40%, -25% );
}

.moon:before,
.moon:after {
	position: absolute;
	width: 12px;
	height: 12px;
	background: transparent;
	bottom: 15px;
	left: 15px;
	border-radius: 100%;
	box-shadow: inset 1px 0px 1px 0px rgba( 0, 0, 0, 0.12 );
}

.moon:after {
	bottom: 30px;
	width: 8px;
	height: 8px;
	left: 10px;
	box-shadow: inset 1px -1px 1px 0px rgba( 0, 0, 0, 0.12 );
}


/* GHOST
 ================================================================== */
.ghost {
	width: 18%;
	height: 40%;
	max-width: 125px;
	min-width: 100px;
	max-height: 160px;
	background: #FFF;
	position: absolute;
	bottom: 55px;
	left: 35px;
	border-radius: 100% 100% 12% 21%;
	animation-name: float;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	z-index: 500;
}

.ghost .eyes li {
    position: absolute;
    width: 10%;
    background: #8A9DA4;
    right: 15%;
    top: 25%;
    border-radius: 100%;
    padding-bottom: 20%;
}

.ghost .eyes li:nth-child( 2 ) {
	right: 26%;
}

.ghost .eyes li:before {
	width: 2px;
	height: 3px;
	position: absolute;
	bottom: 25%;
	right: 25%;
	background: #FFF;
	border-radius: 100%;
}

.ghost .sheet {
	counter-reset: section;
}

.ghost .sheet li {
	position: absolute;
	bottom: 0px;
	transform: translateY( 100% );
	width: 16%;
	height: 16%;
	border: none;
	border-radius: 0px 0px 20px 15px;
	background: #FFF;
	animation-name: slide;
	animation-iteration-count: infinite;
	animation-delay: 0s;
	animation-direction: alternate;
}

.ghost .sheet li:first-child {
	left: 0px;
	bottom: 5%;
	animation-duration: 1150ms;
}

.ghost .sheet li:nth-child( 2 ) {
	left: 25%;
	height: 17%;
	animation-duration: 950ms;
}

.ghost .sheet li:nth-child( 3 ) {
	left: 56%;
	height: 19%;
	animation-duration: 850ms;
}

.ghost .sheet li:nth-child( 4 ) {
	right: 0px;
	height: 16%;
	bottom: 5%;
	animation-duration: 1250ms;
}


/* DESK
 ================================================================== */
.desk {
	width: 34%;
	height: 2%;
	min-height: 10px;
	background: #DC843B;
	position: absolute;
	bottom: 80px;
	right: 50px;
	z-index: 100;
}

.desk:before {
	width: 100%;
	height: 100%;
	position: absolute;
	background: #DC843B;
}

.desk:after {
	width: 60%;
    height: 800%;
    background: transparent;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX( -50% );
    border-left: 10px solid #DC843B;
    border-right: 10px solid #DC843B;
}


/* LAMP
 ================================================================== */
.lamp .base {
	position: absolute;
	width: 30px;
	height: 5px;
	background: #8A9DA4;
	top: -5px;
	right: 35px;
}

.lamp .stem {
	position: absolute;
	height: 50px;
	width: 5px;
	background: #8A9DA4;
	right: 42px;
	top: -5px;
	transform: translate( -100%, -100% );
}

.lamp .stem:after {
	position: absolute;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	background: transparent;
	border-top: 5px solid #8A9DA4;
	border-left: 5px solid #8A9DA4;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	transform: rotate( 45deg ) translate( -93%, 25% );
	z-index: 50;
}

.lamp .bulb {
	width: 30px;
	height: 10px;
	position: absolute;
	background: #8A9DA4;
	border-radius: 10px 10px 0px 0px;
	transform: rotate( 35deg );
	top: -55px;
	right: 65px;
	box-shadow: -10px -10px -5px -5px black;
	z-index: 50;
}

.lamp .bulb:after {
	width: 20px;
	height: 10px;
	position: absolute;
	background: #8A9DA4;
	border-radius: 10px 10px 0px 0px;
	left: 5px;
	top: -5px;
	z-index: 50;
}

.lamp .beam {
	position: absolute;
	width: 500px;
	height: 500px;
	transform: rotate( 75deg );
	background: rgba( 250, 239, 209, 1 );
	right: 3%;
	top: 0px;
	z-index: -10;
	border-bottom: 105px solid transparent;
    border-right: 80px solid transparent;
}


/* BOOK
 ================================================================== */
.book {
	width: 30px;
	height: 8px;
	background: #FFF;
	position: absolute;
	border: 2px solid #C93312;
	border-right: none;
	border-radius: 1px 0px 0px 1px;
	bottom: 10px;
	left: 35px;
}


/* ANIMATIONS
 ================================================================== */
@keyframes slide {
	from {
		transform: translateY( 100% );
	}
	to {
		transform: translateY( 80% );
	}
}

@keyframes float {
	0% {
		left: 35px;
		transform: translateY( 0px ) scaleX( -1 );
	}
	10% {
		transform: translateY( -10px ) scaleX( 1 );
	}
	20% {
		transform: translateY( 0px ) scaleX( 1 );
	}
	30% {
		transform: translateY( -10px ) scaleX( 1 );
	}
	40% {
		transform: translateY( 0px ) scaleX( 1 );
	}
	50% {
		left: calc( 100% - 125px );
		transform: translateY( -10px ) scaleX( 1 );
	}
	60% {
		transform: translateY( 0px ) scaleX( -1 );
	}
	70% {
		transform: translateY( -10px ) scaleX( -1 );
	}
	80% {
		transform: translateY( 0px ) scaleX( -1 );
	}
	90% {
		transform: translateY( -10px ) scaleX( -1 );
	}
	100% {
		left: 35px;
		transform: translateY( 0px ) scaleX( -1 );
	}
}

22