Jenn cooks breakfast!

dabblet.css

/**
 * Jenn cooks breakfast!
 * A collection of breakfast foods illustrated using CSS. Coded for fun while taking Dabblet.com for a test-run.
 **/

html { background: #efefef; }

body { margin: 50px; }

div { position: relative; }

#eggs, #orange, #toast { float: left;  margin: 30px; border: 1px dashed #aaa; }

#eggs { width: 300px; height: 200px; }
	.whites { border: 1px solid #333; width: 300px; height: 200px; border-radius: 300px / 200px; }	
	.yolk { position: absolute; top: 40px; left: 50px; width: 110px; height: 100px; border-radius: 100px / 90px; background: #f6d271;}
	
#orange { width: 200px; height: 230px;}
	.fruit { position: absolute; top: 30px; width: 200px; height: 200px; background: #f29122; border-radius: 300px; }
	.stem { position: absolute; top: 0; left: 100px; width: 5px; height: 30px; background: #247f2c; }
	.leaf { position: absolute; top: 0; left: 100px; width: 40px; height: 20px; background: #247f2c; border-radius: 20px / 10px; }
	
#toast { widtH: 270px; height: 260px;}
	.bread { position: absolute; top: 30px; left: 10px; width: 250px; height: 230px; background: #9e6542; }
	.crust { position: absolute; top: 0; width: 140px; height: 50px; background: #9e6542; border-radius: 70px; }
		.crust.left {}
		.crust.right { left: 130px}
	.butter { position: absolute; top: 70px; left: 50px; width: 70px; height: 70px; background: #fac738; }
		.butter.left {}
		.butter.right { left: 150px; top: 150px; width: 60px; height: 60px;}

dabblet.html

<!-- EGGIES -->
<div id="eggs">
	<div class="whites"> </div>
	<div class="yolk"> </div>
</div>

<!-- OH RAHNGGG -->
<div id="orange">
	<div class="fruit"> </div>
	<div class="stem"> </div>
	<div class="leaf"> </div>
</div>

<!-- YOU'RE BROWN BREAD! -->
<div id="toast">
	<div class="bread"> </div>
	<div class="crust left"> </div>
	<div class="crust right"> </div>
	<div class="butter left"> </div>
	<div class="butter right"> </div>
</div>

settings.json

{"page":"css","view":"split"}