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');
}
