Rotating Cogwheels

index.jade

.header
	.kugg-1
		i.ion-gear-a.first
		i.ion-gear-a.second
	.text-container
		h1 Painted Ladies
		p.lead BY JAMES K. ZIMMERMAN
		p.
			"The day after you sighed
			<br>
			your last breath out
			<br>
			we let your butterflies go"
		a(href="https://www.poetryfoundation.org/poems-and-poets/poems/detail/90830") Read More

rotating-cogwheels.markdown

Rotating Cogwheels

Just a experiment for the late evening and doing something for my friend. He wondered if it was possible to get two wheels rotating with CSS.

A Pen by Lars Jönsson on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

//Font
@import 'https://fonts.googleapis.com/css?family=Bitter'
@import 'https://fonts.googleapis.com/css?family=Bitter|Dancing+Script'

*
	box-sizing: border-box

body
	background: #eee
	font-family: 'Bitter', serif
	text-rendering: optimizeLegibility
	
.header
	background: #fff
	margin: 8em auto 2em
	height: 100%
	width: 80%
	max-width: 1200px
	box-shadow: 0px 40px 60px -20px rgba(0,0,0,0.2)
	overflow: hidden
	position: relative
	padding: 2em
	transition: all 1s ease
	
	.kugg-1
		text-align: center
		position: absolute
		height: 100%
		bottom: 6px
		left: -130px
	
	i.ion-gear-a.first
		font-size: 555px
		color: orangered
		&:before
			animation: spinny 10s linear infinite

	i.ion-gear-a.second
		font-size: 355px
		position: absolute
		top: 200px
		left: 422px
		&:before
			animation: gear 6s linear infinite
	.text-container
		float: right
		position: relative
		top: -30px
		h1
			margin-right: 1em
			margin-bottom: 0em
			font-size: 45px
		p.lead
			margin-top: 0
			margin-bottom: 2em
			font-size: inherit
			font-family: inherit
		p
			line-height: 1.3
			font-size: 30px
			font-family: 'Dancing Script', cursive


		a
			font-family: 'Bitter', serif
			font-size: 13px
			padding: .5em
			border-radius: 3px
			font-style: normal
			border: 1px solid #ccc
			color: #000
			text-decoration: none
			text-transform: uppercase
			&:hover
				border: 1px solid #999
				transition: all .3s ease
	

@keyframes spinny
	0%
		transform: rotate(360deg)
	100%
		transform: rotate(0deg)


@keyframes gear
	0% 
		transform: rotate(-360deg)
	100% 
		transform: rotate(0deg)


@media (max-width: 1165px)
	.header
		transition: all .3s ease-in-out 0s
		width: 90%
		height: 100%
		.kugg-1
			bottom: 100px
			left: -100px
			i.ion-gear-a.first
				font-size: 310px
			i.ion-gear-a.second
				font-size: 180px
				top: 0px
				left: 225px
				margin-bottom: 2em
		.text-container
			float: none
			position: relative
			top: 30px
			padding: 7em 0em 1em
			h1
				transition: all .3s ease-in-out 0s
				font-size: 30px
				margin-top: 1.5em
			p.lead
				font-size: 12px
			p
				font-size: 20px
			br
				display: none
		
@media (max-width: 480px)
	.header
		.kugg-1
		.text-container
			h1
				transition: all .3s ease-in-out 0s
				font-size: 25px
			p.lead
				margin-top: .3em
		
@media (max-width: 400px)
	.header
		.kugg-1
		.text-container
			h1
				transition: all .3s ease-in-out 0s
				font-size: 20px
				

@media (max-width: 360px)
	.header
		.kugg-1
			transition: all .3s ease-in-out 0s
			bottom: 140px
			left: -150px
			i.ion-gear-a.first
				font-size: 310px
			i.ion-gear-a.second
				font-size: 180px
				top: 85px
				left: 235px
				margin-bottom: 2em
		.text-container
			transition: all .3s ease-in-out 0s
			float: none
			h1
				margin: 0em
			p
				margin-bottom: 1em
			a
				font-size: 9px

styles

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />