Css Burger nyam-nyam sebelum puasa ramadhan




body { background-color: #2b968c; }

#bun {
 position: relative;
 top: 0px;
 margin: 0 auto;
 width: 500px;
 overflow: hidden;
}
#top {
 position: relative;
 z-index: 9;
 height: 190px;
 -moz-border-radius: 107px 107px 45px 45px / 119px 119px 75px 75px;
 -webkit-border-radius: 107px 107px 45px 45px / 119px 119px 75px 75px;
 border-radius: 107px 107px 45px 45px / 119px 119px 75px 75px;
 -moz-box-shadow: 0 5px 10px rgba(102,76,0,.3);
 -webkit-box-shadow: 0 5px 10px rgba(102,76,0,.3);
 box-shadow: 0 5px 10px rgba(102,76,0,.3);
 background-color: #ffbe00;

}
#seasame {
 position: absolute;
 top: 20px;
 left: 30px;
 height: 130px;
 width: 375px;
 border: 10px solid #ffe391;
 border-width: 10px 0 0 10px;
 -moz-border-radius: 75px;
 -webkit-border-radius: 75px;
 border-radius: 75px;
}
.tomato {
 float: left;
 position: relative;
 z-index: 8;
 margin: -7px 0 0 30px;
 height: 30px;
 width: 212px;
 border: solid 25px #ee4036;
 border-width: 0 5px 25px;
 -moz-border-radius: 0 0 43px 43px / 0 0 50px 50px;
 -webkit-border-radius: 0 0 43px 43px / 0 0 50px 50px;
 border-radius: 0 0 43px 43px / 0 0 50px 50px;
 background-color: #b33029;
}
.tomato:nth-child(3) { margin-left: -2px; }
#lettuce {
 position: relative;
 z-index: 7;
 clear: left;
 top: -45px;
 margin: 0 auto;
 height: 55px;
 width: 490px;
 border: solid 35px #b1d918;
 border-width: 0 2px 35px;
 -moz-border-radius: 60px;
 -webkit-border-radius: 60px;
 border-radius: 60px;
 background-color: #85a312;
}
.leaf {
 position: relative;
 z-index: 6;
 float: left;
 top: -100px;
 left: 75px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 height: 100px;
 width: 100px;
 background-color: #b1d918;
}
.big {
 top: -105px;
 left: 120px;
 width: 215px;
}
#meat {
 position: relative;
 z-index: 5;
 clear: left;
 top: -180px;
 left: 3px;
 height: 90px;
 width: 494px;
 border: solid 40px #9c3d00;
 border-width: 0 2px 40px;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 -moz-box-shadow: 0 5px 10px rgba(117,46,0,.2);
 -webkit-box-shadow: 0 5px 10px rgba(117,46,0,.2);
 box-shadow: 0 5px 10px rgba(117,46,0,.2);
 background-color: #752e00;
}
#bottom {
 position: relative;
 z-index: 4;
 top: -250px;
 height: 100px;
 border: solid 40px #ffbe00;
 border-width: 0 2px 40px;
 -moz-border-radius: 110px;
 -webkit-border-radius: 110px;
 border-radius: 110px;
 background-color: #ff8e00;
}
#shadow {
 position: relative;
 z-index: 3;
 top: -262px;
 margin: 0 auto;
 height: 30px;
 width: 520px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
 background-color: #207169;
}

#table { text-indent: -9999em; }


<p>Mmmmm... tasty burger!</p>

<div id="table">-cloth, it's a picnic.
  <div id="top">
   <div id="seasame"></div>
   <div id="seasame">toasted</div>
  <div class="tomato"></div>
  <div class="tomato">fresh</div>
  <div class="tomato">juicy</div>
  <div id="lettuce">crisp</div>
   <div class="leaf big"></div>
  <div id="meat"></div>
  <div id="meat">medium</div>
  <div id="bottom">toasted</div>
 <div id="shadow"></div>
</div>


Assalamukalaikum Wr.Wb

1. Css : 80%

2. JQuery : 95%

3. Java Script : 100%

4. Css3 : 67%