<section>
  <section class="info">
    <h1>Cam'ron</h1>
    <p>Hey Ma</p>
  </section>
  <audio>
    <source src="http://joey.so/camron.mp3" type="audio/mpeg"/>
  </audio>
  <footer>
    <li class="controls"><a href="javascript:playPause();">►</a></li>
   
  </footer>
</section>

<h2> <a href="https://twitter.com/joericho">@joericho</a></h2>
body {
  background:#1abc9c;
  font-family: 'Open Sans', sans-serif;
}

section {
 background:url('http://cdn.hiphopwired.com/wp-content/uploads/2012/02/camron.png') no-repeat;
  background-size:100%;
  background-position:0px -56px;
  position:relative;
  width:400px;
  height:230px;
  -webkit-border-radius:10px;
     -moz-border-radius:10px;
          border-radius:10px;
  margin:50px auto;
}

.info {
  position:absolute;
  top:0px;
  left:15px;
  background:none;
  width:90%;
  margin:0 auto;
  text-align:left;
  -webkit-border-radius:0px;
     -moz-border-radius:0px;
          border-radius:0px;
  padding-top:20px;
  height:45px;
  text-shadow:1px 1px 0px rgba(0, 0, 0 , 1);
}


h1 {
  color:white;
  font-size:1em;
  font-weight:400;
  margin:0;
}

p {
  margin:0;
  color:rgb(26, 188, 156);
  font-size:0.9em;
  font-weight:600;
}

footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:43px;
  background:rgb(52, 73, 94);
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
     -moz-border-radius-bottomright: 10px;
     -moz-border-radius-bottomleft: 10px;
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
}

.controls {
  list-style:none;
  padding:11px 10px 8px 10px;
  width:30px;
  height:20px;
  text-align:center;
  color:#FFF;
  cursor:pointer;
  border-radius:100px;
  display:inline-block;
}

.length {
  position:relative;
  list-style:none;
  background:rgb(44, 62, 80);
  height:11px;
  width:320px;
  display:inline-block;
}

.length:before {
  position:absolute;
  width:250px;
  height:11px;
  content:"";
  background:rgb(236, 240, 241);
}

h2 {
  margin:0;
  text-align:center;
  font-size:0.8em;
  font-weight:500;
}

a, a:visited {
  color:rgba(0, 0, 0, 0.5);
  text-decoration:none;
  font-weight:600;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

a:hover {
  color:#fff;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}
 function playPause() {
       var song = document.getElementsByTagName('audio')[0];
       if (song.paused)
           song.play();
       else
           song.pause();
       }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js