bird.html

<style>
#twitter{
  width:500px;
  height:400px;
  position:relative;
}

#main{
   width: 380px;
   height: 380px;
   background:#00aceb;
   opacity: 1;
   border-radius: 380px;
   position: absolute;
   top: -47px;
   left: 17px; 
   z-index:1;
}

#main_cut{
  width: 340px;
  height: 340px;
  background:white;
  opacity: 1;
  border-radius: 340px;
  position: absolute;
  top: 10px;
  left: -76px; 

}

#big_feather{
  width: 145px;
  height: 145px;
  background:#00aceb;
  opacity: 1;
  border-radius: 150px;
  position: absolute;
  top: 39px;
  left: 117px;
  z-index:4;
}
#big_feather_cut{
  width: 355px;
  height: 355px;
  background:white;
  opacity: 1;
  border-radius: 350px;
  position: absolute;
  top: -245px;
  left: -27px;
}

#mid_feather{
  width: 145px;
  height: 145px;
  background:#00aceb;
  opacity: 1;
  border-radius: 150px;
  position: absolute;
  top: 85px;
  left: 115px;
  z-index:3;
}

#mid_feather_cut{
  width: 355px;
  height: 355px;
  background:white;
  opacity: 1;
  border-radius: 350px;
  position: absolute;
  top: -268px;
  left: -113px;
}

#small_feather{
  width: 145px;
  height: 145px;
  background:#00aceb;
  opacity: 1;
  border-radius: 150px;
  position: absolute;
  top: 131px;
  left: 135px;
  z-index:2;
}

#small_feather_cut{
  width: 355px;
  height: 355px;
  background:white;
  opacity: 1;
  border-radius: 350px;
  position: absolute;
  top: -257px;
  left: -162px;
}

#head{
  width: 134px;
  height: 134px;
  background:#00aceb;
  opacity: 1;
  border-radius: 134px;
  position: absolute;
  top: 67px;
  left: 263px;
  z-index: 9;
}

#bottom_beak {
  width: 380px;
  height: 380px;
  background:#00aceb;
  opacity: 1;
  border-radius: 380px;
  position: absolute;
  top: -206px;
  left: -210px;
  z-index: 5;
}


#bottom_beak_cut {
  width: 380px;
  height: 380px;
  background: white;
  opacity: 1;
  border-radius: 380px;
  position: absolute;
  top: -63px;
  left: 81px;
  z-index: 6;
}


#top_beak {
  width: 110px;
  height: 110px;
  background:#00aceb;
  opacity: 1;
  border-radius: 110px;
  position: absolute;
  top: 4px;
  left: 12px;
  z-index: 7;
}

#top_beak_cut {
  width: 340px;
  height: 340px;
  background: white;
  opacity: 1;
  border-radius: 340px;
  position: absolute;
  top: -252px;
  left: -142px;
  z-index: 8;

}

#beak{
  position: absolute;
  top: 0px;
  left: 299px;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
#back{
  width: 100px;
  height: 100px;
  background:#00aceb;
  opacity: 1;
  border-radius: 100px;
  position: absolute;
  top: 118px;
  left: 214px;
  z-index: 4;
}
​
</style>
<div id="twitter">
    <div id="main">
        <div id="main_cut"></div>        
    </div>
    <div id="back"></div>        
    <div id="big_feather">
        <div id="big_feather_cut"></div>
    </div>   
    <div id="mid_feather">
        <div id="mid_feather_cut"></div>        
    </div>  
    <div id="small_feather">
        <div id="small_feather_cut"></div>            
    </div>  
    <div id="head"></div>
    <div id="beak">
        <div id="bottom_beak">
            <div id="bottom_beak_cut"></div>
        </div>
        <div id="top_beak">
            <div id="top_beak_cut"></div>
        </div>
    </div>
</div>​