Web Playlist V1.0 ~ D.Va/Quotes: TEST (*.ogg files) With HTML and CSS

HTML
<div class="top">WEB PLAYLIST<div class="sub">V1.0</div></div> <div class="body"><div class="title">D.Va/Quotes: TEST (*.ogg files) </div> <ul > <li class="music">Makeup whiskers? Nuh-uh. This is WAR PAINT!</br> <audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/b/b9/DVaBase_PissedP04.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li class="music"><empty bag rustling> Crumbs?! Gotta grab more gamer fuel after the match! Nomnomnomnomnom. <audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/6/68/DVaBase_PissedP09.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li class="music">Oh, by the way... (whispered secret) I know I say "Nerf this" a lot. PLEASE don't ACTUALLY nerf this... okay?</br> <audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/d/dc/DVaBase_PissedP07.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li class="music">:) (Winkyface - Pilot)</br><audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/3/30/D.Va_-_Winky_face.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li class="music">:) (Winkyface - MEKA)</br> <audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/f/f6/D.Va_-_Winky_face_Meka.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li class="music">Hey! Hands off! (presumably a response to a Mechanic worker hero/skin)</br> <audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/6/6c/DVaBase_IntroResponse_Mechanic00.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li> <li class="music">Like, Follow, Subscribe! (presumably related to the Famous hero response)</br> <audio controls > <source src="https://heroesofthestorm.gamepedia.com/media/heroesofthestorm.gamepedia.com/0/07/DVaBase_IntroResponse_Plug00.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </li>
CSS
body { background: #030303 url("http://www.nmgncp.com/data/out/259/5906946-overwatch-pc-wallpaper.png")no-repeat; background-attachment: fixed; background-size: 100%; background-position: right top; } .top { font-family: oswald; font-size: 70px; color: #fff; text-align: center; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } .music { list-style: none; background: #1e1b2d; padding: 10px; margin-left: -25px; font-family: oswald; color: #fff; width: 550px; font-size: 18px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } .music:nth-child(odd) { background: #100813; color:#fff; } .sub { font-size: 20px; margin-top: -5px; color: #fff; letter-spacing: 15px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } .title { color: #fff; font-family: oswald; font-size: 30px; padding: 10px; text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } .body { width: 600px; padding-bottom: 20px; background: #221E26; margin-left: auto; margin-right: auto; opacity: 0.80; } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); }
JAVASCRIPT
Expand for more options Login