public
Last active

Jenn cooks breakfast!

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
/**
* 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
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<!-- 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
JSON
1
{"page":"css","view":"split"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.