ICEBERG!

ICEBERG!.markdown

ICEBERG!

A Pen by Bryce Snyder on CodePen.

License.

index.html

<section>
	<div class="iceberg">
		<span></span>
	</div>
	<h1>ICEBERG</h1>
</section>

style.css

@import url(https://fonts.googleapis.com/css?family=Nunito:400);

@keyframes float
	0% 
		transform translateY(15px)
	50%
		transform translateY(0)
	100%
		transform translateY(15px)
		
@keyframes float2
	0% 
		transform translateY(5px)
	50%
		transform translateY(-5px)
	100%
		transform translateY(5px)

body
	background #68C4EF
	font-family 'Nunito', sans-serif
	
h1 
	font-weight normal
	color white
	margin-top 120px
	text-align center
	font-size 3em

section
	width 455px
	height 380px
	position absolute
	left 50%
	top 50%
	margin-left -227.5px
	margin-top -190px
	
.iceberg
	position relative    
	z-index 0
	width 0 
	height 0 
	border-left 185px solid transparent
	border-right 185px solid transparent
	border-bottom 185px solid #C7C8CA
	animation float 4s ease-in-out infinite
	&::before 	
		content ''
		display block
		position absolute
		top 185px
		left -185px
		width 0
		height 0
		border-left 95px solid transparent
		border-right 95px solid transparent
		border-top 95px solid #3680A4
	&::after
		content ''
		display block
		position absolute
		top 185px
		width 0
		height 0
		border-left 95px solid transparent
		border-right 95px solid transparent
		border-top 95px solid #3680A4
	span
		position absolute
		z-index 1
		left 0
		top 0
		margin-left -100px
		display block
		width 0 
		height 0 
		border-left 185px solid transparent
		border-right 185px solid transparent
		border-bottom 185px solid white
		animation float2 4s ease-in-out infinite
		&::before
			content ''
			display block
			position absolute
			top 185px
			margin-left -5px
			width 0
			height 0
			border-left 95px solid transparent
			border-right 95px solid transparent
			border-top 95px solid #89CFF3
			z-index -1
		&::after
			content ''
			display block
			position absolute
			top 185px
			margin-left -185px
			z-index -1
			width 0
			height 0
			border-left 95px solid transparent
			border-right 95px solid transparent
			border-top 95px solid #89CFF3