martinkean

/**
 * Clouds
 */

/* These exercises are for teaching purposes only. */
/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

body {background:#678bb3; 		padding:0;		margin:0;	}		
.sky {		width:100%;		height:1000px;		
background: transparent url(http://martinkean.com/kidscon/clouds/img/sky.jpg) top left no-repeat;		

martinkean

/**
 * Ball
 */

/* These exercises are for teaching purposes only. */
/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

body {margin: 6em 10%; background:#493F5B;}				
.ball { 
	position: absolute; 

martinkean

/**
 * Robot
 */
 
/* These exercises are for teaching purposes only. */
/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

body {background-image: url('http://martinkean.com/kidscon/robot/background.png'); background-size: cover;	 background-position: 0px -250px;}
.wrapper {margin: 20em auto 2em auto;	width:80%;	position:relative;}
	

martinkean

/**
 * Yay!
 */

/* These exercises are for teaching purposes only. */
/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

body {padding:6em; background:#fcfcfc;}
.wrap {width:200px; margin:auto;  z-index:1;}
.msg {  color: whitesmoke;  text-align:center;  font-family: 'Bree Serif', Courier, monospaced;  font-size:3.5em;  width:200px;  position:absolute;  margin:55px 0 0 2px;  pointer-events: none; }

martinkean

/**
 * Walker
 */
 
/* These exercises are for teaching purposes only. */
/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */

.sprite {
	width:500px;
	height:500px;