martinkean · July 4, 2016 06:13
diff --git a/dabblet.css b/dabblet.css
 /**
 * 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; }

 .sticker {  width:200px;  height:200px;  position:absolute;  background: url(http://martinkean.com/kidscon/yay/sticker.png) top center no-repeat;   
 	
 	//animation: spin 10s linear infinite;  
 }

 @keyframes spin { 100%{transform: rotate(1turn);} }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
 <div class="wrap">  
 	<div class="sticker"></div>  
 	<div class="msg">yay!</div>
 </div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* 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; }

	.sticker { width:200px; height:200px; position:absolute; background: url(http://martinkean.com/kidscon/yay/sticker.png) top center no-repeat;

	//animation: spin 10s linear infinite;
	}

	@keyframes spin { 100%{transform: rotate(1turn);} }
	<!-- content to be placed inside <body>…</body> -->

	<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
	<div class="wrap">
	<div class="sticker"></div>
	<div class="msg">yay!</div>
	</div>