.frame
	.moon
		- for i in (1..12)
			div class="crater-#{ i }"
	.hill-bg-1
	.hill-bg-2
	.hill-bg-3
	.hill-fg-1
	.hill-fg-2
	.hill-fg-3
	.front
		.temperature 12°
		.info Wind: E 7 km/hr <br/> Humidity: 87%
		table.preview 
			tr
				td Tue
				td 21° / 9°
			tr
				td Wed
				td 23° / 10°
	
	- for i in (1..30)
		div class="drop-big-#{ i }"
	- for i in (1..30)
		div class="drop-medium-#{ i }"
	- for i in (1..30)
		div class="drop-small-#{ i }"
View Compiled
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

$drop-color: #7FC1F9;
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.2);
	overflow: hidden;
  background: #1A2238;
  color: #394568;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.moon {
  position: absolute;
	top:45px;
	left:55px;
	width:67px;
	height:67px;
	border-radius:50px;
  background: #F6EDBD;
	overflow:hidden;
	box-shadow:0 0 10px 0 #F6EDBD;
	animation:rise 1s ease-out;
	
	.crater-1 {
		position:absolute;
		top:9px;
		left:28px;
		width:11px;
		height:11px;
		border-radius:10px;
		background: #ECE1A8;
	}
	.crater-2 {
		@extend .crater-1;
		top:12px;
		left:0;
	}
	.crater-3 {
		@extend .crater-1;
		top:56px;
		left:10px;
	}
	.crater-4 {
		@extend .crater-1;
		width: 6px;
		height: 6px;
		top: 37px;
		left: 49px;
	}
	.crater-5 {
		@extend .crater-4;
		top: 24px;
		left: 61px;
	}
	.crater-6 {
		@extend .crater-4;
		top: 55px;
		left: 33px;
	}
	.crater-7 {
		@extend .crater-4;
		top: 17px;
		left: 46px;
	}
	.crater-8 {
		@extend .crater-4;
		top: 28px;
		left: 27px;
	}
	
	.crater-9 {
		@extend .crater-4;
		top: 39px;
		left: 17px;
	}
	
	.crater-10 {
		@extend .crater-1;
		width: 4px;
		height: 4px;
		top: 25px;
		left: 15px;
	}
	
	.crater-11 {
		@extend .crater-1;
		top: 37px;
		left: 37px;
	}
	.crater-12 {
		@extend .crater-1;
		top: 10px;
		left: 10px;
	}
}
.hill-bg-1 {
	position:absolute;
	z-index:2;
	top:200px;
	left:-57px;
	width:317px;
	height:182px;
	background: #26314F;
	border-radius: 50%;
}
.hill-bg-2 {
	@extend .hill-bg-1;
	top: 160px;
	left: 60px;
}
.hill-bg-3 {
	@extend .hill-bg-1;
	top: 197px;
	left: 177px;
}
.hill-fg-1 {
	@extend .hill-bg-1;
	background: #303C5D;
	top: 248px;
	left: -137px;
}
.hill-fg-2 {
	@extend .hill-fg-1;
	top: 221px;
	left: 63px;
}
.hill-fg-3 {
	@extend .hill-fg-1;
	top: 248px;
	left: 292px;
}
.front {
	position:absolute;
	z-index:10;
	left:0px;
	bottom:0px;
	width:400px;
	height:90px;
	background:#7d8ebd;
	
	.temperature {
		float:left;
		font-weight:500;
		margin-left:20px;
		font-size:45px;
		line-height:90px;
	}
	.info {
		float:left;
		font-weight:500;
		margin:25px 0 0 13px;
		font-size:15px;
		line-height:20px;
	}
	.preview {
		float:right;
		font-weight:500;
		font-size:15px;
		text-align:right;
		line-height:20px;
		margin:25px 20px 0 0;
		
		td {
			padding:0 3px;
			text-transform:uppercase;
			&:first-child {
				font-weight:500;
			}
		}
	}
}
@for $i from 1 through 30 {
	.drop-big-#{$i} {
	 	position:absolute;
	 	z-index:20;
		left: (-20+ 38 * $i) + px;
		bottom:90px;
		width:8px;
		height:8px;
		border-radius: 50%;
		background: $drop-color;
		animation:drop (0.7 + random(2) / 10) + s linear (random(50) / 25) + s infinite;
		animation-fill-mode:both;
		transform-origin:50% 100%;
		
		&:before {
			position: absolute;
			content: '';
			display: block;
			top: -2px;
			left: 1px;
			width: 6px;
			height: 6px;
			background: $drop-color;
			border-radius: 3px;
		}
		
		&:after {
			position: absolute;
			content: '';
			display: block;
			top: -5px;
			left: 2px;
			width: 4px;
			height: 10px;
			background: $drop-color;
			border-radius: 50%;
		}
	}
	.drop-medium-#{$i} {
		@extend .drop-big-1;
		left: (-30 + 38 * $i) + px;
		opacity: 0.6;
		width: 6px;
		height: 6px;
		animation: drop (1.3 + random(2) / 10) + s linear (random(50) / 25) + s infinite;
		animation-fill-mode: both;
		
		&:before {
			top: -2px;
			left: 1px;
			width: 4px;
			height: 4px;
		}
		
		&:after {
			top: -4px;
			left: 2px;
			width: 2px;
			height: 6px;
		}
	}
	.drop-small-#{$i} {
		@extend .drop-big-1;
		left: (-40 + 38 * $i) + px;
		opacity: 0.3;
		width: 4px;
		height: 4px;
		animation: drop (1.9 + random(2) / 10) + s linear (random(50) / 25) + s infinite;
		animation-fill-mode: both;
		
		&:before {
			top: -2px;
			left: 1px;
			width: 2px;
			height: 2px;
		}
		
		&:after {
			top: -3px;
			left: 1px;
			width: 2px;
			height: 4px;
		}
	}
	
}
@keyframes drop {
	0% {
		transform:translate3d(40px,-320px,0) scaleX(1) scaleY(1) rotate(17deg);
	}
	85% {
		transform: translate3d(0,0,0) scaleX(1) scaleY(1) rotate(17deg);
	}
	100% {
		transform: translate3d(0,0,0) scaleX(3) scaleY(0) rotate(0deg);
	}
}
@keyframes rise {
	from {
transform:translate(-20px,200px);
	}
	to {
		transform:translate(0,0px);
	}
}




View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.