.scenery
	.stars
		- for(i=0; i<100; i++)
			.star
	.planet.planet1
	.planet.planet2
	.planet.planet3
	.girl
		.head
		.body
		.legs
	.title
		h1
			span 4
			.square
				.light.light1
				.light.light2
				.light.light3
				.light.light4
				.shadow.shadow1
				.shadow.shadow2
				ul.stairs1
					- for(i=0; i<12; i++)
						li
				ul.stairs2
					- for(i=0; i<11; i++)
						li
				ul.stairs3
					- for(i=0; i<10; i++)
						li
				ul.stairs4
					- for(i=0; i<11; i++)
						li
			span 4
	.message
		h2 Oops! Looks like you got lost
	
	.action
		button Take me back
View Compiled
@import "compass/reset"
@import "compass/css3"
@import url('https://fonts.googleapis.com/css?family=Poppins')

$count: 100
$shadow: #ff9c61
$light: #fedbae
$gradient1: #2a1f6f
$gradient2: #ae3082
$squareSize: 150px

@keyframes shining
	0%
		opacity: 1
	100%
		opacity: 0.2

body
	background-color: #482472
	font-family: Poppins

//---------------------------
// GENERAL SCENERY
//---------------------------
.scenery
	position: absolute
	top: 50%
	left: 50%
	width: 1000px
	height: 618px
	display: flex
	flex-direction: column
	align-items: center
	justify-content: center
	transform: translate(-50%, -50%)
	overflow: hidden
	border-radius: 5px
	color: #fff
	+background-image(linear-gradient($gradient1, $gradient2))
	+box-shadow(rgba(0,0,0,0.8) 0px 0px 100px)

