Mys2010 on Codepen

Memasang Kode Lyrics Lagu Beside Me
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {font-family:"vivaldi";font-size: 1px;left: 130px;color: #000;margin-top:19px;height:100%;overflow:hidden;}
body {
background:#de0f91;} 
body {      
  text-shadow: 
    0 0 .4em currentcolor, 
    0 0 .35em yellow,
    0 0 .5em orange,
    0 0 1em red,
    0 0 2em white;
} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top:-4px;
  width: 100%;
text-align: center;
font-size:  6px;
background: linear-gradient(270deg,  #333, #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60));
  border-bottom: 3px solid #333;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height: 70px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size:  11px;
background: linear-gradient(270deg,  rgba(255, 0, 0, 0.60), #660099, rgba(255, 0, 0, 0.60), #660099,#660, #B20000, #660, #660099, rgba(255, 0, 0, 0.60), #660099,  rgba(255, 0, 0, 0.60));
border-top: 2px solid rgba(46, 56, 79, 0.85);
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #333 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
} 
/*Text Bawah1*/  
M-2010, #teks, #posisi, #dibawah, span {
  font: 900 15vw Raleway;
  position: relative;
  display: inline-block;
}
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:28px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px rgba(255, 0, 0, 0.8),
 0 5px 15px rgba(0, 0, 0, 0.90), 0 0 50px rgba(0, 0, 0, 0.90),
 0 -10px 2px rgba(255, 0, 0, 0.8);
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}

.shadow-top:after { 
    content: " ";
    box-shadow: 0 0 200px 80px #FFFF00;  
  
}
.shadow-top:before {  
    content: " ";
    box-shadow: 0 0 200px 250px #de0f91;    
}
#M2010-shadow  { 
margin:-110px;
box-shadow: 0 0 150px 80px  #FEE680;  
}
.shadow1:before,.shadow1:after {
    z-index:-1;
    position:absolute;
    content: " ";
    bottom:25px;
    left:10px;
    width:50%;     
    max-width:110px;
    box-shadow: 0 0 200px 90px rgba(255, 0, 0, 0.90);  
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    -o-transform:rotate(-8deg);
    -ms-transform:rotate(-8deg);
    transform:rotate(-8deg);
}
.shadow1:after {
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);
    -o-transform:rotate(8deg);
    -ms-transform:rotate(8deg);
    transform:rotate(8deg);
    right:10px;
    left:auto;
}

.Absolute-Center {
 margin: auto;
 position:relative;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
}
h3 {
 height: 60px;
 color: #006B6B;
 letter-spacing: 10px;
 line-height: normal;
 text-align: center;
 z-index: 300;
 padding-bottom: 16%;
 margin: auto;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 font-size: 4em;
 font-size: 4.5vw;
 font-family: 'Dancing Script', cursive;
 text-shadow: 0px 3px 0px #b2a98f,  0px 14px 10px rgba(0,0,0,0.15),  0px 24px 2px rgba(0,0,0,0.1),  0px 34px 30px rgba(0,0,0,0.1);
}
.hidden {
 display: none
}
.animated {
 visibility: visible !important;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
 -webkit-backface-visibility: visible !important;
 backface-visibility: visible !important;
}
/* PULL SOFT */
.pullSoftIn {
 -webkit-animation-name: pullSoftIn;
 animation-name: pullSoftIn;
}
@-webkit-keyframes pullSoftIn {
 from {
 -webkit-transform: scale(.9);
 opacity: 0;
}
}
@keyframes pullSoftIn {
 from {
 transform: scale(.9);
 opacity: 0;
}
}
.pullSoftOut {
 -webkit-animation-name: pullSoftOut;
 animation-name: pullSoftOut;
}
@-webkit-keyframes pullSoftOut {
 to {
 -webkit-transform: scale(.9);
 opacity: 0;
}
}
@keyframes pullSoftOut {
 to {
 transform: scale(.9);
 opacity: 0;
}
}
.pushSoftIn {
 -webkit-animation-name: pushSoftIn;
 animation-name: pushSoftIn;
}
@-webkit-keyframes pushSoftIn {
 from {
 -webkit-transform: scale(1.1);
 opacity: 0;
}
}
@keyframes pushSoftIn {
 from {
 transform: scale(1.1);
 opacity: 0;
}
}
.pushSoftOut {
 -webkit-animation-name: pushSoftOut;
 animation-name: pushSoftOut;
}
@-webkit-keyframes pushSoftOut {
 to {
 -webkit-transform: scale(1.1);
 opacity: 0;
}
}
@keyframes pushSoftOut {
 to {
 transform: scale(1.1);
 opacity: 0;
}
}
/* ====================================================================== *
     Animation 
 * ====================================================================== */

