HTML, CSS and JavaScript playground

<!DOCTYPE html>
<hmtl lang="en">
</head> </html>
<head>
      <meta charset="UTF-8" />
<title>Silva \^o^/</title>
<style> 
lol {
}
lol, .img2 { /* album's cover image u can change the size! */
position: relative;
width: 45px;
height: 45px;
background-color: black;
color: black;
z-index: 999;
}
.img1 { /* cd image u can change the size too */
position: absolute;
left: 30px;
z-index: 800;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
.img1:hover { /* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}
</style>
<body>
<div id="lol"><img class="img2"src="https://i.pinimg.com/736x/53/ce/e4/53cee4de132f8eb8164e9a003c0f78f6.jpg"><img class="img1" src="https://media.discordapp.net/attachments/1354069354710564958/1361360119631183882/1rNQAJG12omk0kM5DMQDIDyQy87Rn4XwOxdOVEeuYGAAAAAElFTkSuQmCC.png?ex=67fe78e9&is=67fd2769&hm=c690525ad161f2d3926242fb8c071f3ab74f3307ef4279b7482762060b0dd4ef&=&format=webp&quality=lossless&width=576&height=575" width="auto" height="45px"></div>
<script>
document.getElementById("lol").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>
<audio id="audio" src="https://cdn.discordapp.com/attachments/1354393828488118312/1361357579090919518/Well_be_Fine_Karaoke_-_Epic_the_Musical_by_Jorge_Rivera-Herrans.mp3?ex=67fe768b&is=67fd250b&hm=6168a1a57d84c89ab85b84c3d131c50e0903adb0e2e1fa4afa47386ee3de46f9&"></audio>
</body>
</head>
<head>
  <style>
    .outlined-text {
      color: white; /* Inside fill color */
      -webkit-text-stroke: 2px #a22e2e; /* Outline (stroke) color and width */
      font-size: 48px;
      font-weight: bold;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
    <div style="text-align: center;">
  <p class="outlined-text">Epic The Musical<p class="custom-font"></p>

</body>
<body>
	</div>
    <style>
        {text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 font-style: jojoba;
 font-size:2em;
 font-weight:bold; 
 color: #fff;}
@font-face {
src: url(https://dl.dropbox.com/s/uougf9v63jmphoj/jojoba.otf);
font-family: jojoba;
}
 
div {
font-family: jojoba;
font-size: 2em;
}
 
</style>
</head>
<body>
    <div style="text-align: center;">
  <p class="custom-font"><p class="outlined-text">Jorge Rivera-Herrans <img src="https://media.discordapp.net/attachments/1354069354710564958/1361643506292228187/fbW7jONkC6eAAAAAElFTkSuQmCC.png?ex=67ff80d6&is=67fe2f56&hm=56d7d91cec144e85b893b94f6ec6b057a7e04a02aee153450306037b92522b89&=&format=webp&quality=lossless&width=45&height=45"></p>

</body>
    </div>
</body>
</html>
<center>
  <div id="contec">
    <span>Cast</span><mark>Main</mark>
      <p class="custom-font">Jorge Rivera-Herrans ☆ <img src="https://media.discordapp.net/attachments/1354069354710564958/1362026766763298846/fbW7jONkC6eAAAAAElFTkSuQmCC.png?ex=6800e5c6&is=67ff9446&hm=349dc88acc1df23413c0f4aae11bd42828604982fdd9c78c97ba103b2403336d&=&format=webp&quality=lossless&width=56&height=56"></p>
       <p> Voiced as Odysseus, Winion, & Polyphemus
    </p>
    <p>
     Basically who made Epic The Musical and began the Project at june 2019 as a senior thesis project for collage once he started to work it became widespread attention in 2021, starting to post about the musical on tiktok, The First saga; Troy Saga released in december 2022 followed by the Second saga; The Cyclops released in the early 2023.
     Also Founder of Winion Entertainment LLC.
    </p>
<p class="custom-font">Anna Lea ✦ <img src="https://media.discordapp.net/attachments/1354069354710564958/1362005949065465926/6MXX8BEOzuyz3kdeIAAAAASUVORK5CYII.png?ex=6800d263&is=67ff80e3&hm=e054d854651505aaf5c19981b46c51963eb764b6ccdcdbeb157b283dc5d19bd8&=&format=webp&quality=lossless&width=25&height=20"></p>
  <p>
  Voiced as Penelope & The Sirens
  </p>
  <p>
  Anna orignally auditioned for Calypso before auditioning for Penelope 
  </p>
  <p class="custom-font">Miguel Veloso ✧ <img src="https://media.discordapp.net/attachments/1354069354710564958/1362010746799653075/4HIF7P8fS5EGK6PP0TsAAAAASUVORK5CYII.png?ex=6800d6da&is=67ff855a&hm=3cd2cf78e103d006a2189c955faa61e9c4437ac137a1d2c63462226e2fb83737&=&format=webp&quality=lossless&width=35&height=20"></p>
  <p>
  Voiced as Telemachus 
  </p>
  <p>
  He was inspired to audition for Telemachus by Naethan Apollo, a fellow songwriter and content creator who auditioned for the role for fun.
  </p>
  <p class="custom-font">Teagan Earley ⟢ <img src="https://media.discordapp.net/attachments/1354069354710564958/1362012917452509305/B99budJZsYMIAAAAAElFTkSuQmCC.png?ex=6800d8e0&is=67ff8760&hm=19f46f968b3fcc1f5a0868fd76701d22903ec08e13c2fa2e23c8fac057df9613&=&format=webp&quality=lossless&width=25&height=25"></p>
  <p>
  Voiced as Athena
  </p>
  <p>
  Used to voice: Circe, Scylla, & Hera in the Early Demos
  </p>
<p class="custom-font">Armando Julian ⚡ <img src="https://media.discordapp.net/attachments/1354069354710564958/1362016073909801040/VxKPrKs7ia1SGQjG0ZsZwT8BvOmJILaHG5UAAAAASUVORK5CYII.png?ex=6800dbd1&is=67ff8a51&hm=972c3e562c7aa08c62be210ec8286abbe2b429b78eda714f8a313b45ae8d65e1&=&format=webp&quality=lossless&width=25&height=25"></p>
<p>
Voiced as Eurylochus
</p>
<p>
Armando met Jorge at a Hamilton audition.
</p>
<p class="custom-font">Steve Dookie