//---------------------------
// STARS
//---------------------------
.star
	position: absolute
	z-index: 1
	background-color: #fff
	animation-name: shining
	animation-timing-function: ease
	animation-direction: alternate
	animation-iteration-count: infinite
	+box-shadow(#fff 0px 0px 5px)
	+border-radius(200px)
	
@for $i from 1 to $count
	$size: random(3)+0px
	.star:nth-child(#{$i})
		width: $size
		height: $size
		bottom: random(618)+0px
		left: random(1000)+0px
		animation-duration: random(4) / random(3) + 0s

//---------------------------
// TEXT
//---------------------------
.title
	position: relative
	z-index: 50
	h1
		font-size: 15rem
		font-weight: bold
		span
			vertical-align: middle
			margin: 0 30px

.message
	margin-top: 50px
	h2
		font-size: 1.8rem

.action
	margin-top: 30px
	button
		padding: 10px 20px
		font-family: Poppins
		font-size: 1.2rem
		color: #fff
		border: 2px solid $shadow
		background-color: $shadow
		border-radius: 50px
		+transition(all .2s ease)
		box-shadow: 0px 0px 15px $shadow
		&:hover
			cursor: pointer
			background-color: transparent

//---------------------------
// FIGURE
//---------------------------		
.square
	width: $squareSize
	height: $squareSize
	display: inline-block
	position: relative
	vertical-align: middle
	left: -30px
	+transform(scale(1.1) rotate(45deg))
	> *
		position: absolute
	.light
		box-shadow: 0px 0px 10px $light
		background-color: $light
	.light1, .light3
		width: $squareSize / 10 
		height: $squareSize - $squareSize / 10
		+transform(skew(0deg, 45deg))
	.light2, .light4
		width: $squareSize - $squareSize / 5
		height: $squareSize / 10 
		+transform(skew(45deg))
	.light1
		z-index: 10
		top: $squareSize / 20 - 2px
		left: $squareSize / 10
	.light3
		z-index: 2
		top: $squareSize / 20
		right: $squareSize / 10
	.light2
		top: 0
		left: $squareSize / 10 + ($squareSize / 10)/2
	.light4
		bottom: 0
		right: $squareSize / 10 + ($squareSize / 10)/2

	.shadow
		background-color: $shadow
		box-shadow: 0px 0px 10px $shadow
	.shadow1
		bottom: $squareSize / 20
		right: 0
		width: $squareSize / 10 
		height: $squareSize - $squareSize / 5
		+transform(skew(0deg, -45deg))
	.shadow2
		z-index: 3
		top: $squareSize / 10
		left: $squareSize / 10 + ($squareSize / 10)/2
		width: $squareSize - $squareSize / 5
		height: $squareSize / 10
		+transform(skew(-45deg))
	
	.stairs1, .stairs2, .stairs3, .stairs4
		li
			position: relative
			width: $squareSize/20
			height: $squareSize/20
			background-color: $light
			box-shadow: 0px 0px 10px $light
			+transform(rotate(45deg))
	.stairs1, .stairs2
		li
			&::before
				content: ''
				position: absolute
				left: 0
				width: $squareSize/20
				height: 13px
				+background-image(linear-gradient(left, $light, $shadow))
				box-shadow: 0px 0px 10px $light
		
	.stairs1
		top: 1px
		left: 11px
		width: 0px
		height: $squareSize
		li
			margin-bottom: 3px
			&::before
				top: 100%
				
	.stairs2
		z-index: 10
		bottom: 19px
		left: 3px
		width: $squareSize
		height: 0px
		display: flex
		li
			margin-right: 3.5px
			&:last-child
				&::before
					background: $light
			&::before
				bottom: 100%
	
	.stairs3
		bottom: -32px
		right: 34px
		width: 0px
		height: $squareSize
		z-index: 10
		li
			margin-bottom: 3.5px

	.stairs4
		top: -4px
		left: 16px
		width: $squareSize
		height: 0px
		display: flex
		li
			margin-right: 3.5px

//---------------------------
// PLANETS
//---------------------------			
.planet
	position: absolute
	z-index: 10
	width: 90px
	height: 90px
	border-radius: 50%
	box-sizing: border-box
	&::before, &::after
		content: ''
		position: absolute
		z-index: 1
		top: 50%
		left: 50%
		border-radius: 50%
		transform: translate(-50%, -50%)
	&::before
		width: 70px
		height: 70px
	&::after
		width: 60px
		height: 60px
.planet1
	box-shadow: 0px 0px 30px #a3358c
	bottom: 260px
	left: 50px
	border: 5px solid #a3358c
	background-color: #cf3684
	&::before
		background-color: #fd8f5d
	&::after
		background-color: #ffdf70

.planet2
	box-shadow: 0px 0px 30px #1383df
	+transform(scale(0.8))
	bottom: 40px
	right: 80px	
	border: 5px solid #1383df
	background-color: #08abf3
	&::before
		background-color: #11c1f1
	&::after
		background-color: #22e5f1

.planet3
	box-shadow: 0px 0px 30px #7a7afe
	+transform(scale(0.6))
	top: 20px
	right: 30px	
	border: 5px solid #7a7afe
	background-color: #9a82ff
	&::before
		background-color: #b588ff
	&::after
		background-color: #d491ff

//---------------------------
// GIRL
//---------------------------
.girl
	position: absolute
	z-index: 99
	width: 12px
	height: 40px
	top: 130px
	left: 460px
	.head
		position: relative
		z-index: 10
		width: 10px
		height: 10px
		box-sizing: border-box
		background-color: #fff
		border-left: 3px solid #000
		border-radius: 5px
		+transform(rotate(-20deg))
		&::before
			content: ''
			position: absolute
			left: -16px
			top: 0px
			width: 0px
			height: 0px
			display: block
			border-right: 15px solid #fff
			border-top: 5px solid transparent
			border-bottom: 4px solid transparent
	.body
		position: absolute
		top: 7px
		left: -2px
		width: 0px
		height: 0px
		box-sizing: border-box
		border-bottom: 20px solid #fff
		border-left: 8px solid transparent
		border-right: 8px solid transparent
		border-radius: 7px

	.legs
		position: absolute
		bottom: 5px
		left: 3px
		width: 3px
		height: 10px
		border-left: 2px solid #fff
		border-right: 2px solid #fff
			
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.