.spinning {
 -webkit-animation: spinaround 8s infinite linear;
 animation: spinaround 8s infinite linear;
}
 @-webkit-keyframes spinaround {
 to {
-webkit-transform:rotateY(360deg)
}
}
@keyframes spinaround {
 to {
transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
}
}
/* ROTATE EDGE IN */
.roEdgeUpIn {
 -webkit-animation-name: roEdgeUpIn;
 animation-name: roEdgeUpIn;
 -webkit-animation-duration: 5s;
 animation-duration: 5s;
 -webkit-animation-delay: 1s;
 animation-delay: 1s;
}
@-webkit-keyframes roEdgeUpIn {
 0% {
 opacity: 0;
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px) rotateX(-90deg);
}
 100% {
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px);
}
}
@keyframes roEdgeUpIn {
 0% {
 opacity: 0;
 transform-origin: 50% 0;
 transform: perspective(1200px) rotateX(-90deg);
}
 100% {
 transform-origin: 50% 0;
 transform: perspective(1200px);
}
}
.roEdgeUpOut {
 -webkit-animation-name: roEdgeUpOut;
 animation-name: roEdgeUpOut;
 -webkit-animation-duration: 5s;
 animation-duration: 3s;
}
@-webkit-keyframes roEdgeUpOut {
 0% {
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px);
}
 100% {
 opacity: 0;
 -webkit-transform-origin: 50% 0;
 -webkit-transform: perspective(1200px) rotateX(-90deg);
}
}
@keyframes roEdgeUpOut {
 0% {
 transform-origin: 50% 0;
 transform: perspective(1200px);
}
 100% {
 opacity: 0;
 transform-origin: 50% 0;
 transform: perspective(1200px) rotateX(-90deg);
}
}
.roTwistUpOut {
 -webkit-animation-name: roTwistUpOut;
 animation-name: roTwistUpOut;
 -webkit-animation-timing-function: ease-in;
 animation-timing-function: ease-in;
}
@-webkit-keyframes roTwistUpOut {
 0% {
 opacity: 1;
 -webkit-transform-origin: 50% 50% -800px;
 -webkit-transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
}
 100% {
 opacity: 0;
 -webkit-transform-origin: 50% 50% -800px;
 -webkit-transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
}
}
@keyframes roTwistUpOut {
 0% {
 opacity: 1;
 transform-origin: 50% 50% -800px;
 transform: perspective(800px) translate3d(0, 0, -800px) rotateY(0) scale(1);
}
 100% {
 opacity: 0;
 transform-origin: 50% 50% -800px;
 transform: perspective(800px) translate3d(0, -200%, -800px) rotateY(1080deg) scale(0);
}
}
/* ROTATE TWIST IN */
.roTwistLeftIn {
 -webkit-animation-name: roTwistLeftIn;
 animation-name: roTwistLeftIn;
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
@-webkit-keyframes roTwistLeftIn {
 0% {
 opacity: 0;
 -webkit-transform-origin: 50% 50% -400px;
 -webkit-transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
}
 100% {
 opacity: 1;
 -webkit-transform-origin: 50% 50% -400px;
 -webkit-transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
}
}
@keyframes roTwistLeftIn {
 0% {
 opacity: 0;
 transform-origin: 50% 50% -400px;
 transform: perspective(800px) translate3d(-200%, 0, -400px) rotateX(1080deg) scale(0);
}
 100% {
 opacity: 1;
 transform-origin: 50% 50% -400px;
 transform: perspective(800px) translate3d(0, 0, -400px) rotateX(0) scale(1);
}
}
.roTwistRightIn {
 -webkit-animation-name: roTwistRightIn;
 animation-name: roTwistRightIn;
 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;
}
.fadeIn {
 -webkit-animation-name: fadeIn;
 animation-name: fadeIn;
 -webkit-animation-duration: 7s;
 animation-duration: 7s;
}
@-webkit-keyframes fadeIn {
 from {
opacity: 0;
}
}
@keyframes fadeIn {
 from {
opacity: 0;
}
}
.fadeOut {
 -webkit-animation-name: fadeOut;
 animation-name: fadeOut;
 -webkit-animation-duration: 7s;
 animation-duration: 7s;
}
@-webkit-keyframes fadeOut {
 to {
opacity: 0;
}
}
@keyframes fadeOut {
 to {
opacity: 0;
}
}
.player_container {position:absolute;top:5%;right:5%;font-weight:bold;text-align:center;letter-spacing:2px;z-index:500;}
p.track {
letter-spacing:2px;
font-weight:bold;
  color: #ffffff;
}
p.track span {
  color: #999999;
}
.container {margin:50px;}
button {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.2s ease 0;
  transition: all 0.2s ease 0;
}
button[data-am-button^="large"] {
  width: 60px;
  height: 60px;
  margin: 0 5px;
}
button[data-am-button^="large"] i {
  font-size: 25px;
}
button[data-am-button^="small"] {
  width: 40px;
  height: 40px;
}
button[data-am-button^="small"] i {
  font-size: 14px;
}
button:hover {
  color: #999999;
  border-color: #999999;
}
button:focus {
  outline: none;
}
#progress-bar {
  width: 100%;
  background-color: #c20315;
  height: 5px;
  position: relative;
  margin: 1em 0;
}
#progress-bar #progress {
  background-color: blue;
  height: 5px;
  position: absolute;
  left: 0;
  -webkit-transition: width 2.5s linear 0;
  transition: width 2.5s linear 0;
}

