colored icons update tab 02

<!---paste this under your metas--->

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<!---METAS---->

 <meta name="color:icon1" content="#000000">
 <meta name="color:icon2" content="#000000">
 <meta name="color:icon3" content="#000000">
 <meta name="color:icon4" content="#000000">
 <meta name="color:icon5" content="#000000">

<!----paste the next part under the <style tyle=css>--->

#icon1{

opacity:.9;
padding:5px;
margin-top:-8px;
font-size:10px;
color:{color:icon1};
z-index:9;
}

#icon1 i{
color:{color:icon1};
}


#tab1title{
    font-size:10px;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:1px;
    color:{color:block};
    margin-top:-32px;
    margin-left:20px;
    margin-bottom:5px;
}

#tab1{

    opacity:1;
    font-size:8px;
    color:{color:text};
    background:white;
    text-align:left;
  padding:5px;

}

#tab1box{ /*---DO NOT EDIT ANY OF THIS---*/

    position:absolute;
    margin-top:-40px;
    right: 50%;
    overflow:hidden;
    width:20px;
    height:20px;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;

}

#icon2{

opacity:.9;
padding:5px;
margin-top:-8px;
font-size:10px;
color:{color:icon2};
z-index:9;
}

#icon2 i{
color:{color:icon2};
}


#tab1box:hover{
    padding:10px;
    background:transparent;
    width:100px;
    height:120px;

}

#tab2{
    opacity:1;
    font-size:8px;
    color:{color:text};
    text-align:left;
    padding:5px;

}


#tab2box{ /*---DO NOT EDIT ANY OF THIS---*/
    position:absolute;
    margin-top:-20px;
    right: 50%;
    overflow:hidden;
    width:20px;
    height:20px;
;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;

}
#tab2box:hover{
    padding:10px;
    background:transparent;
    width:120px;
    height:120px;

}

#icon3{

opacity:.9;
padding:5px;
margin-top:-8px;
font-size:10px;
color:{color:icon3};
z-index:9;
}
 #icon3 i{
color:{color:icon3};
}

#tab3{
    opacity:1;
    font-size:8px;
    color:{color:text};
    text-align:left;
    padding:10px;

}

#tab3box{ /*---DO NOT EDIT ANY OF THIS---*/
    position:absolute;
    right: 50%;
    margin-top:0px;
   overflow:hidden;
    width:20px;
    height:20px;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;


}
#tab3box:hover{

    padding:8px;
    background:transparent;
    width:100px;
    height:163px;

}

#icon4{

opacity:.9;
padding:5px;
margin-top:-8px;
font-size:10px;
color:{color:icon4};
z-index:9;
}


 #icon4 i{
color:{color:icon4};
}

#tab4{
    opacity:1;
    font-size:8px;
    color:{color:text};
    text-align:left;
    padding:5px;

}

#tab4box{ /*---DO NOT EDIT ANY OF THIS---*/
    position:absolute;
     right: 50%;
    overflow:hidden;
    margin-top:20px;
    width:20px;
    height:20px;
    z-index:0;

    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;


}
#tab4box:hover{
    padding:10px;
    background:transparent;
    width:100px;
    height:120px;

}
#icon5{

opacity:.9;
padding:5px;
margin-top:-8px;
font-size:10px;
color:{color:icon5};
z-index:9;
}
 #icon5 i{
color:{color:icon5};
}

#tab5{
    opacity:1;
    font-size:8px;
    color:{color:text};
    text-align:left;
    padding:5px;

}

#tab5box{ /*---DO NOT EDIT ANY OF THIS---*/
        position:absolute;
    margin-top:40px;
    right: 50%;
    overflow:hidden;
    width:20px;
    height:20px;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;


}
#tab5box:hover{
    padding:10px;
    background:transparent;
    width:100px;
    height:100px;

}


#holder{

    font-size:10px;
    text-transform:uppercase;
    position:fixed;
    font-family:calibri;
    left:245px;
    background-color:transparent;
    letter-spacing:0px;
    z-index:9999999999999999999;
    top:250px;
}
/*---end updates tab css---*//

PASTE NEXT UNDER <BODY>

 <!---begin updates tab code--->
<div id="holder">
<div id="tab1box">
<div id="icon1"><p><i class="fa fa-moon-o fa-lg"></i></div>
<div id="tab1"><div id="tab1title">updates</div>
<br>



</div></div>

<div id="tab2box">
<div id="icon2"><p><i class="fa fa-bookmark-o fa-lg"></i></div>
<div id="tab2"><div id="tab1title"> currently</div>
<br>

</div></div>

<div id="tab3box">
<div id="icon3"><p><i class="fa fa-star-o fa-lg"></i></div>
<div id="tab3"><div id="tab1title">social</div>
<br>


</div></div>
<div id="tab4box">
<div id="icon4"><p><i class="fa fa-sun-o fa-lg"></i></div>
<div id="tab4"><div id="tab1title">networks</div>
<br>

</div></div>

<div id="tab5box">
<div id="icon5"><p><i class="fa fa-heart-o fa-lg"></i></div>
<div id="tab5"><div id="tab1title">music</div>



</div></div>

</div>
<!---end updates tab code-->