This code first displays an alert dialog that is played by clicking on any price from the music page. Then the screen turns colored and the background color changes to a gradient. Text is also displayed automatically. The color of this text is pink with gradient. This text appears at the bottom of the page and then disappears and another text is displayed. Clicking anywhere on the music screen will be displayed automatically.
HTML
<!-- This script got from www.devanswer.com -->
<div class="medly">
<div class="a">🏅The best site in the world🏅</div>
<div class="b">
<br><br><br><br><br>
Hello friends, thank you for choosing our site
</div>
<audio id="music">
<source src="http://www.devanswer.com/codes/files/audio-code.mpeg" type="audio/mpeg" />
</audio>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
body {
background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
.medly {
position: relative;
text-align: center;
font-family: 'permanent Marker';
font-size: 35px;
}
.a {
position: absolute;
animation: f 5s linear forwards;
opacity: 0;
z-index: 6;
}
.b {
position: absolute;
animation: d 6s linear 6s forwards;
opacity: 0;
z-index: 2;
font-size: 25px;
color: wheat;
}
.c {
position: absolute;
animation: e 12s linear 12s forwards;
opacity: 0;
z-index: 2;
font-size: 30px;
font-family: cursive;
}
@keyframes f {
0% {
position: absolute;
top: -200px;
opacity: 0;
}
10% {
position: absolute;
top: 130px;
opacity: 0;
}
50% {
position: absolute;
top: 200px;
opacity: 1;
}
100% {
top: 220px;
opacity: 0;
}
}
@keyframes d {
0% {
position: absolute;
bottom: -10rem;
opacity: 1;
}
75% {
position: absolute;
bottom: -270px;
opacity: 1;
}
100% {
bottom: -270px;
opacity: 0;
}
}
@keyframes e {
0% {
position: absolute;
bottom: -120rem;
opacity: 0;
}
75% {
position: absolute;
bottom: -370px;
opacity: 1;
}
100% {
bottom: -370px;
opacity: 0;
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
70% {
background-position: 0% 50%;
}
100% {
background-position: 0% 50%;
}
}
.a {
background-image: linear-gradient(#ff0844, #ffb199);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Javascript
alert("🔶🔷To play music click anywhere on screen🔷🔶");
document.getElementById('music');
document.addEventListener("click", () => {
music.play();
});