.spinning {
color: #000;
text-align: center;
margin: auto;
font-size: 44em;
font-family: 'Dancing Script', cursive;
text-shadow: 0px 3px 0px #b2a98f,  0px 14px 10px rgba(0,0,0,0.15),  0px 24px 2px rgba(0,0,0,0.1),  0px 34px 30px rgba(0,0,0,0.1);
 -webkit-animation: spinaround 38s infinite linear;
 animation: spinaround 38s infinite linear;
}
 @-webkit-keyframes spinaround {
 to {
-webkit-transform:rotateY(360deg)
}
}
@keyframes spinaround {
 to {
transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
}
}

.wrapper {
  position: relative;
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
}
.popup {
  position: absolute;
  top: 270px;
  left: 50%;
  width: 50%;
  height: 300px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);

}
.popup__close {
  position: absolute;
background: -webkit-linear-gradient(transparent 210%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 210%, #dad 50%, transparent 90%); 
-webkit-animation: shadow 1s ease-in-out infinite;
          animation: shadow 1s ease-in-out infinite;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.popup.is-moved {
  -webkit-animation: slide-down 0.125s ease-in-out forwards;
          animation: slide-down 0.125s ease-in-out forwards;
}

@-webkit-keyframes slide-down {
  0% {
    top: 50%;
    -webkit-transform: translate( -50%,  -50%);
            transform: translate( -50%,  -50%);
    box-shadow: 0 0 0px 999px rgba(0, 0, 0, 0.7);
  }
  5% {
    box-shadow: none;
  }
  40% {
    width: 50%;
    height: 300px;
  }
  80% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 1;
  }
  100% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 0;
  }
}
@keyframes slide-down {
  0% {
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    box-shadow: 0 0 0px 999px rgba(0, 0, 0, 0.7);
  }
 5% {
    box-shadow: none;
  }
  40% {
    width: 50%;
    height: 300px;
  }
  80% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 1;
  }
  100% {
    top: 100%;
    width: 100%;
    height: 60px;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    box-shadow: none;
    opacity: 0;
  }
}
</style> 

<div align="center" style="margin-top:110px">
<div class="shadow1">
</div>
<div id="M2010-shadow">
</div>
<div align="center">
<div class="shadow-top">
</div>
<div class="M-logo"> 
</div>
</div></div>
  </div></div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
 <audio id="player" preload="auto">
  <source src="https://sites.google.com/site/emanloveforplace/tempatlagu/Don-Williams-Besideme-cover-M2010s.mp3">
  </source></h2>
</a></div>
</div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">LET'S STUDY</a>  </h2>
</a>  
</div>
</header>

<!-- Lyrics -->
<section id="peace">   
  <!-- FIRST VERSE -->  
  <h3 id="ivespent" class="lyrics animated hidden">I've spent my life <br>looking for you</h3>
  <h3 id="Finding1" class="lyrics animated hidden">Finding my way <br>wasn't easy to do</h3>
  <h3 id="iknow1" class="lyrics animated hidden">I know <br>there was your all the while </h3>
  <h3 id="andits1" class="lyrics animated hidden">And it's <br>been worth every mile</h3>
  <h3 id="Solaydown1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Loveme" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissall" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Hold" class="lyrics animated hidden">Hold me so close<br> that I feel your heartbeat<br> & don't ever wander away</h3>
  <h3 id="Mornings2" class="lyrics animated hidden">Mornings & evenings <br>all were the same</h3>
  <h3 id="andthere2" class="lyrics animated hidden">And there was <br>no music till I heard your name</h3>  
  <!-- SECOND VERSE -->
  
  <h3 id="but1knew1" class="lyrics animated hidden">But I knew <br>when I saw you smile</h3>
  <h3 id="andNow1" class="lyrics animated hidden">And Now <br>I can rest for awhile</h3>
  <h3 id="Solaydownb1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Lovemeandhide1" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissallthehurtin1" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Holdmesoclose1" class="lyrics animated hidden">Hold me so close </h3>
  <h3 id="thatIfeel1" class="lyrics animated hidden"> that I feel your heartbeat</h3>
  <h3 id="don1" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Chorus3" class="lyrics animated hidden"><span style="color:#B20000">&hearts; &hearts; </h3>
  <h3 id="Holdmesoclose3" class="lyrics animated hidden">Hold me so close</h3>  
  <!-- THIRD VERSE -->  
  <h3 id="heartbeat2" class="lyrics animated hidden">that I feel your heartbeat</h3>
  <h3 id="away2" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Williams2" class="lyrics animated hidden">By. Don Williams <br>Lay Down Beside Me</h3>
  <h3 id="Edited2" class="lyrics animated hidden">Edited by. <br>M2010 Cibeber Cimahi</h3>
  <h3 id="Sule2" class="lyrics animated hidden"></h3>
  <h3 id="bemine" class="lyrics animated hidden">Happy <br>Valentines Day</h3>
</section>

<!-- Lyrics -->
<section id="peace">   
  <!-- FIRST VERSE -->  
  <h3 id="ivespent" class="lyrics animated hidden">I've spent my life <br>looking for you</h3>
  <h3 id="Finding1" class="lyrics animated hidden">Finding my way <br>wasn't easy to do</h3>
  <h3 id="iknow1" class="lyrics animated hidden">I know <br>there was your all the while </h3>
  <h3 id="andits1" class="lyrics animated hidden">And it's <br>been worth every mile</h3>
  <h3 id="Solaydown1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Loveme" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissall" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Hold" class="lyrics animated hidden">Hold me so close<br> that I feel your heartbeat<br> & don't ever wander away</h3>
  <h3 id="Mornings2" class="lyrics animated hidden">Mornings & evenings <br>all were the same</h3>
  <h3 id="andthere2" class="lyrics animated hidden">And there was <br>no music till I heard your name</h3>  
  <!-- SECOND VERSE -->
  
  <h3 id="but1knew1" class="lyrics animated hidden">But I knew <br>when I saw you smile</h3>
  <h3 id="andNow1" class="lyrics animated hidden">And Now <br>I can rest for awhile</h3>
  <h3 id="Solaydownb1" class="lyrics animated hidden">So lay down beside me</h3>
  <h3 id="Lovemeandhide1" class="lyrics animated hidden">Love me and hide me</h3>
  <h3 id="Kissallthehurtin1" class="lyrics animated hidden">Kiss all the hurtin <br>of this world away</h3>
  <h3 id="Holdmesoclose1" class="lyrics animated hidden">Hold me so close </h3>
  <h3 id="thatIfeel1" class="lyrics animated hidden"> that I feel your heartbeat</h3>
  <h3 id="don1" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Chorus3" class="lyrics animated hidden"><span style="color:#B20000">&hearts; &hearts; </h3>
  <h3 id="Holdmesoclose3" class="lyrics animated hidden">Hold me so close</h3>  
  <!-- THIRD VERSE -->  
  <h3 id="heartbeat2" class="lyrics animated hidden">that I feel your heartbeat</h3>
  <h3 id="away2" class="lyrics animated hidden">& don't ever wander away</h3>
  <h3 id="Williams2" class="lyrics animated hidden">By. Don Williams <br>Lay Down Beside Me</h3>
  <h3 id="Edited2" class="lyrics animated hidden">Edited by. <br>M2010 Cibeber Cimahi</h3>
  <h3 id="Sule2" class="lyrics animated hidden"></h3>
  <h3 id="bemine" class="lyrics animated hidden">Happy <br>Valentines Day</h3>
</section>

 <div class="wrapper">
  <div class="popup">
 <font size="5" color="blue"face="arial">
    <div class="popup__close"> X</div></font>
<div id="opening_screen" class="animated">
<div class="spinning">by. Don Williams<br> Lay Down Beside Me <br> Cover by. <br>Alison K & John Waite</h3>
</div>
  </div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>$('.popup__close').on('click', function () {
    $('.popup').toggleClass('is-moved');
    window.setTimeout(function () {
        $('.sticky').css('opacity', 1);
    }, 500);
}); 
</script>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-53beeb1a007ec32040abaf4c9385ebfc.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script> 
 
// BEGIN AUDIO SYNCHING
// Using jQuery to add event listener to the audio element and toggle classes based on the current time in seconds.   If anyone knows a way to change the default timing in Adobe to display seconds and/or mili-seconds, please let me know.  It's simple math, but cuttinng and pasting time markers would  be so easy.
var audioElement = document.getElementById('player');
var lastTime = 0;
audioElement.addEventListener('timeupdate', function(e) {
 var nowTime = this.currentTime;
 //Check if just passed the 1.4 second time mark.
 if (nowTime > 10 && lastTime < 10){
  $("#peace h2").siblings().addClass('hidden').removeClass('pushSoftOut');
  $("#heart").addClass('hidden').removeClass('pushSoftIn');}
 // ivespent
 if (nowTime > 20 && lastTime < 20) {
   $('#ivespent').toggleClass('pushSoftIn hidden');}
 // Finding
 if (nowTime > 30 && lastTime < 30) {
  $('#Finding1').toggleClass('pushSoftIn hidden');
   $('#ivespent').toggleClass('pushSoftIn pushSoftOut');}
 // iknow1
 if (nowTime > 42 && lastTime < 42) {
  $('#iknow1').toggleClass('pushSoftIn hidden');
   $('#Finding1').toggleClass('pushSoftIn pushSoftOut');}
 // andits
 if (nowTime > 53 && lastTime < 53) {
  $('#andits1').toggleClass('pushSoftIn hidden');
   $('#iknow1').toggleClass('pushSoftIn pushSoftOut');}
 // Solaydown
 if (nowTime > 63 && lastTime < 63) {
  $('#Solaydown1').toggleClass('pushSoftIn hidden');
   $('#andits1').toggleClass('pushSoftIn pushSoftOut');}
 // Loveme
 if (nowTime > 70 && lastTime < 70) {
  $('#Loveme').toggleClass('pushSoftIn hidden');
   $('#Solaydown1').toggleClass('pushSoftIn pushSoftOut');}
 // Kissall
 if (nowTime > 75 && lastTime < 75) {
  $('#Kissall').toggleClass('pushSoftIn hidden');
   $('#Loveme').toggleClass('pushSoftIn pushSoftOut');}
 // Hold
 if (nowTime > 85 && lastTime < 85) {
  $('#Hold').toggleClass('pushSoftIn hidden');
   $('#Kissall').toggleClass('pushSoftIn pushSoftOut');}
 //  Mornings  - 2
 if (nowTime > 107 && lastTime < 107) {
  $('#Mornings2').toggleClass('pushSoftIn hidden');
   $('#Hold').toggleClass('pushSoftIn pushSoftOut');}
 // andthere - 2
 if (nowTime > 116 && lastTime < 116) {
  $('#andthere2').toggleClass('pushSoftIn hidden');
   $('#Mornings2').toggleClass('pushSoftIn pushSoftOut');}
 // but1knew
 if (nowTime > 129 && lastTime < 129) {
  $('#but1knew1').toggleClass('pushSoftIn hidden');
   $('#andthere2').toggleClass('pushSoftIn pushSoftOut');}
 // andNow
 if (nowTime > 139 && lastTime < 139) {
  $('#andNow1').toggleClass('pushSoftIn hidden');
   $('#but1knew1').toggleClass('pushSoftIn pushSoftOut');}
 // Solaydownb
 if (nowTime > 151 && lastTime < 151) {
  $('#Solaydownb1').toggleClass('pushSoftIn hidden');
   $('#andNow1').toggleClass('pushSoftIn pushSoftOut');}
 // Lovemeandhide
 if (nowTime > 157 && lastTime < 157) {
   $('#Lovemeandhide1').toggleClass('pushSoftIn hidden');
  $('#Solaydownb1').toggleClass('pushSoftIn pushSoftOut');}
 // Kissallthehurtin
 if (nowTime > 162 && lastTime < 162) {
  $('#Kissallthehurtin1').toggleClass('pushSoftIn hidden');
   $('#Lovemeandhide1').toggleClass('pushSoftIn pushSoftOut');}
 // Holdmesoclose
 if (nowTime > 172 && lastTime < 172) {
  $('#Holdmesoclose1').toggleClass('pushSoftIn hidden');
   $('#Kissallthehurtin1').toggleClass('pushSoftIn pushSoftOut');}
 // thatIfeel
 if (nowTime > 179 && lastTime < 179) {
  $('#thatIfeel1').toggleClass('pushSoftIn hidden');
   $('#Holdmesoclose1').toggleClass('pushSoftIn pushSoftOut');}
 // don
 if (nowTime > 184 && lastTime < 184) {
  $('#don1').toggleClass('pushSoftIn hidden');
   $('#thatIfeel1').toggleClass('pushSoftIn pushSoftOut');}
 // Chorus
 if (nowTime > 193 && lastTime < 193) {
  $('#Chorus3').toggleClass('pushSoftIn hidden');
   $('#don1').toggleClass('pushSoftIn pushSoftOut');}
 // Holdmesoclose - 3
 if (nowTime > 212 && lastTime < 212) {
  $('#Holdmesoclose3').toggleClass('pushSoftIn hidden');
   $('#Chorus3').toggleClass('pushSoftIn pushSoftOut');}
 // THIRD VERSE   heartbeat
 if (nowTime > 216 && lastTime < 216) {
   $('#heartbeat2').toggleClass('pushSoftIn hidden');
   $('#Holdmesoclose3').toggleClass('pushSoftIn pushSoftOut');}
 // away
 if (nowTime > 221 && lastTime < 221) {
   $('#away2').toggleClass('pushSoftIn hidden');
   $('#heartbeat2').toggleClass('pushSoftIn pushSoftOut');}
 // Williams
 if (nowTime > 229 && lastTime < 229) {
  $('#Williams2').toggleClass('pushSoftIn hidden');
  $('#away2').toggleClass('pushSoftIn pushSoftOut');}

 // Edited
 if (nowTime > 234 && lastTime < 234) {
  $('#Edited2').toggleClass('pushSoftIn hidden');
   $('#Williams2').toggleClass('pushSoftIn pushSoftOut');}
 
        // Sule
 if (nowTime > 240 && lastTime < 240) {
   $('#Sule2').toggleClass('pushSoftIn hidden');
  $('#Edited2').toggleClass('pushSoftIn pushSoftOut');}  
 

 if (nowTime > 242 && lastTime < 242) {
  $('#bemine').toggleClass('roEdgeUpIn hidden');}
 lastTime = nowTime;});       
    </script>

 
<music>
<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>    
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>   
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>    
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>                        

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();
}}    
</script> 

Audio Code by. Jereme Causing
Falling in Love Code by. Mark Sottek

Design Code is Edited by. Mys2010 on Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Lyrics Lagu Beside Me