كود روابط متحرك بالوان مميز جافا سكربت

<!-- this script is provided by www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.stage{
 height: 350px;
 width: 250px;
 margin-left: auto;
 margin-right: auto;
}
.p{
 font-size: 35px;
 text-align: center;
 margin-top: 0;
 cursor: pointer;
 width: 100%;
 background: #78FED6;
 border-radius: 10px;
 font-family: Century Gothic;
 letter-spacing: 5px;
}
.div{
 margin-left: auto;
 margin-right: auto;
 border-radius: 10px;
 width: 200px;
 height: 40px;
 margin-top: 4%;
transition-duration: 0.2s;

}
.p:hover{
 background: white;
 color: black;
}
.div:nth-child(odd){
 transform: perspective(300px) rotateY(45deg);
 box-shadow: -2px 2px 7px gray;
}
.div:nth-child(even){
 transform: perspective(300px) rotateY(-45deg);
   box-shadow: 2px 2px 7px gray;
}
.div:hover{
 transform: rotateY(0);
 background: white;
 color: black;
 box-shadow: 0px 0px 0px;
}
</style>
<section class="stage">
 <div id="home" class="div"><p id="homep" class="p">Home</p></div>
 <div class="div" id="about"><p class="p">About</p>
 </div>
 <div class="div" id="contact"><p class="p">Gallery</p>
 </div>
 <div class="div" id="gallery"><p class="p">Contact</p>
 </div>

<style>
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.stage{
 height: 350px;
 width: 250px;
 margin-left: auto;
 margin-right: auto;
}
.p{
 font-size: 35px;
 text-align: center;
 margin-top: 0;
 cursor: pointer;
 width: 100%;
 background: #FFD28E; لون الخلفيه المقدمه
 border-radius: 10px;
 font-family: Century Gothic;
 letter-spacing: 5px;
}
.div{
 margin-left: auto;
 margin-right: auto;
 border-radius: 10px;
 width: 200px;
 height: 40px;
 margin-top: 4%;
transition-duration: 0.2s;

}
.p:hover{
 background: white; لون الخلفيه
 color: black; لون الخط
}
.div:nth-child(odd){
 transform: perspective(300px) rotateY(45deg);
 box-shadow: -2px 2px 7px gray;
}
.div:nth-child(even){
 transform: perspective(300px) rotateY(-45deg);
   box-shadow: 2px 2px 7px gray;
}
.div:hover{
 transform: rotateY(0);
 background: white; لون الخلفيه
 color: black; لون الخط
 box-shadow: 0px 0px 0px;
}
</style>
<section class="stage">
 <div id="home" class="div"><p id="homep" class="p">الرئيسيه</p></div>
 <div class="div" id="about"><p class="p">المدونه</p>
 </div>
 <div class="div" id="contact"><p class="p">المنتدى</p>
 </div>
 <div class="div" id="gallery"><p class="p">الخدمات</p>
 </div>