Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Jenn cooks breakfast!
* Jenn cooks breakfast!
* A collection of breakfast foods illustrated using CSS. Coded for fun while taking 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;}
<!-- EGGIES -->
<div id="eggs">
<div class="whites"> </div>
<div class="yolk"> </div>
<!-- OH RAHNGGG -->
<div id="orange">
<div class="fruit"> </div>
<div class="stem"> </div>
<div class="leaf"> </div>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment