the spike

by midhun_k

HTML

<body>
          <div class = "wrapper">
             <div class = "multunus">
                   <div class = "multunus-content">
                   </div>
             </div>
             <div class = "spoke1">
             </div>
             <div class = "spoke2">
             </div>
             <div class = "spoke3">
             </div>
             <div class = "spoke4">
             </div>
             <div class = "spoke5">
             </div>
             <div class = "spoke6">
             </div>
             <div class = "spoke7">
             </div>
             <div class = "spoke8">
             </div>
             <div class = "spoke9">
             </div>
          </div>
  </body>

CSS

body {  
     background-color:#3d668f;
}

.wrapper{
         width: 100%;         
}

.multunus{
          min-height: 100px;
          width: 100px;
          background: -moz-linear-gradient(top, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 90%, rgba(255,127,4,1) 100%);
          background: -o-linear-gradient(top, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 90%,rgba(255,127,4,1) 100%);
          background: -webkit-linear-gradient(top, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 90%,rgba(255,127,4,1) 100%);
          background: linear-gradient(to bottom, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 90%,rgba(255,127,4,1) 100%);
          -webkit-border-radius: 500px;
          -moz-border-radius: 500px;
          -o-border-radius: 500px;
          border-radius: 50px;
          -webkit-box-shadow: inset 0px 0px 16px #222;
          position: absolute;
          top: 254px;
          left: 570px;
          z-index: 1;
         

}

.spoke1,
.spoke2,
.spoke3,
.spoke4,
.spoke5,
.spoke6,
.spoke7,
.spoke8,
.spoke9{
          min-height: 20px;
          width: 400px;
          background: -moz-linear-gradient(top, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 90%, rgba(255,127,4,1) 100%);
          background: -o-linear-gradient(top, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 90%,rgba(255,127,4,1) 100%);
          background: -webkit-linear-gradient(top, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 90%,rgba(255,127,4,1) 100%);
          background: linear-gradient(to bottom, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 90%,rgba(255,127,4,1) 100%);
          -webkit-border-radius: 3px;
          -webkit-box-shadow: inset 0px 0px 6px #222;
 }
 
 .spoke1{
         -webkit-transform: scale(1.0) rotate(0deg);
         -moz-transform: scale(1.0) rotate(0deg);
         -o-transform: scale(1.0) rotate(0deg);
        ...